iconWrapper en Figma

[yceballost]

Abro un debate para pensar sobre este componente que existe unicamente en diseño, Figma.

Contexto

Es un componente que se hizo en Figma para facilitar y estandarizar el uso de tamaños de los iconos y uso de circle/no circle en los componentes de la librería de diseño de Figma.

En desarrollo no existe este componente, en desarrollo es todo más flexible y puedes poner un icono al tamaño que se considere.

---

Otros temas a valorar

O2 España ve útil tener la posibilidad de mostrar el badge en el iconWrapper de Figma.

Preguntas

• Es bueno que exista el iconWrapper cuando es algo que se usa muchísimo pero en desarrollo no existe? Tendría sentido tener un approach más cercano a dev?
• Podría sustituir esto al Badge over icon? Quizás no, sigue siendo un recurso que puede ser util tener para algún caso.

[yceballost]

#520

[aweell]

Tiene sentido abstraer el componente iconWrapper a un elemento que se parezca mas al circle (se me ocurre assetWrapper como nombre) y que una de sus props sea un boleean para añadir el badge? Permitiría no sólo que se utilice el badge sobre un icono, sino también sobre imagen.

[yceballost]

en qué casos usarías un badge sobre una imagen? se me hace un poco raro

[yceballost]

Colores por defecto de un icono

Hemos estado discutiendo @HectorSancho y yo sobre definir mejor el uso de circle vs no circle.

Pruebas → https://www.figma.com/file/qSXO0JbY40ZmadALB5ndXn/Soporte?node-id=2265%3A31565

El uso del circulo debería estar definido para casos muy concreto, casos claros:

1. Una lista nunca debería usar un circle con icono
2. Una lista tendría sentido que llevase circulo en casos donde dentro de una misma lista se puedan mezclar imágenes e iconos
   
3. El icono por defecto de una lista siempre iría en neutralHigh
4. Hay casos concretos que por fuerza mayor de UX si tiene sentido que el icono de una lista lleve asociado un color en el icono
   

Hay varias posibilidades para definir el estilo de cómo deberían ir los iconos dentro de un circulo

Caso 1: brand + inverse (Actual)

Encontramos problemas de sobrecarga visual cuando se usan iconos con fondo de marca, además de acercarse demasiado al estilo de elementos interactivos como los botones

Caso 2: brandLow + brand (El camino que estaba marcándose)

Encontramos posibles problemas de convivencia entre este elemento y otros como las tags.

Realmente es un problema?

Caso 3: border + backgroundContainer

Este funciona bastante bien porque es más agnóstico de elementos interactivos como el Caso 1 o elementos informativos como las tags del Caso 2.

Anticipamos un posible choque con los iconButtons que se tiene en la mirilla a integrar en los próximos meses y que hay una discussion abierto aquí → #563

---

Aunque el circle es un componente bastante abierto a que cada producto lo defina como quiera, estamos empezando a encontrar problemas de consistencia debido a esta flexibilidad, me pregunto si tendría sentido que Mística te diera una unica forma de tratar los iconos y quitar esa flexibilidad para evitar problemas de algo que no aporta una gran diferencia a los productos

[aweell]

Uno de los principales problemas que veo con el caso 2:

Token	Checked against	Values	Contrast	Text	Graphical objects
brand	brandLow	#019DF4 /#E6F5FD	2.64:1

Enlazo con #562, quizás pueda jugarse con la elección del color de background para generar diferenciación y mantener elemento en "alternative"?

[yceballost]

Es buen punto, hay que pensar que sea una solución transversal de la marca, probablemente O₂ no tenga este problema. Y quizás con las conversaciones sobre marca y el cambio de color de Movistar para que sea accesible podríamos solucionar el caso de Movistar. (que además, todo apunta a que el primary de Movistar dejará de ser ese azul y será el azul oscuro)

De todas formas, otra opción que me sale con tu comentario sería brandLow + brandDark

[yceballost]

Finalmente vamos a ir por la opción brandLow + brand. No sabemos si es la mejor de las opciones pero desde luego mejor que usar brand + inverse lo es.