Switch on/off
Closed this issue · 11 comments
Switch
Nombre en Obelisco
Switch
Tipo de componente
Molécula | Input
Referencias de Bootstrap
Switches
¿Qué tenemos en Obelisco actualmente?
Ficha en Estándares | UI Kit
Requerimientos: se necesita construir un nuevo componente en el sistema de diseño Obelisco: “Switch”
- Se requiere analizar el funcionamiento del componente.
- Se requiere determinar si el componente estará dentro de formularios o por fuera.
Se comienza el análisis del componente teniendo en cuenta el requerimiento solicitado por Subsidios.
Observamos el contexto de uso que se le va a dar al componente en uno de los flujos de navegación de bloqueos / habilitación de tarjetas de SADE. El mismo está por fuera de una tabla con información y, además, dentro de cada fila de la misma.
Por un lado, el que está por fuera de la tabla funciona como un switch principal, ya que su objetivo es activar o desactivar los switchs de las filas al mismo tiempo. Y por el otro, el grupo de switchs dentro de la tabla permiten que se aplique una acción a una fila puntual de la misma.
Esta tabla posee una columna llamada "Estado tarjeta" que posee dos estados: Bloqueado y Pendiente de bloqueo / Pendiente de habilitación, según la acción que se haya seleccionado en el campo "Filtrar acción" del formulario que se encuentra arriba de la tabla. Dichos estados están representados con el componente Etiqueta de Obelisco (https://gcba.github.io/Obelisco/?path=/story/componentes-etiqueta--multiple).
Se dejan imágenes de referencia del flujo de navegación de Subsidios:
Se analizaron ejemplos de switchs y el funcionamiento de los mismos en otros sistemas de diseño para contemplar las necesidades básicas del componente en relación a su contexto de uso y las necesidades que pueden surgir a futuro.
Sistemas de diseño consultados:
Carbon Design System: https://carbondesignsystem.com/
Spectrum: https://spectrum.adobe.com/
Ejemplos:
En base a este análisis se determinó que:
- Se avanza con la creación del componente.
- El caso de Subsidios requiere un análisis UX más detallado para poder determinar si necesitan utilizar un switch u otro componente.
- Los switchs no necesariamente deben estar dentro de Formularios.
Se creó un branch en el UI KIT para trabajar el componente:
https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/FjL7pjix93AIzizJwoLIPa/UI-KIT---Obelisco?type=design&node-id=7928-12542&t=kLhhDoXnY7rElN4b-0
¿En qué trabajamos?
- Se determinaron 3 estados para el componente: predeterminado, en foco y deshabilitado.
- No se consideró el estado “sólo lectura”, ya que el estado deshabilitado cumple las mismas funciones.
- Se determinó que en esta primera versión del componente el diseño visual del estado en foco seguirá el mismo criterio que los demás componentes. (Se adjunta propuesta de otro diseño del estado para tenerlo en cuenta a futuro).
- Se determinaron 2 tipos de switch: con label y sin label para que el componente pueda ser utilizado en contextos de uso diferentes.
- Se determinó que el label del componente quedará de forma predeterminada en el lado derecho del mismo y en la ficha se explicará el caso opuesto.
- Se determinó que el componente tendrá como color predeterminado el celeste y el color gris para casos en los que el switch no deba tener demasiado énfasis.
- Se determinó una variable para los estados de interacción del componente: prendido / apagado.
Propuesta de diseño para el estado "en foco":
La Ficha de Switch se estará trabajando en el siguiente Link: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/Az3gH6dM7HtnAeLpQYCaaS/Fichas?type=design&t=Cf9o7y8dKTn2OeKv-0
Se solicita revisión de @camilagaldo respecto al componente.
Se modificó un detalle de la disposición de los switch en un apartado de la ficha, dejo la captura.
Sugiero que revisemos nuevamente el "Prendido" y "Apagado" como label del switch, ya que entiendo que puede ser redundante
📝 En el día de hoy con @JuaneRambosio estuvimos trabajando en la ficha de Switch, y nos dimos cuenta de que faltaba una nueva variable y en función de eso la ficha tuvo que cambiar nuevamente.
Componente V2. Switch
-
Añadimos una nueva versión “Sin label” y “Tamaños”. Ya que cuando poníamos la opción “Sin label” nos cambiaba a la versión “chica”.
-
También renombramos los colores, ya que decía “Celeste” y “Gris” prestando a confusión. En este caso los cambiamos a la nomenclatura similar a botones “Primario” y “Secundario”, ya que el cambio cromático se relaciona con la jerarquía.
Ficha V2. Switch
Volvimos a renombrar y reestructurar toda la ficha en función de los cambios del componente Switch
¡Hola! 🔮
Dejamos un update sobre el componente a partir de la revisión de tipografía con la escala actualizada.
¿Qué hicimos?
- Actualizamos la plantilla del componente en la librería del UI kit.
- Actualizamos los estilos tipográficos del componente.
- Actualizamos la nomenclatura de las diferentes propiedades del componente.
¿Cómo se ve la página del componente en el UI kit?
📢 Nuevo requerimiento
Issues relacionados
Qué
Actualizar el componente según el nuevo estilo de grillas de la v.2 de Obelisco.
Por qué
Para estandarizar tamaños, modulación y visualizaciones de todos los componentes.
Quién lo va a trabajar
Diseñadores
Quién lo va a revisar
PM + SGOs
Criterios de aceptación
- El componente se ajusta a la grilla 4px.
- El componente tiene una medida definida para mobile, tablet y desktop.
- El componente tiene una modulación definida para mobile, tablet y desktop.
- El componente tiene su handoff para desarrollo y está marcado como ready for dev.
- El componente está documentado.
🕰️ Changelog
| CHANGELOG | Descripción |
|---|---|
| Agregado | |
| Arreglado | |
| Eliminado | |
| Obsoleto | |
| Cambiado |
✏️ Notas
- Este componente no tuvo cambios durante la migración.