Enlaces

[paulajoglar]

Enlace

Nombre en Obelisco Enlace

Tipo de componente Átomo

Links UI Kit | Branch | Ficha Figma | Estándares | Storybook | Informe | Excels

Ejemplo en Bootstrap Link

Ejemplos de aplicación en BA

[marusaad]

Vemos que el componente está actualmente en una branch y no en el UI Kit. Se va a actualizar para la utilización en Lista informativa.

• Cambiar estilos tipográficos para mobile y desktop
• Cambiar iconografía por Material Design.

[marusaad]

Se trabajó sobre la branch de "Enlace"

• Se aplicaron los estilos tipográficos correspondientes a enlaces tanto en desktop y mobile
• Se actualizó el ícono de descarga acorde al que está actualmente en Material

Algunas observaciones @camilembo

• El ícono que se usaba para descarga al parecer es de Material (o está en la librería de Material que usamos en el UI Kit) pero se debe haber actualizado porque en la web figura otro. Tendríamos que chequear si en el UI Kit tenemos actualizada esa librería
• Veo que enlace tiene un estado "activo" (que sería con el borde de 4px de "en foco pero con el texto en textos/enlace), y otro estado "en foco" (que sería con el borde de 4px pero con el texto en color "enlace/sobre") No termino de entender la función del estado "activo".

[camilembo]

Maruuu! Yo tampoco entiendo muy bien el tema del estado activo, porque entiendo que un enlace al hacerle click solo te redirige hacia otra pantalla o te realiza una descarga por ejemplo, entonces el estado activo entiendo que no se vería nunca. Pero me puse a comparar con los botones, que siento que tienen una función bastante similar al enlace y también tenemos un estado activo. Me pregunto entonces si ese "activo" no funcionaría como el "pressed" en Material design, intentando encontrarle una justificación eeh, pero no estoy segura. Vos que opinás? si querés lo vemos en una reu rápida :D

[marusaad]

@camilembo Estuve chequeando storybook y la branch. Al parecer hay algunas diferencias para resolver

Estados en el UI Kit

• Predeterminado
• Activo
• En foco
• Sobre

Estados en storybook

• Predeterminado
• En foco
• Sobre
• Visitado

Acá nuestro "activo" podría referirse al visitado, pero no tendría sentido que tenga un stroke como el "en foco" Además, tenemos otros colores que los que están en storybook para los enlaces

• En storyboook "Predeterminado" y "Visited" tienen el mismo color (#006fb3) // No lo tenemos en el UI Kit ese color
• En storybook "Sobre" tiene el color #0069a9 y el en el UI Kit es #00568b (que es el de enlaces/sobre)
• En storybook "En foco" tiene el color #00568b (que es el de enlaces/sobre) en el stroke, en el texto, pero no en el ícono
• En storybook no existe un estado de "activo". En el UI Kit sí, y tiene el texto y el ícono en texto/enlaces pero con el stroke de focus en el color de focus.

Pasando en limpio

• ¿Descartar el "activo"? No se entiende el uso más que nada en relación al focus. Tal vez si queremos que el activo sea tipo While pressed habría que ponerlo en un color más oscuro al texto pero no sé si incluiría el stroke del focus.
• ¿Incoporar un estado de "visited"?
• Alinearnos con desarrollo para que incoporen los colores que tenemos en el UI Kit donde no se estén aplicando, y que también se apliquen al ícono cosa que no quede el texto de un color y el ícono de otro.

[camilembo]

Usamos para revisar y hacer la ficha de enlaces la brunch que ya está creada en Figma. La misma no coincide con lo que hay actualmente en estándares así que hay que revisar tanto texto como variantes que ya revisamos junto con desarrollo. https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/oW1OTV1jupHhVRlaOVt3Ff/Fichas?type=design&node-id=1400%3A1255&mode=design&t=ZtX5E72MoCEeC5Dv-1

[marusaad]

Se cargó la investigación realizada al archivo de Análisis de componentes en la page Enlaces. Incluye research de otros design systems y lo que se habló con desarrollo respecto a un futuro cambio de estilo de focus en los enlaces de texto.

Como cambio para realizar por ahora, el estado focus de los enlaces de texto:

• Va a tener un outline de 2px de grosor en vez de 4px
• El texto del enlace va a tener un padding a la izquierda y derecha de 2px para que el outline quede tan apretado con el texto
• El texto del enlace debe quedar con el subrayado característico de un hipervínculo

[marusaad]

👩🏻‍🔧 Se terminó la construcción del componente y sus variantes. Queda para chequear @camilembo. 👩🏻‍🔧 Se armó un mini handoff con todos los estados y tamaños correspondientes para que sea más fácil para el equipo de desarrollo. 👩🏻‍🔧 Se prototipó el componente: el estado sobre con "while hovering" y el estado focus con "key/gamepad" con la tecla Tab. Creo que no se ve bien cuando pongo play en el prototipo, así que o se cambia a "while pressing" o no se deja prototipado el focus.

Notas

• Luego de conversar con desarrollo, se desestimó el padding left y right de 2px del texto del enlace. Aplicando el padding sólo al estado de focus, dentro de un párrafo se percibe que el enlace se corre de lugar. Para que no suceda esto, habría que aplicar el mismo padding de 2px a todos los estados del enlace. Esto produce cambios en el espacio entre palabras de la tipografía dentro de un párrafo, por lo que se decidió dejar el texto del enlace sin ningún padding.
• Se modificó el espacio entre el texto del enlace y el ícono en el tamaño chico de mobile y de desktop. En el tamaño grande tiene 4px de separación y quedaba con demasiado espacio, por lo que se redujo a 2px. También se cambió el tamaño de los íconos, pasando de 24px a 20px sólo en estos casos para mantener una coherencia en la proporción visual. Por las dudas la semana próxima lo chequeo con desarrollo.

[marusaad]

• Se corrigió el ícono de descarga al que aparece en Material Icons (no Material Symbols)
• Se decidió que el tamaño de los íconos tanto en enlaces grandes como chicos es de 20px
• En todos los casos el espacio entre ícono y texto del enlace es de 2px.

@camilembo listo para revisión.

[marusaad]

Lista la ficha de enlaces @camilembo para revisión.

[camilembo]

Genial @marusaad la veo bien la ficha! Lo pasamos a listo para maquetar 🥇

[marusaad]

Se creó una variante del componente para fondos oscuros (se usa en banner y en footer). El color del enlace pasa a ser "activo" (blanco).

[marusaad]

Se agregó la variante para fondo oscuro en la documentación de la ficha

[camilembo]

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

[Diehault]

Abrimos el ticket para actualizar el componente y ajustar propiedades.

¿Qué se hizo?

Sumamos una instancia/propiedad de texto al componente que nos permite editar el texto sin la necesidad de entrar específicamente en la capa.

¿Cómo quedaron las propiedades?

Con esto también se actualizaría automáticamente el componente de "lista de enlaces", teniendo la posibilidad de editar el wording de cada enlace con mayor facilidad.

[camilembo]

Gracias Die! Se hizo merge con este ajuste el 29/09 :)

[Diehault]

¡Hola! 📎

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

¿Qué hicimos?

• Actualizamos la plantilla del componente en la página del UI kit.
• Eliminamos la variante de dispositivo y las variantes Mobile, porque compartían las mismas características y forma que la variante Desktop.
• Actualizamos los íconos que quedaron fuera de versión por los íconos de la librería de Material Design Icons.

¿Qué se tiene que hacer tras el cambio?

• Al eliminar la variante Mobile del componente, en todos los lugares donde esté en uso aparecerá el aviso de que el componente no existe o dejó de ser parte de la librería. Para solucionar este conflicto, al igual que con el componente Botón, basta con suplantar la variante inexistente por el componente Enlace dentro de la librería.

¿Cómo se ve la página ahora en la librería del UI kit?

[marusaad]

📢 Nuevo requerimiento

Tickets 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. [no aplica para este componente]
• [x] El componente tiene una medida definida para mobile, tablet y desktop. [no aplica para este componente]
• [x] El componente tiene una modulación definida para mobile, tablet y desktop. [no aplica para este componente]
• [x] El componente tiene su handoff para desarrollo y está marcado como ready for dev. [no aplica para este componente]
• [x] El componente está documentado.

🕰️ Changelog

No se realizaron cambios en esta revisión.

✏️ Notas

No hay ninguna nota para mostrar.

[marusaad]

📢 Nuevo requerimiento

Issues relacionados

300

Qué

Actualizar los estilos de color del componente aplicando las variables correspondientes a la v2 de Obelisco.

Por qué

Porque posiciona al sistema en un nivel de calidad superior al cumplir con los criterios de accesibilidad de la WCAG, y facilita la adopción, la personalización y la escalabilidad a nivel global.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• [x] El componente aplica las variables semánticas y funcionales para los elementos del mismo.
• [x] El componente cumple con los criterios de contraste y legibilidad de la WCAG (Criterios de accesibilidad AAA)

🕰️ Changelog

CHANGELOG	Descripción
Agregado	Creamos el estado visited-ondark con un purple más claro, generando consistencia con el estado visited en fondos claros.
Arreglado
Eliminado
Obsoleto
Cambiado	Ya no hay cambio de color entre los estados default y hover. Plantear un cambio de color es muy poco posible dentro de los lineamientos de WCAG que solicitan un ratio no sólo entre el color de texto y el fondo, y el color de texto del enlace con el color del texto del párrafo, sino que también se pide un ratio a cumplir entre estados. Que, en nuestro caso, con un azul un poco más oscuro, no era posible cumplir. Por lo tanto para pasar el criterio de WCAG no nos basamos en el color para indicar el estado de hover, sino en un cambio en el grosor del subrayado, que en default está en 2px y en hover en 3px.

✏️ Notas

Por las posibilidades constructivas de Figma, no podemos personalizar el subrayado como sí lo podemos hacer en el código. Es por esto, que en Figma se mostrarán estos enlaces a modo representativo y sólo en su modalidad standalone (o sea, un enlace que no está dentro de un párrafo, como puede ser dentro de un breadcrumb o de una lista de enlaces o destacado). En el caso de tener que utilizar un enlace en un párrafo, se tendrá que recurrir a subrayar el enlace con la propiedad de texto (O sea, Cuerpo M Subrayado y Cuerpo S Subrayado) y aplicarle el color que corresponda. Vamos a tener que enfocarnos en documentar y explicar bien todo esto para no confundir a los diseñadores. Figma anunció en sus Release Notes que pronto se efectuará la personalización de subrayado.

[marusaad]

En base al release de Figma y la posibilidad de customizar los estilos de subrayado, actualizamos el componente de enlace standalone. Para el enlace inline creamos estilos de texto de "Enlace" para cuerpos y titulares.