LuCostas commented 1 year ago

Desplegable de navegación

Nombre en Obelisco Desplegable de navegación

Descripción Este tipo de desplegables permite acceder a opciones de navegación y funcionalidades adicionales de manera organizada, desplegándolas de forma vertical u horizontal.

Tipo de componente Átomo | Molécula | Organismo | Plantilla

Links UI Kit | Ficha Figma | Estándares | Storybook

Ejemplo en Bootstrap Ejemplos de aplicación en BA

Requerimiento Generar un desplegable que pueda ser utilizado de manera independiente o que esté presente dentro del Header. Tiene como fin que el usuario pueda navegar un sitio.

JuaneRambosio commented 1 year ago

✏ Brunch creada

Junto a @marusaad comenzamos con el análisis.

camilembo commented 1 year ago

ej. de headers en figma: https://www.figma.com/file/8yDFo6mJYnDOSCNiFuX5xk/2.Mi-actividad?type=design&node-id=688-16633&mode=design&t=a7Dpm9gEx89tnI9v-0

ej. de header que se hizo por un pedido urgente, no está muy pensado desde usabilidad (tomemoslo con pinzas) https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/2HkeQSSIeiNL7G1po6I2B1/UI-KIT---Obelisco?type=design&node-id=1022-9648&mode=design&t=XhTcoYdlocJpW5mg-0

marusaad commented 1 year ago

Luego de realizar el análisis, con @JuaneRambosio comenzamos a construir el componente "Opción de navegación", que son los tipos de opciones (y sus estados) que van a aparecer dentro del desplegable de navegación.

Las opciones cuentan con:

Variante de dispositivo (desktop y mobile)
Variante de tipo (predeterminado, de peligro y en cascada -este último a chequear técnicamente-)
Variante de borde (con borde y sin borde)
Variante de estado (predeterminado, sobre, en foco y deshabilitado. La cascada tendrá un estado adicional de "seleccionado")
Alineación (predeterminada y a la derecha)
Propiedad booleana para mostrar ícono a la derecha
Propiedad booleana para mostrar ícono a la izquierda
Propiedad booleana para mostrar notificación en el texto

En cuanto a la cascada, estamos teniendo problemas a nivel técnico. El lunes en la daily llevamos la problemática para ver opciones de solución. @camilembo @LuCostas

marusaad commented 1 year ago

Con @JuaneRambosio finalizamos el análisis y en función de eso comenzamos la construcción del componente y todas sus variantes.

El análisis ya se encuentra en la page Desplegables de navegación del archivo Análisis de componentes.

En la branch de Desplegables de navegación ya se encuentra el componente construido listo para su validación. @camilembo

A partir de esto, creamos una branch de fichas para Desplegable de navegación.

JuaneRambosio commented 1 year ago

✅ Chevron del Dropdown invertido cuando está activo, hecho!

Avanzamos con la ficha 🤙

marusaad commented 1 year ago

🌼 Con @JuaneRambosio finalizamos con los ajustes necesarios del componente "Desplegable de navegación" y finalizamos la ficha.

📝 Anotaciones sobre el componente

Se eliminó la elipse de notificación de las opciones para poder construir opciones con texto de más de una línea teniendo en cuenta el uso de las mismas en las páginas de área, que cuentan con nombres de secretarías y otros organismos gubernamentales que pueden ser largos.
El botón disparador del deplegable viene de forma predeterminada con el texto "Desplegable" y el chevron hacia abajo. Depende del lado del que se desplieguen las opciones, el chevron aparecerá a la izquierda o a la derecha del texto. La propiedad de mostrar ícono permanece en false por default y se puede activar a gusto del diseñador.
Se le colocó el texto "Cerrar sesión" y el ícono correspondiente a la opción de peligro, para reforzar la razón de su uso.
Se cambió la tipografía del botón disparador a un h5 de Mobile (se encontraba en desktop)
Al desplegarse, el botón disparador quedará en estado activo. Y se sumó el estado de foco a las variantes del mismo.

🗄 Ficha

Se decidió organizar las fichas de la siguiente manera: dentro de la navegación horizontal, habrá dos fichas (a nivel 3 de navegación) sobre desplegables. Una de desplegables de selección (para filtros y formularios) y otra ficha de desplegables de navegación.
Se completaron buenas y malas prácticas

🕒 Pendientes para más adelante

En la ficha de "Navegación y pestañas" deberá incorporarse la información de cómo se organizan los desplegables y botones en mobile (de forma vertical)
En la ficha de "Navegación y pestañas" incorporar un enlace a la ficha de desplegables de navegación para profundizar sobre el componente como molécula.
En la ficha de "Encabezado de página" incorporar un enlace a la ficha de desplegables de navegación para profundidad sobre el componente como molécula.

@camilembo el componente y la ficha quedan disponibles para su revisión.

Desplegable de navegación Desplegables de navegación

camilembo commented 1 year ago

Tengo un par de dudillas: 1- Este punto debería llevarme a desplegables de selección no? no solo desplegables

2- Acá habría que aclarar que es en mobile la disposición vertical? porque en desktop si podríamos usar un desplegable al lado del otro siempre y cuando ocupen hasta 8 columnas

3- A qué le llaman acciones destructivas? por ejemplo si apareciera una acción de eliminar sería? 🤔

Eso es todo! ❤

marusaad commented 1 year ago

Modificaciones de la ficha @camilembo

1) El enlace ahora es a "Desplegables de navegación" 2) Ya se aclaró el mensaje en mobile, y también en la sección de la ficha de desplegable en navegación horizontal la cantidad máxima de columnas para desktop. Esto deberíamos incorporarlo también a la ficha de "Navegación y pestañas" porque impacta también en los botones de la navegación, no solo desplegables. 3) Sacamos la parte que dice "acciones destructivas" por "opción de cerrar sesión" ya que sería el único uso contemplado.

Desplegables de navegación (1)

camilembo commented 1 year ago

Buenísimo!! lo entregamos hoy en la weekly con desarrollo 💪

marusaad commented 1 year ago

Elaboramos unos frames dentro de la branch del componente a modo de handoff con especificaciones del comportamiento de las opciones y desplegables de navegación. También incluimos una demo con el componente animado.

Handoff - Opciones de navegación

Handoff - Desplegables de navegación

marusaad commented 1 year ago

Se eliminaron todas las opciones de navegación que tenían borde porque no convivían con la caja contenedora de opciones del desplegable. Sólo quedan con borde los estados "sobre" y "en foco"

Se corrigió la branch @camilembo . La ficha no tenía ejemplos de opciones de navegación con bordes por lo que no deben realizarse cambios.

camilembo commented 1 year ago

Se hizo merge el día 07/09

Diehault commented 3 months ago

¡Hola! 🚗

Actualizamos el componente Desplegable de navegación aprovechando la actualización general de la guía tipográfica.

¿Qué hicimos?

Actualizamos la plantilla del componente en el UI kit.
Actualizamos los estilos tipográficos del componente.
Cambiamos la iconografía que quedó fuera de versión por íconos de la librería de Material Design Icons.
Actualizamos la nomenclatura de las propiedades del componente y la jerarquía de las mismas.

¿Qué cosas consideramos como evolutivos?

Hay frames y capas dentro del componente que pueden simplificarse, renombrarse o pensarse de otra forma para hacer más sencilla la estructura.
Se pueden sumar medidas mínimas y máximas, como para ajustar y hacer más flexible el funcionamiento del componente, ya que no siempre tiene el mismo tamaño y depende del contexto.

¿Cómo se ve la página del componente en el UI kit?

NicoAltamirano commented 1 month ago

📢 Nuevo requerimiento

Issues relacionados

311

Qué

Actualizar el componente según el nuevo estilo de grillas de la v.2 de Obelisco.

Por qué

Para estandarizar tamaños, modulación y visualizaciones de todos los componentes.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

[x] El componente se ajusta a la grilla 4px.
[x] El componente tiene una medida definida para mobile, tablet y desktop.
[x] El componente tiene una modulación definida para mobile, tablet y desktop.
[x] El componente tiene su handoff para desarrollo y está marcado como ready for dev.
[x] El componente está documentado.

🕰️ Changelog

CHANGELOG	Descripción
Agregado	Se creo la variante Tablet. Se le asigno un ancho máximo de 336 px. (3-col en la nueva grilla) al desplegable y a las opciones de navegación (tanto las predeterminadas como las opciones en cascada).
Arreglado	En desktop, al desplegable y las opciones (tanto del tipo predeterminadas como en cascada) se les asignó un ancho máximo de 348px (en la grilla desktop nueva 4-col). En Mobile, se le asignó al desplegable un ancho máximo de 328px, en la grilla Mobile nueva 2-col (100%).
Eliminado	Cell
Obsoleto	Cell
Cambiado	Cell

✏️ Notas

[EV]: -

gcba / estandares