Replies: 3 comments
-
|
Gracias por abrir una component request! 👏 🙌 Aunque el callout promo está en la librería de Mística de Figma, lo metimos a modo de test para ver si realmente tenía uso; en desarrollo dijimos de NO meterlo de momento hasta que saliera algún uso. [Spoiler] Aún nadie ha necesitado este componente en versión promo. [/Spoiler] Nosotros pasamos ya por esta petición cuando planteamos el de promo, pensamos igual que lo que planteas y nos hicimos la pregunta de... "realmente no es suficiente el callout actual como para destacar más algo?" En ese momento creímos que con el callout neutro y usando los iconos con colores podría ser suficiente para jugar con los diferentes estados. El objetivo del callout es destacar contenido, y siendo el único componente que tiene el fondo gris creemos que lo consigue.
Otro problema que nos encontrábamos eran las acciones, el que planteas guay, porque al no llevar acción queda estupendamente, pero.. y cuándo lleva? qué hacemos con los botones?
Creo que aquí es donde empiezan los problemas, demasiado color junto parece una feria 😂 En nuestra opinión creemos que sería abusar del color para algo que realmente creemos que funciona bien con la primera imagen que adjunto y queda más elegante, dicho esto, si tenéis algún tipo de información/estudio/post de internet que ayude a aclarar que lo que proponéis va a funcionar mejor que con lo que existe, no dudes en pasarla que será muy útil! También si tenéis algún flujo donde se vea más claramente la necesidad de diferenciar de esta manera estaría bien que lo adjuntaras para tener más contexto de la necesidad. En cuanto a accesibilidad, poner textos con color siempre va a ayudar a dificultar la accesibilidad, tienes que llevarte los colores a tonos muy oscuros y en los casos de los naranjas se empiezan a estropear😖. Te paso por aquí la accesibilidad de la combinación de colores que tenemos en Mística para las tags que es lo que has usado para tu ejemplo. A priori, la mayoría pasa la AA. Hasta aquí en términos de diseño visual. A nivel técnico de desarrollo y diseño para nosotros evolucionar hacia lo que propones no supondría ningún problema porque ya tenemos constantes creadas para esa solución y lo único sería definir otros tipo de estados para este componente. Ojo! esto no es un NO, simplemente es debate sobre la evolución 🙂 Nos gusta que existe este debate a la hora de evolucionar las cosas. |
Beta Was this translation helpful? Give feedback.
-
|
Muchas gracias por tener en cuenta nuestros comentarios, así como haber realizado el análisis sobre este asunto que os planteábamos. Entendemos perfectamente el conflicto visual que podría producir usar backgrounds en distintos colores cuando los callouts cuando tengan botones. Por lo tanto, seguimos las instrucciones que nos habéis dado para su uso. Saludos, |
Beta Was this translation helpful? Give feedback.
-
|
Hola @Lu1sma, Reabro esta issue ya que estamos valorando añadir por defecto dentro de una prop https://brandfactory.telefonica.com/document/1846#/components/callouts de manera que cada vez que se quiera utilizar uno de estos tipos no sea necesario hacer un replace del icono y un cambio de color. No se corresponde exactamente con la petición inicial, pero creemos que es un improvement en la designer experience. |
Beta Was this translation helpful? Give feedback.
-
Context
El contexto es la renovación de la App de O2 a través de los componentes de Mística como eje principal de dicha actualización.
Have you read the Contributing Guidelines on Mística?
When will I receive a reply?
We usually review component request Tuesdays at 16:00 (CEST), after the meeting, we will reply in this component request.
Is your component request related to a problem? Please describe.
Usando el componente "Callouts" de Mística observamos que podría ser conveniente incorporar variantes de estados para cubrir casos de uso en los que aplique este componente. Por ejemplo, para dar mensajes de tipo informativo, de alerta u otros. Actualmente, el componente contempla una casuística de tipo promocional y para el resto de casos de uso se utiliza un background neutro y muy genérico (Backgrond gris) que representa al resto de tipologías de mensaje.
Describe the solution you'd like and needs
Consideramos que podemos dar más empaque visual a las tipologías de callouts modificando el color de la tipografía y el fondo del container. De este modo, se entenderá mejor los distintos tipos de mensajes que podamos incorporar a nuestros diseños.
Describe alternatives you've considered
Por otro lado, animamos a revisar la parte de accesibilidad al incorporar dicha actualización.
Additional context
Add any other context or screenshots about the feature request here.
Beta Was this translation helpful? Give feedback.
All reactions