Alineación del button group en cards

[JoseTelefonica]

Goal

Poder tener la opción de alinear los botones que aparecen en el button gruop al centro, en vez de a la izquierda como aparece ahora por defecto.

Context

Necesitamos para Alemania buscar una solución para aumentar la venta de packs asociados a consumos que tengan más del 80%. Para ello, queremos incluir un CTA en la card del consumo con esta casuística para incentivar al usuario a la compra del pack.

Visualmente, el velocho tiene una alineación al centro y al añadir los botones alineados a la izquierda, visualmente queda descentrado el contenido.

Impact

Añadir una propiedad para modifical la alineación del button group.

Discussion Questions

• ¿Se puede añadir esta propiedad para cubrir este caso de Alemania?

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/design/EqWUjrLq7xwz9ywsuUKrcQ/%5BMeinO2%5D-Usage-Monitor---Upselling-button-Q1-2025-PRODUCTDSN-2928?node-id=203-25326&t=pAzuY1CnzZII6xl6-4

[aweell]

Buenas @JoseTelefonica

Evaluando esta necesidad vemos que es un caso específico que responde al alineamiento que viene definido en el contenido del slot.

Si fuera necesario, en este caso, los botones pueden incluirse en el slot y alinearlos de la manera que se crea conveniente. Vemos que esta solución podría adoptarse para conseguir el resultado deseado sin ninguna modificación en las propiedades actuales del buttonLayout y por extensión, la dataCard.

Este caso no ha aparecido como necesidad desde otro producto lo que nos empuja a que la solución ad hoc sería los mas optimo en la actualidad.

En algún momento se ha planteado la opción de alinear los elementos de las cards de una manera diferente a la actual (bandera izquierda). Sin embargo este alineamiento impactaría en todos los elementos de la card, no únicamente en los botones, por lo que no cubriría esta necesidad concreta entiendo.

[wyunreal]

Hola, como ya se ha decidido en discusiones anteriores, consideramos desde ingeniería una mala práctica el simular campos que ya están en la datacard, o cualquier otro componente de mística, mediante el slot: quiero decir, si la card ya tiene botones, por el hecho de necesitar una ligera variación (centrados en este caso), no deberíamos NO usar los botones que puede renderizar la datacard para entonces construir esos botones con átomos en el slot. Esto presenta problemas de mantenimiento cuando evolucionéis la datacard (cambiáis algún aspecto de los botones y este caso de uso se queda desfasado y requiere que los equipos de producto realicen cambios de forma sincronizada para no romper.

Esta discusión ya tiene precedentes en los que no se ha visto correcto el uso del slot para simular campos que ya tiene la datacard, por ejemplo, la description de la datacard se ha querido modificar ligeramente mediante el slot y se ha decidido que no es un uso correcto del slot.

Cómo lo veis ?

[aweell]

Hola @wyunreal,

Estamos de acuerdo con que cuando existe un elemento en un componente es preferible utilizar ese elemento.

Aquí nos encontramos con que la configuración por defecto no encaja con lo que quiere hacerse desde diseño y que no tiene sentido por el momento cambiar el comportamiento del button group dentro de las cards ya que es un caso muy especifico y no existe o ha existido otra petición desde otro producto que justifique este cambio.

Por otro lado, un detalle importante a tener en cuenta es que precisamente el contenido del slot de la card y su naturaleza centrada el que empuja esta necesidad, si no existiera ese contenido en el slot, o fuera otro como en el resto de casos que se han presentado hasta el día de hoy, la alineación actual de los botones es altamente probable que no generara un conflicto.

Creemos que es importante también sopesar que aunque se tracen lineas que nos ayuden a saber que es lo mas correcto, utilizar un recurso como el slot para saltarse las normas que pone el sistema no debería ser lo habitual, pero tampoco debería prohibirse si el fin justifica los medios.

Vemos 3 posibles soluciones:

• Se incluyen los botones dentro del slot y se alinean como se considere asumiendo este compromiso (siendo este caso aislado y discutible si core del producto)
• Se utiliza la alineación que el componente de Mística provee actualmente
• Se crea un componente extended que si se ajuste a las necesidades propuestas

[wyunreal]

Estoy en desacuerdo fuerte con esto:
Creemos que es importante también sopesar que aunque se tracen lineas que nos ayuden a saber que es lo mas correcto, utilizar un recurso como el slot para saltarse las normas que pone el sistema no debería ser lo habitual, pero tampoco debería prohibirse si el fin justifica los medios.

Yo creo sinceramente que NO deberíamos saltarnos nuestro propio design system usando el slot. Por las razones ya enumeradas por mi anteriormente. Yo entiendo que esta todo dicho y solo me da curiosidad por saber lo que pensáis de este cambio: Veis como correcto lo que se desea hacer ? No me refiero a la solución técnica. me refiero a la solución de diseño: Tener ese slot centrado con los botones centrados debajo ?

Si la respuesta es SÍ, entonces no entiendo por que no se incluye en Mística una prop que alinee los elementos de la card cuando sea relevante. Mis argumentos siguen siendo válidos, sobre todo los relativos a añadir modos de funcionamiento que cuando mística decida evolucionar, NO serán tenidos en cuenta y como los tests no fallarán, quedarán rotos en PROD: me refiero a cambiar estilos de los botones dentro de la datacard y que de pronto este caso quede con estilos antiguos por estar simulando unos botones dentro del slot.

En resumen, no veo en la discusión argumentos de peso que me hagan cambiar de opinión.

Saludos

Wiljan.