Las variantes permiten que un componente adquiera una representación distinta en la pantalla. Estos cambios pueden alcanzar desde pequeños detalles, como el color de fondo, hasta cambios radicales, como cuando un pequeño botón se reemplaza por un formulario.
Las variantes se basan en la idea de variantes de Figma. De hecho, cuando se genera un componente a partir de un Component Set de Figma, las variables de generan automáticamente.
(acá va un componente con variantes, que está generando Luna)
Hay una difícil decisión de diseño que implica definir hasta dónde incluir variantes en un mismo componente y cuándo es mejor hacer componentes separados. Desde el punto de vista técnico y del desempeño de los componentes, no hay una diferencia sustantiva: cada opción tiene pros y contras. Desde el punto de vista de la implementación, dependerá de cada caso y el área de UX lo definirá en sintonía con la definición de los programadores de Front End.
A diferencia de los switches, que cambian un solo elemento y solamente los estilos de ese elemento, las variantes pueden llegar a cambiar la estructura completa del HTML de un componente, reemplazándola por una nueva, sin limitaciones de complejidad ni en la original ni en la sustituta.
El atributo variant
Las variantes se identifican por un número entero, siendo la 0 la variante por omisión (default) y la 1, 2, 3 etc. sin dejar ningún hueco, las versiones que tiene el componente.
Para cambiar la variante de un componente, alcanza con modificar el atributo variant en el tag del componente, asignando el número de variante que corresponda. Esto se puede hacer de forma declarativa, cuando se incluye el componente en el HTML de una página, o programática por JavaScript.
Inclusive cuando se inspecciona un componente, si se asigna un valor al atributo variant el componente cambiará a la variante indicada. En la fábrica de WCF si un componente tiene variantes, se muestra un combo que permite cambiar muy fácilmente las variantes al visualizarlo.
Si se asigna al atributo variant el valor de una variante que no existe, el componente no sufrirá ninguna modificación.
Variantes de variantes
Un componente con variantes puede tener subcomponentes con variantes en una cadena del la profundidad que se considere necesaria. Naturalmente, si la variante del componente madre oculta el componente hijo, ningún cambio que se realice en este tendrá efecto.
Los cambios en la variante de cualquier componente de la cadena, afectan exclusivamente a ese componente. No tiene ningún efecto hacia arriba, en la madre, abuela y otros ancestros del componente. Hacia abajo tampoco tiene consecuencia en las variantes, pero dependiendo del diseño, puede ser ocultado algún componente. Si se vuelve a realizar un cambio en los niveles superiores que hacen que este componente se muestre nuevamente, conservará la variante que tuvo al ocultarlo.
Se pueden modificar las variantes de los componentes mientras están ocultos. Un ejemplo de este comportamiento podría ser el siguiente: hay un componente madre en la variante 1, y un subcomponente hijo en la variante 2. Se cambia el componente madre a la variante 0, lo que oculta el subcomponente hijo. Mientras este subcomponente está oculto, se cambia a la variante 1. Al volver al componente madre a la variante 1, el subcomponente se desplegará en la variante 1, y no en la 2 en la que estaba cuando se ocultó.
Variantes por omisión
Los componentes generados por Web Component Factory tienen previsto que en su despliegue inicial cada subcomponente tenga asignado el atributo variant de acuerdo a compo fue especificado en la fuente a partir de la que se generó el componente (Figma, HTML o la que corresponda).
Esto hace que al cargar el componente por primera vez en la página, y sin necesidad de ninguna acción adicional, se vea exactamente igual al que le dio origen.
(acá va una imagen de Luna)
A partir del despliegue inicial, las modificaciones de variantes son independientes para cada componente y los valores por omisión dejan de tener efecto.
Variantes y switches
Las variantes naturalmente puede contener switches, y cada uno funciona de acuerdo a sus especificaciones, tal como es de esperar.
Lo que es relevante señalar es que si un switch está presente en más de una variante, al cambiar su valor, cambia en todas las variantes a la vez.
Leave a Reply