Enlaces
Closed this issue · 17 comments
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
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.
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".
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
@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.
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
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
👩🏻🔧 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.
- 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.
Lista la ficha de enlaces
@camilembo para revisión.
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).
Se agregó la variante para fondo oscuro en la documentación de la ficha
Se hizo merge el día 21/09/2023
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.
Gracias Die!
Se hizo merge con este ajuste el 29/09 :)
¡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?
📢 Nuevo requerimiento
Tickets relacionados
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
- El componente se ajusta a la grilla 4px. [no aplica para este componente]
-
El componente tiene una medida definida para mobile, tablet y desktop. [no aplica para este componente] -
El componente tiene una modulación definida para mobile, tablet y desktop. [no aplica para este componente] -
El componente tiene su handoff para desarrollo y está marcado como ready for dev. [no aplica para este componente] - El componente está documentado.
🕰️ Changelog
No se realizaron cambios en esta revisión.
✏️ Notas
No hay ninguna nota para mostrar.