Circle + Label component

[yceballost]

Ya son varios productos los que usan este tipo de construcciones, Circle with icon + Label

Creéis que tiene sentido que exista un componente en Mística que traiga ya esta estructura?

[yceballost]

Hemos identificado dos usos diferentes aunque visualmente sea muy parecido a este componente

Uso 1: Navegación

Te navegan a otro nivel de navegación

Uso 2: Como selector

Sería un comportamiento gemelo al de las tabs actuales

[lauraocana]

Y quizás ampliar la definición para que además pueda contener imagen?

[yceballost]

Actualmente el componente <Circle> de web admite imagen, así que esto sería posible. Lo que no es posible actualmente es lo que plantea Vivo/Solar porque el componente <Circle> no tiene la capacidad de tener borde.

[aweell]

Veo dos casos diferentes aquí entre el borde que vemos para navegación en el ejemplo de vivo y ese "outline azul con offset" que presenta @lauraocana, podría verse el segundo como un estado? Indica que hay contenido nuevo en la página a la que navega ese elemento?

[lauraocana]

Hola @aweell, olvidamos el caso del "outline azul con offset" Es un caso que se realizó para un aspiracional y representaba como un storie de Instagram (de momento no vamos a desarrollar esa funcionalidad). Bien visto, muchas gracias! ;)

[yceballost]

Hay cierta relación entre esta discussion y esta otra → #489 (comment)

[aweell]

Aquí diferenciaría que es un asset wrapper y que es un componente interactivo quizás mediante el uso del color? Aplicando la misma lógica que se sigue actualmente en el resto de botones.

[Sólo como idea]

Asset wrapper -->

Intentando reforzar la idea de que no es un elemento interactivo en oposición a:

Icon button + label? -->

Reutilizando la misma lógica de estilos que presentan las diferentes variantes del botón

Contemplando el caso que vemos al inicio de la discussion como un button secondary:

[yceballost]

interesante el planteamiento!

la única duda es si el icono del assetWrapper debería ser brand, se acerca peligrosamente a un iconButtonSecondary (por llamarle de alguna manera)

[aweell]

Es justo el miedo que tengo yo también, por eso la frase de:

"Intentando reforzar la idea de que no es un elemento interactivo en oposición a"

Quizás aquí ese borde definido en neutral puede jugar un poco el papel de que no es un elemento interactivo, me preocupa también la diferenciación entre el botón link y el asset sin ese border

[yceballost]

deberíamos tener la posibilidad de que el asset + label pueda ir sin circle? entendiendo asset + label como la composición de asset + label. Actualmente el iconButton es un container que añade interacción a aquello que wrappeé

He quitado lo de iconButton porque creo que sigue siendo necesario tener la posibilidad de tener un contenedor que pueda hacer algo interactivo como en el caso de querer meter un icono con interacción dentro de una row

[yceballost]

Teniendo esta posible evolución, debería admitir el componente <Circle> una prop que sea "border"?

Esa propiedad border te pone ya lo estilos por defecto? o lo dejamos libre para que puedas ponerle el color al borde que quieras?

Creo que esa prop debería ponerte el border con 1px solid colors.border y el backgroundContainer en lugar de dar la posibilidad a pasarle el color que quieras.

Pero... debatamos :D

[aweell]

Another discussion: #1554 was created regarding the needs of this particular topic.

We had an internal discussion to try to solve the different use cases in the most standard way possible. The following aspects I'm going to cover in this comment are a proposal open to discussion and not the definition of how the component will be included in the system.

Anatomy

The icon button could display the following items:

• Label: there are some cases the label is not neccessary. The label will be centered in the y-axis with the icon.
• Circle: the circle can be visible or not.

The question related to if the circle should allow image or not can be solved right now using a smallNakedCard

See example ->

The possibility of centering the text in a smallNakedCard when the media is circular is a topic for a different discussion.

Size

The icon button can follow the same approach the current button variants have: small / default

• The small variant can follow the current definition of the cards top actions: 48px tapable area, 32px circle area, 20px icon size
• The default variant circle area / tapable area could be within the range of 40 to 56px (to be determined), 24px icon size.

The icon size of 16px we believe that answers a problem in certain icons (play or pause), we already modify the size (to 12px) when the media is a video in the top actions. And a broader analysis should be made in order to decide if these icons (or any other) should be modified to work correctly in a size of 20px.

Color

Our initial idea is to forbid the possibility to customize color.

In order to solve the different cases presented, the component itself can ve inverse/ default, at the same time, depending of the background, it can change also to display both label / icon with the highest contrast possible.

The initial possibilities could be:

• Default context: default / inverse
• Inverse context: default / inverse
• Alternative context: default / inverse

See example ->

An open question is if the color of the icon can be customizable or not.

Not allowing the customization of the colors will facilitate the definition of the different states the icon should have when interacting.

[aweell]

Recent conversations about this topic have brought more options:

Have two components, the Icon button, that follows the same variants the current button has and uses the same border radius definition in each brand. The other component is a tile? (provisional name) a component similar to the naked small card /snapCard with few elements.

The reasons behind this are:

• The circle should allow an asset, the previous definition was only focused in having icons
• We consider that the icon button should follow the same border-radius definition the button has
• The usage of a label is conflicting with the idea of an icon button. In which cases you need to use a label that cannot be solved with a regular button.
• The purpose of this circle + label component in most of the cases is act as an entrypoint rather than performing an action.

[aweell]

From #1649 opened by @MontseTelefonica

Para la new new app de Movistsar, debemos disponibilizar en el CMS un nuevo tipo de lista de entrypoint con aspecto de iconos circulares con titulo y descripción y que debe poder adaptarse a tener 1 o n elementos y funcionar bien sobre los posibles colores de fondo.
Actualmente se usa un componente que existe en desarrollo y que tiene un aspecto similar pero que es un bastardo creado de forma atómica.

Necesitamos este componente para la new new app de Movistar, lo que lo hace bastante urgente.

¿Es posible que Mistica absorba esta necesidad o debemos optar por un extended?

[sandrafernandezsimon]

buenas! necesitamos tener cuanto antes una respuesta a esto, se trata de una necesidad para New new app en la tab de gestiones. Gracias si podéis revisarlo cuanto antes os agradezco.

[aweell]

Muy buenas @sandrafernandezsimon y @MontseTelefonica,

Aunque es algo que tenemos en el radar no está planeado dentro de las tareas a abordar a corto plazo. El mejor camino aquí para no comprometer tiempos es el componente extended.