Ver documentación de la tag
Contexto del producto
Front office es un software de gestión B2B del entorno de logística. Posee densas tablas, muchos módulos, submódulos y diversos clientes que lo utilizan.
La solicitud
Un programador de front viene a preguntarme acerca de una solicitud que han recibido por parte de proyectos. En esta solicitud se pedía que en una tabla de pedidos, en la columna de subestados, se añadieran tags de múltiples colores. Hasta ese momento, había sido texto plano. La solicitud tenía adjuntada una imagen de una tabla generada con IA.
¿Cuáles eran los problemas que planteaba esta imagen?
- Los colores eran muy variados y no tenían un significado concreto. Verdes azulados, azul oscuro, berenjena…
- El día de mañana podrían incorporarse nuevos subestados, y querrían colores aplicados para estos nuevos casos.
- Los colores sugeridos no existían en el componente ni en el sistema.
Front sugirió dos opciones:
Nuevas variantes de color
Supondría hacer muchos y se perdería la lógica de uso del componente.
Propiedad de customColor
Permitiría usar cualquier color saltándose los tokens, sin garantía de contraste y sin control desde diseño.
Ninguna de las dos resolvía el problema. Que la tabla iba a llevar tags no estaba en discusión; el reto era cómo aplicarlas para que el componente siguiera teniendo sentido y cada subestado nuevo no trajera un color nuevo.
Cómo está pensada la tag
La tag siempre se ha usado como una señal para ensalzar información o para comunicar estado. No tiene estados de hover o pressed porque no es un elemento interactivo.
Principales características:
- 5 estados semánticos que utilizan el color para transmitir siempre el mismo significado: info, success, warning, error y neutral.
- El icono se puede ocultar ya que sirve para reforzar el significado en caso de que fuera necesario.
- Con 2 tamaños: uno small para tablas con muchos datos y otro default para vistas de detalle.
- Componente tokenizado para facilitar la integración en front end.
- Contraste garantizado y modo oscuro incorporado.
Añadir colores sin un significado rompe el uso que se le ha dado al componente.
La solución
Tras pensarlo, decidí que ese componente debía permanecer tal cual. La solución pasó por asignar a cada subastado, un color según lo que significa para el usuario. ¿Va todo bien? Success. ¿Hay un error? Error. ¿Requiere atención pero no es crítico? Warning. ¿Es meramente informativo? Info.
De esta manera, la escalabilidad está asegurada. Cuando se creen nuevos subestados, sólo hay que decidir el estado. Sin inventar nada.
Esto también supuso un alivio para los programadores ya que se evitó tener que tocar el componente cumpliendo así el pedido de manera efectiva.