Open aloyber opened 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 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
@NatiOertel
¿En qué se trabajó?
Antes:
Después:
Info colapsable:
Se crea una branch para la ficha: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/n1TvCpu8sUP3WezghLrgoz/Fichas?node-id=994-817&t=mzrbaAUNgZ5fTaSk-0
@NatiOertel ¿podremos separar las opciones de selección para el colapsable con contenido expandido tipo lista? (Figma)
SE HIZO EL MERGE EN EL UI KIT EN LA SEMANA DEL 8/05
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
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)
✅ 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):
Con @JuaneRambosio avanzamos con lo que se levantó anteriormente.
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 :)
🎯 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
Dale! avancemos con los cambios en la ficha en caso de que sea necesario @marusaad @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:
Okiii, si cambiamos algo de la ficha tengamoslo presente para avisarles el jueves en la weekly al equipo de desarrollo 😉
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.
@LuCostas @camilembo
Sumar prototipado entre variantes :)
🎯 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.
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 :(
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.
Queda actualizar la ficha para incorporar la nueva variante en fondo blanco
Se actualizó la ficha del componente. @camilembo queda para revisión y con esto se puede cerrar.
¡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.
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
Ficha
@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.
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.
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.
¡Hola! 👋
Dejamos un update sobre el componente a partir de la revisión de tipografía con la escala actualizada.
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.
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