La versión 1.71.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Podréis consultarlos desde el Storybook del SAS.

CHANGELOG

Release 1.71.0 – Sistema de Diseño & Catálogo de Componentes STIC

📅 Fecha: 16 de junio de 2025

Sistema de Diseño

• ¡Nuevo componente disponible! — Segmented control v1.5.1

  El nuevo componente Segmented Control ya está disponible en la guía de estilo diseñística. Permite a los usuarios escoger una única opción dentro de un conjunto, similar a un grupo de botones segmentados.

  🗂️ Uso recomendado

  • Ideal para elegir entre opciones estrechamente relacionadas (por ejemplo, cambiar vistas o filtros) system.design.orange.com+7developer.apple.com+7neo4j.design+7base.uber.com+2zeroheight.com+2base.uber.com+2reddit.com.

  • Reemplaza eficazmente elementos como radios o menús desplegables cuando se necesita selección rápida en el lugar .

  ✅ Mejores prácticas

  • Utilizar solo texto o iconos, no una mezcla, para mayor claridad neo4j.design.

  • Asegurarse de que todos los segmentos tengan contenido de tamaño similar base.uber.com+2neo4j.design+2reddit.com+2.

  • No emplear para navegación de alto nivel; su propósito es segmentar vistas dentro de una misma jerarquía de contenido reddit.com+1neo4j.design+1.

  🎨 Consideraciones de diseño

  • Debe tener buen contraste visual y no basarse solo en el color para indicar el estado activo, especialmente si hay solo dos opciones zeroheight.com+3reddit.com+3developer.apple.com+3.

  • Puede presentarse con estilos inspirados en las guías de Apple o adaptarse a otros sistemas de diseño según el branding.

  🛠️ Integración y recursos

  • La documentación incluye: ejemplos de uso, casos de filtro o cambio de vista, pautas de accesibilidad y componentes compatibles (texto/icono).

  • Facilita consistencia visual, usabilidad avanzada y ahorro de tiempo en implementación.

  ---

  Más información y ejemplos de uso disponibles en el Sistema de diseño.

Catálogo de componentes

✨ Novedades

🔧 Nuevos componentes y especializaciones

Se suman al catálogo dos nuevas variantes del componente stic-notification para mejorar la comunicación en tus interfaces:

• 📢 stic-notification-v2-alert
  Ideal para mostrar mensajes importantes y urgentes.

• 📣 stic-notification-v2-banner
  Perfecto para comunicar información destacada a lo largo de la pantalla.

🔗 Más info en la documentación del componente stic-notification

✍️ Mejoras en componentes existentes

• @sas/wc-stic-filter-chip-text
  Ahora incluye:

  • pattern: permite definir un patrón de validación para el texto.

  • validityStateMessage: mensaje personalizado al fallar la validación.

• @sas/wc-stic-filter-chip-set
  El modelo SticFilterChipSetTextType también incorpora:

  • pattern

  • validityMessage

🐞 Correcciones

• @sas/wc-stic-filter-chip-text
  ✅ Se corrigió el comportamiento del input al hacer clic en “Aplicar” si:

  • El campo ya tenía un valor predefinido.

  • El valor no fue modificado.

• @sas/wc-stic-input-v2-date & @sas/wc-stic-input-v2-time
  🧼 Se ajustó el estilo para evitar inconsistencias visuales cuando el campo no tiene label.