Formularios

[marusaad]

Formularios

Nombre en Obelisco Formularios

Tipo de componente Molécula

Ejemplo en Bootstrap Forms | Input Group

Ejemplos de aplicación en BA Ayuda escolar | Formulario de contacto | Formulario de consultas | Datos de contacto | Inscripción BA te acompaña | Acogimiento familiar transitorio | Inscripción escolar 2024

Requerimientos

• Revisar el componente y sus variantes
• Chequear accesibilidad
• Tener en cuenta las posibilidades en Drupal y Angular
• Construir lineamientos para el agrupamiento y uso de los formularios
• Analizar posibilidad de construir patterns

[marusaad]

¡Hola! 🧙

Aprovechando las actualizaciones que se hicieron con el trabajo de la nueva guía tipográfica para Obelisco, también actualizamos la página de "Formularios" dentro del UI kit.

¿Qué hicimos?

Todos los formularios están basados en el componente base de “main_form”, a pesar de que había 2 componentes base más en la página: “Label” (la etiqueta de los forms) y un número para calendarios.
Dentro de la página no se utilizaban los otros dos componentes base, que ya no aparecen más, por lo que fueron eliminados. Dejamos el componente base de “main_form”, porque es un buen abordaje el tratarlo de esta forma.

• Actualizamos la plantilla de la página de "Formulario" dentro del UI kit.
• Actualizamos toda la iconografía cambiando los íconos-componente custom que estaban dentro de la page de iconografía por los de la librería de Material Design.
• Existían 2 campos de buscador, uno que no tenía estados ni propiedades, y otro que es el que quedó visible. Eliminamos el otro componente porque era redundante. En su momento hablamos sobre este buscador, sobre todo por tema del componente “Encabezado (header)".

Evolutivos

• Se debe analizar en profundidad esta page especialmente en términos constructivos, para mejorar la experiencia de consumo de los mismos.
• Revisar y empatar nomenclaturas del componente entre la web de Estándares, Storybook y el UI Kit.
• Añadir todos los estados a cada input y las propiedades faltantes.
• Empatar estados de el input de radio con la casilla de verificacación para que se comporten correctamente.
• Pensar este componete como patrón. Profundizar en usos y buenas prácticas en la ficha para estandarizar su uso.

¿Cómo se ve ahora la página en el UI kit?

[marusaad]

Evolutivos de agosto 2024 respecto a Formularios y en base a la migración a Bootstrap 5

• Es necesario analizar y disponibilizar una variante del input de buscador deshabilitado desde diseño ya que podría utilizarse en Backoffice
• Es necesario analizar si abrir las posibilidades a obelisco como sistema de código abierto para que se puedan swapear los íconos de mensajes semánticos que se dan en los campos de éxito y de error. Por ahora los dejamos para que sólo sean esos porque para la migración estamos incluyendo mejoras ágiles.
• Es necesario analizar si debería haber dos variantes de buscador en el UI Kit que respondan a las diferentes funcionalidades del mismo (ej. buscador con botón de redirección y buscador predictivo)

[marusaad]

De cara a la migración a Bootstrap 5 se realizaron mejoras ágiles sobre el componente de casilla de verificación (checkbox) con el objetivo de estandarizar su comportamiento con el botón de radio.

Para esto se creó el componente base .Checkbox a partir del cual se construye la molécula de casilla de verificación.

• Se incorporó el estado de Error
• Se incorporaron íconos de Material Design (antes contaba con íconos custom como SVGs)
• Se eliminó el gap de 4px entre el contenedor que engloba al input y la etiqueta para mejorar ópticamente los espaciados
• El input tiene un padding de 8px en todos los lados

Evolutivos y puntos de dolor

• Analizar la accesibilidad del componente especialmente en el tamaño de los inputs.
• Analizar la creación de un organismo de lista para utilizar en formularios con un placeholder, texto de asistencia/validación y lista de opción de selección múltiple como se muestra en Storybook
• Actualizar especificaciones en la ficha y usos
• Especificar que para los casos en los que se precise una casilla al final de un formulario (por ejemplo aceptar términos y condiciones), se permita que la etiqueta tenga un ancho máximo mayor. Esto se puede tomar cuando se vean los formularios como patrones o se realice un template de formularios.
• Analizar si es necesaria una variante con fondo como se muestra actualmente en Storybook (no la tenemos en el UI Kit)

[Diehault]

📢 Nuevo requerimiento

Issues relacionados

311

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

• [x] El componente se ajusta a la grilla 4px.
• [x] El componente tiene una medida definida para mobile, tablet y desktop.
• [x] El componente tiene una modulación definida para mobile, tablet y desktop.
• [x] El componente tiene su handoff para desarrollo y está marcado como ready for dev.
• [x] El componente está documentado.

🕰️ Changelog

CHANGELOG	Descripción
Agregado	Sumamos una variante tablet con 336px width de los siguientes campos de formulario: campo de texto simple, campo de selector, campo de fecha, campo numérico, campo de búsqueda, campo de área de texto.
Arreglado	Cambiamos el width del campo numérico en desktop a 158px, para que coincidiera con la grilla.
Eliminado
Obsoleto
Cambiado	Cambió a 348px el width de los siguientes campos de formulario en su versión desktop: campo de texto simple, campo de selector, campo de fecha, campo de búsqueda, campo de área de texto. El width del campo numérico en mobile pasó a 156px, coincidiendo con la grilla.