Colapsables

[aloyber]

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]

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]

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]

• 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]

¿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]

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

[aloyber]

@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]

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

[camilembo]

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]

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]

✅ 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]

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]

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]

🎯 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

[camilembo]

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

[JuaneRambosio]

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]

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

[JuaneRambosio]

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]

@LuCostas @camilembo

[camilembo]

Sumar prototipado entre variantes :)

[marusaad]

🎯 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]

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]

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.

[marusaad]

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

[marusaad]

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]

¡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]

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]

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.