Desplegable de selección

[NatiOertel]

Nombre en Obelisco: Desplegable
Tipo de componente: Molécula
Ejemplo en bootstrap: https://getbootstrap.com/docs/5.3/components/dropdowns/
Ejemplo de aplicación en BA: Filtros desplegables

[NatiOertel]

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

Se requiere analizar ejemplos y el funcionamiento del componente.
Se requiere crear en Storybook pestañas para desplegables sin borde y con borde.
Se requiere eliminar de Storybook las pestañas "Desplegable solo ícono" y "Desplegable enlace", ya que las mismas pueden describir otro tipo de componente.
Se requiere sumar en el apartado Organismos de Storybook una pestaña llamada "Desplegables combinables" y dentro otras 2 pestañas más que muestren la combinación de desplegables con botones y con navegación horizontal.
Se requiere modificar la tipografía de los desplegables que conforman el organismo "Filtro desplegable" por Nunito 16px en el UI KIT.
Se requiere modificar la tipografía de los desplegables (molécula) para que todos tengan Nunito regular.
Se requiere corregir la ortografría del cuarto desplegable que conforman el organismo "Filtro desplegable" por "Todos los días" en el UI KIT.
Se requiere definir el contenido que desplegará el componente, pudiendo ser opciones de selección única, opciones de selección múltiple y enlaces.

[NatiOertel]

Se comienza el análisis del componente, teniendo en cuenta que el mismo cuando se despliegue debe mostrar otro componente, llamado opciones, el cual también requiere de un análisis para conformar los desplegables.

[NatiOertel]

Se analizaron ejemplos de desplegables y el funcionamiento de los mismos en otros sistemas de diseño para contemplar las necesidades básicas del componente en relación a su contexto de uso y las necesidades que pueden surgir a futuro.

Sistemas de diseño consultados:
Carbon Design System: https://carbondesignsystem.com/
Spectrum: https://spectrum.adobe.com/

Ejemplos:

En base a este análisis se determinó que:

• Los desplegables pueden mostrar opciones de selección única y selección múltiple. Avanzamos con esto.
• Los desplegables de tipo Caja combo necesitan un análisis más profundo respecto a su funcionalidad y dependiendo las necesidades que vayan surgiendo, se sumarían después al UI KIT.
• Los desplegables deben tener el mismo alto que otros componentes, como botones o navegación horizontal.
• El componente Opciones debería estar en la página de desplegables. Por lo tanto, se elimina la página del componente en el UI KIT, así como también en storybook y la web de estándares.
• Los radio button y checkbox que queden sueltos como moléculas quedan únicamente en Formularios. Esta página del UI KIT se analizará más adelante.

Por otro lado, surgió la posibilidad de sumar otro componente de manera individual, el cual es menú desplegable. Este componente se comporta como un desplegable, pero su funcionalidad está más relacionada a la navegación de un sitio. Se continuará con su análisis más adelante.

[NatiOertel]

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

[NatiOertel]

¿En qué trabajamos?

Desplegables:

• Se estableció un ancho fijo para el componente.
• Se eliminó la variable booleana "Mostrar_cheuron" y se la reemplazo por la variable "Mostrar_icono".
• Se agregó una variable para elegir el ícono que mostrará el desplegable.
• Se agregó una variable booleana para mostrar el ícono de los desplegables.
• Se renombró el estado "desplegable" por "expandido".
• Se renombró la variable "Borde" por "Estilo".
• Se ajustó el padding del desplegable chico para que tenga un alto de 30 px y coincida con el alto de los botones chicos y navegación chica al ser combinados.
• Se ajustó la separación que existe entre las opciones para mejorar la visualización del componente cuando este expandido. Este valor era 4px y ahora es 5px.
• Se le designó la tipografía Nunito 18 regular a los desplegables grande y mediano, y Nunito 16 regular a los desplegables chicos.
• Se cambió el nombre de la página “Filtros” en Organismos por “Desplegables (filtros)”.
• Se volvió a construir el organismo. Se le agregaron variables booleanas para poder costumizarlo a elección.

Opciones:

• Se definió que las opciones que se muestran en el estado desplegable del componente sean opciones de selección única y opciones con checkbox para selección múltiple.
• Se eliminó el estado activo de las opciones para desktop porque ese estado hace referencia a botones.
• Se agregó el estado deshabilitado.
• Se eliminó el estado en_foco de las opciones para mobile ya que dicho estado no corresponde a ese dispositivo.
• Se eliminaron las opciones con y sin ícono debido a que no es una buena práctica utilizar dicho atributo dentro de un desplegable.
• Se agregó un ícono de check a la derecha de las opciones de selección única para identificarlas cuando tengan estado seleccionado.
• Se volvió a construir el componente para que se pueda customizar a elección a través de sus variables
• Se elimina la página opciones del UI KIT debido a que en formularios ya contamos con las moléculas de opciones sueltas (radio button y checkbox).
• Se agregaron tres tamaños de opciones: grande, mediano y chico, para que coincidan con el tamaño del desplegable cuando el mismo esté desplegado.

Antes:

Después:

[NatiOertel]

Se creó una branch para documentar la ficha del componente:
https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/xTmjLXmKcW555eeFrgNgSJ/Fichas?type=design&node-id=552-813&t=KncDzUxb0GY4TUPK-0

[camilembo]

Se revisó el componente de desplegable y se llegó a las siguientes conclusiones:

• La variante “seleccionado” en la opción de selección única no debería tener el número entre paréntesis ya que no se puede seleccionar más de una opción.
  En base a este punto se definió crear una propiedad booleana para poder activar o desactivar el número en el caso que corresponda.

• Se definió que el contenido que tenga el desplegable debe ser corto y conciso. El ancho máximo de este componente será de 4 columnas, si el contenido excede este ancho se verá truncado el texto cortando la última palabra y agregando tres puntos que denoten la continuidad de dicha información.

• se modificó la ficha en base a estos cambios también.

[camilembo]

Se hizo merge el día 07/09/2023

[camilembo]

A PARTIR DEL CAMBIO DE CHECKBOX SE REABRE EL ISSUE DE DESPLEGABLE DE SELECCIÓN PARA REVISAR LA SELECCIÓN MÚLTIPLE