Colapsables - Githubissues

aloyber commented 1 year ago

Nombre en Obelisco: Colapsable Tipo de componente: Molécula Ejemplo en bootstrap: https://getbootstrap.com/docs/5.3/components/collapse/ Ejemplo de aplicación en BA: Exentos de pago y casos particulares **Requerimientos: Se necesita compatibilizar la información brindada en el Storybook, UI KIT y web de estándares para el componente de colapsable.

Se requiere crear un único componente en UI KIT con sus respectivas variables para que pueda ser costumizado a elección Se requiere organizar el orden en el que se muestra la complejidad de la composición del colapsable en Storybook

NatiOertel commented 1 year ago

Requerimientos: Se necesita compatibilizar la información brindada en el Storybook, UI KIT y web de estándares para el componente de colapsable.

Se requiere crear un único componente en UI KIT con sus respectivas variables para que pueda ser costumizado a elección
Se requiere organizar el orden en el que se muestra la complejidad de la composición del colapsable en Storybook

NatiOertel commented 1 year ago

Se creó un branch en el UI KIT para trabajar el componente: https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/TmOB9TTmzmLeuuMMd2FpQP/UI-KIT---Obelisco?node-id=1344%3A14738&t=keTdTj1HgNEtO940-0

camilagaldo commented 1 year ago

Se realizó una revisión de la brunch y se dejaron comentarios para analizando en conjunto.
La brunch de la ficha solo quedó copiada, estamos ok en esta etapa.

@NatiOertel

NatiOertel commented 1 year ago

¿En qué se trabajó?

Se eliminaron los estados "sobre" y "en_foco" para mobile porque son innecesarios en este dispositivo.
Se modificó la estructura del componente para poder visualizarlo desde la unidad mínima de información.
Se eliminó el “colapsable_tarjeta” y el “colapsable_totalizador”, dejando un solo tipo de colapsable como molécula con sus respectivas variables para customizarlo a elección.
Se contemplaron todas las combinaciones posibles del colapsable tanto para cuando colapsa información como cuando no lo hace.
Se creó un nuevo componente llamado “info_colapsable”, el cual dispone de dos variables: "con_lista" y "sin_lista".
La variable sin_lista se usa para mostrar texto simple dentro del colapsable.
La variable con_lista se usa para mostrar ítems con información en forma de lista, con tres niveles de texto (texto principal, descripción y label).
Se cambió el estado “activo” y “en_foco_activo” por “expandido” y “en_foco_expandido” para desktop, ya que el estado activo hace referencia a botones.

Antes:

Después:

Info colapsable:

NatiOertel commented 1 year ago

Se crea una branch para la ficha: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/n1TvCpu8sUP3WezghLrgoz/Fichas?node-id=994-817&t=mzrbaAUNgZ5fTaSk-0

aloyber commented 1 year ago

@NatiOertel ¿podremos separar las opciones de selección para el colapsable con contenido expandido tipo lista? (Figma)

Selección única (radio button)
Selección múltiple (checkbox)

camilembo commented 1 year ago

SE HIZO EL MERGE EN EL UI KIT EN LA SEMANA DEL 8/05

camilembo commented 1 year ago

Re-abrimos esta tarjeta con motivo de modificar en el UI kit el tamaño de ancho del componente de "Colapsable" en la versión mobile

JuaneRambosio commented 1 year ago

El día de hoy se creó una Branch de Colapsables

Al día de la fecha tenemos el componente con un ancho de: 340px y pasará a estar a un ancho de 328px (ancho de la grilla)

JuaneRambosio commented 1 year ago

✅ Se cambió el tamaño del componente en Mobile de 340px a 328px en cada una de sus variables.

🚫 Posteriormente a realizar el cambio de tamaño se pasó a probar como reaccionaba el componente en todas sus variables y me encontré con algunas cuestiones (en Mobile y Desktop):

Versión Mobile: La variable "Sobre" en Mobile no debería existir ya que ese estado es un "hover". Acá la tarea a evaluar es si se puede ocultar esa opción cuando estamos en Mobile.

Versión Desktop: Cuando le agregamos un ícono a la variable "Sobre" por defecto nos trae el ícono en blanco. Acá la tarea debería ser que nos traiga el ícono del color pertinente asociado al "Sobre".

Versión Desktop: Cuando hacemos doble click en el componente pero en la parte "desplegada" en las capas nos aparecen más opciones "ocultas". Acá deberíamos evaluar si hay otra forma de seguir sumando opciones pero de una forma más accesible (ejemplo: copiar y que al pegar aparezca abajo con la separación que corresponde y el contenedor se vaya adaptando)

marusaad commented 1 year ago

Con @JuaneRambosio avanzamos con lo que se levantó anteriormente.

Cambiamos el color del ícono del componente Desktop cuando está en Estado/Sobre al color correspondiente
Cambiamos el color de la volanta del componente Desktop cuando está en Estado/Sobre al color correspondiente (fue algo que evidenciamos en el trabajo de hoy)
Probamos y analizamos la construcción del componente y por qué había capas ocultas. Entendemos que es porque al ser "info_colapsables" un componente que se inserta en otro componente "colapsables", no permite edición (como por ejemplo agregar un bloque más de lista al autolayout). Lo llevamos a la daily del lunes 17 porque existen soluciones, pero requieren un tiempo considerable de diseño. @camilembo

camilembo commented 1 year ago

Esto veamos si tiene sentido que lo encaremos como está en componente de desplegables que tiene las opciones que se despliegan ahí mismo en la page

Ejemplo:

Y también si hace sentido agregar un máximo de opciones como en desplegables también (que se oculten o visualicen según necesidad)

Ejemplo:

Si me estoy salteando de algún punto igual avisame @JuaneRambosio :)

marusaad commented 1 year ago

🎯 Con @JuaneRambosio continuamos trabajando en el componente de colapsables.

A partir de ahora al expandir los colapsables en Desktop y Mobile se ven 7 opciones disponibles para utilizar (la cantidad máxima según las buenas prácticas). Las mismas pueden ser en las variantes "con lista" y "sin lista", y en caso de no necesitarlas se pueden ocultar las capas.
La opción "con lista" va a tener visibles las propiedades booleanas de ícono, label, descripción, título y radio button para que se evidencien todas las opciones posibles a simple vista. La propiedad de "Mostrar check" queda en false porque sería intercambiable con "Mostrar radio".
Al componente "info_colapsables" en su variante "sin lista" se le agregó un bottom padding de 16px para darle más aire cuando está en lista con otras opciones.
En la última opción dentro de la variante "expandido" y "expandido en foco" del colapsable, se ocultó el separador (line) para indicar que es la opción final)
Diseñamos ejemplos de uso que muestran cómo intercalar las distintas opciones ("con lista" y "sin lista") y evitar malas prácticas.

⏱ En el caso de que esto esté ok, tendríamos que trabajar sobre la ficha para especificar alguno de estos cambios y mostrar los casos de uso. @camilembo

Colapsables

camilembo commented 1 year ago

Dale! avancemos con los cambios en la ficha en caso de que sea necesario @marusaad @JuaneRambosio

JuaneRambosio commented 1 year ago

Miramos la ficha y creemos que está bien. Lo único que hicimos fue reemplazar los componentes que estaban dentro por los últimos que hicimos. Por otro lado, mientras hacíamos la ficha e interactuábamos con el componente nos dimos cuentas que:

Faltaba la opción "En foco" (Versión Mobile)
El ícono quedaba de color azul cuando el componente estaba expandido, éste debería ser blanco (Versión Mobile)
Se sacó el bottom padding de 16px que habíamos agregado anteriormente ya que cuando tenemos expandido el componente sólo con un bloque de información quedaba demasiado blanco.

camilembo commented 1 year ago

Okiii, si cambiamos algo de la ficha tengamoslo presente para avisarles el jueves en la weekly al equipo de desarrollo 😉

JuaneRambosio commented 1 year ago

Joya Cami, solamente cambiamos el componente que aparecia por el último (es de 328px y el anterior era más grande, de 340px) pero se lo comentamos.

JuaneRambosio commented 1 year ago

@LuCostas @camilembo

camilembo commented 11 months ago

Sumar prototipado entre variantes :)

marusaad commented 11 months ago

🎯 Se realizaron nuevos requerimientos y ajustes al componente Todos aplican sólo para el UI Kit

Requerimientos Sumar prototipado entre variantes

Ajustes

Se ajustó el componente "Info Colapsables" para que en la variante Con lista se muestren todos los átomos por default. Al día de hoy, al traer el componente desde assets y seleccionar la variante Con lista sólo aparecía visible el título, generando confusión con la variante Sin lista.
Se creó una propiedad swap para los íconos de selección radio y checkbox. Se nomencló la propiedad como Selector. Antes estaban los 2 y uno se ocultaba. Con esta propiedad ya no hace falta.
Se nomencló la línea divisoria como Divisor (antes estaba como Line) y se creó una propiedad booleana para ocultarlo en el caso de que el ítem de la lista sea el último.
Se corrigió la variante Mobile aplicando estilos de texto correspondientes.
Se prototiparon las variantes Predeterminado, Sobre y Activo en Desktop y Mobile

@camilembo queda para chequearlo y se puede pasar a la columna correspondiente.

camilembo commented 11 months ago

Chiquis! yo lo veo rarísimo en la brunch... soy yo sola???

Como desfazado del espacio, pero en la imagen que ustedes pasan está ok. confírmenme porfa :(

marusaad commented 11 months ago

Por un nuevo requerimiento, se agregó la variante "Fondo" al componente para que se pueda visualizar en fondo gris (secundario) y blanco (primario). Dado que los colapsables se utilizan muchas veces en páginas con fondo secundario, el componente se perdía por no tener contraste.

Colapsables (8)

marusaad commented 11 months ago

Queda actualizar la ficha para incorporar la nueva variante en fondo blanco

marusaad commented 11 months ago

Se actualizó la ficha del componente. @camilembo queda para revisión y con esto se puede cerrar.

Se creó una sección dentro de Diseño y estructura para el color del colapsable
Se incorporó como mala práctica el uso del colapsable del mismo color que el fondo

Diehault commented 10 months ago

¡Hola! Acá dejamos también el enlace a la branch de la ficha: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/iATUSK41mJsEqKW1BO38w3/Fichas?type=design&node-id=5256%3A525&mode=design&t=YNx2SlH0mIEbmRoZ-1.

marusaad commented 10 months ago

En la weekly del 24 de octubre se conversó con desarrollo sobre las variantes actuales del componente Colapsables.

Variante con lista Se mapearon sus usos y su origen. Se llegó a la conclusión de que se diseñó como tal para el Portal Único de Pagos, y se encontró un prototipo de XD que muestra su uso para la selección de medios de pago de boletas online. Sin embargo, hoy en día no está implementado de esta manera con una lista con botones de radio, sino con un ícono de acceso. Por lo que actualmente no existe un uso del componente con este diseño al 100%, pero sí está actualmente en uso de forma parcial. De todas formas. decidimos conservarla por si existían más casos en los que se utiliza y no llegamos a mapearlos, y por si se precisa en un futuro. Por lo menos por ahora.

Variante con texto y lista Se decidió no mostrar más esta variante porque no existe mapeado ningún uso hoy en día y no estaba construida la variante.

Branch

Se eliminó la posibilidad de combinar texto y lista en los ejemplos de la branch
Se trabajaron los ejemplos para reforzar el uso actual o potencial del componente, con textos más claros y se incorporaron los divisores correspondientes

Ficha

Se relevó la ficha en su totalidad y se incorporaron cambios de textos, ejemplos y prácticas para que esté más claro.

@camilembo dejamos una copia de la ficha vieja al lado de la nueva en la branch de colapsables de fichas para que se pueda comparar. Esperamos el ok para hacer el merge y avisar a desarrollo el cambio de la ficha.

marusaad commented 4 months ago

Se reabre este issue para documentar los cambios incorporados en la nomenclatura y visualización del componente en Storybook, y en los textos de la ficha.

Nomenclatura de carpetas de Storybook Se trabajó sobre la nomenclatura de las carpetas de Storybook para que queden mejor visualizadas las variantes que precisa Desarrollo.

A nivel código se necesita una variante de lista separada de una lista seleccionable, porque una está construida como div y la otra como form (este caso a nivel diseño no es necesario, ya que con propiedades booleanas alcanza para ocultar los selectores).
Se condensaron las variantes del encabezado del colapsable para no generar tantas variantes de todos los elementos opcionales que puede tener el colapsable (ícono, volanta, descripción)

Ficha del componente Se aclaró en la ficha que en el caso de íconos que acompañan a los ítems de lista dentro del colapsable se pueden incorporar como SVGs de 24x24px imágenes o íconos de otras librerías. Esto es porque, por ejemplo, un ítem de lista que refiere a un método de pago precisa un logo que no está dentro de Material Icons Rounded o Boxicons. En el caso de desarrollo se agregará como posiblidad dentro del código, y en el caso de diseño se tendría que detachear el componente para poder agregar las imágenes.

marusaad commented 1 month ago

¡Hola! 👋

Dejamos un update sobre el componente a partir de la revisión de tipografía con la escala actualizada.

¿Qué hicimos?

Actualizamos los estilos de texto del componente según la nueva escala tipográfica.
Reemplazamos los íconos del componente que provenían de componentes ícono custom en la page de iconografía por íconos de la librería de Material Design.

gcba / estandares

Colapsables #237

¿Qué hicimos?