La versión 1.72.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

🎉 ¡Lanzamiento v1.72.0 del Sistema de Diseño STIC!

📅 Publicado el 23 de junio de 2025

Prepárate para una versión con mejoras clave, nuevas propiedades y correcciones que afinan aún más la experiencia con nuestros componentes. Aquí te contamos todo lo nuevo:

Catálogo de componentes

✨ Nuevas funcionalidades

🔹 @sas/wc-stic-button-set
    ➕ Se ha añadido la propiedad title para mejorar la accesibilidad y ofrecer más contexto al usuario.

🔹 @sas/wc-stic-filters y @sas/wc-stic-filters-area
    ➕ Ahora incluyen la propiedad id para una gestión más precisa y personalizada de los filtros.

🛠️ Correcciones importantes

🔧 @sas/wc-stic-button y @sas/wc-stic-button-v2
    ✔ Se solucionaron errores en el comportamiento de la propiedad title.

🔧 @sas/wc-stic-input-v2-date
    ✔ Corregido el comportamiento de las propiedades min, max y value en la carga inicial.
    ✔ Mejorada la validación cuando se selecciona una fecha y el campo es required.

🔧 @sas/wc-stic-filters y @sas/wc-stic-filters-area
    ✔ Se arregló el tratamiento de los filtros visibles no obligatorios con valor al salir del componente.

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.

La versión 1.70.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.70.0 – Sistema de Diseño & Catálogo de Componentes STIC

📅 09 de junio de 2025

Sistema de Diseño

• 🪟 ¡Nuevo componente disponible! — Modal v1.5.1

  Ya está disponible el componente Modal en su versión 1.5.1, una ventana superpuesta que interrumpe el flujo de la interfaz para mostrar contenido relevante y captar toda la atención del usuario.

  Este componente está diseñado para bloquear la interacción con el contenido subyacente y exigir una acción o confirmación antes de continuar. Es ideal para mensajes importantes, decisiones críticas, formularios breves o flujos de pasos guiados.

  ✅ ¿Cuándo usarlo?

  • Cuando hay riesgo de pérdida de información

  • Para validar acciones que modifican el estado actual

  • Si se necesita una respuesta inmediata o binaria

  🚫 ¿Cuándo evitarlo?

  • Para acciones triviales o reversibles

  • Cuando la decisión puede resolverse sin interrumpir el flujo

  • Si no hay consecuencias claras tras la acción

  ---

  🧩 Tipos de Modal incluidos

  Tipo	Descripción breve
  Confirmación	Solicita una decisión inmediata con consecuencias visibles (“¿Guardar cambios?”).
  Advertencia	Requiere confirmación explícita para acciones críticas o destructivas (“¿Eliminar archivo?”).
  Pasiva	Muestra información relevante sin requerir respuesta (“Solicitud enviada”).
  Formulario	Permite completar tareas puntuales dentro de un formulario breve (“Editar contacto”).

  ---

  ⚠️ Importante

  La versión beta anterior del componente Modal quedará deprecada en la próxima versión 2.0.
  Te recomendamos migrar cuanto antes a esta nueva versión estable.

  ---

  📘 Más información y ejemplos de uso disponibles en la documentación oficial del Modal.

Catálogo de componentes

✨ Novedades

🧱 Nuevos componentes y especializaciones

• <stic-notification-v2>: Se lanza su nueva versión como parte de la evolución del componente.

• <stic-notification-v2-base>: ¡Nueva base para notificaciones!

🔧 Mejoras en componentes existentes

✅ <stic-select-v2> y <stic-select-multiple-v2>

• ➕ Nuevas propiedades:

  • isLoading

  • hasLoadingError

✅ <stic-filter-chip-select> y <stic-filter-chip-select-multiple>

• ➕ Nuevas propiedades:

  • isLoading

  • hasLoadingError

• 🔁 Nuevos eventos:

  • sticFilterChipSelect:reloadFilters

  • sticFilterChipSelectMultiple:reloadFilters
    (Se disparan al pulsar “Refrescar” con hasLoadingError activado)

✅ <stic-filter-chip-set>

• 🧩 Los modelos SticFilterChipSetSelectType y SticFilterChipSetSelectMultipleType ahora incluyen:

  • isLoading

  • hasLoadingError

🔄 Cambios en el comportamiento

📄 <stic-sheet>

• Modo carga (isLoading) muestra skeletons en todo su contenido.

📊 <stic-table>

• Modo carga (isLoading) muestra skeletons en cada celda de contenido.

🐞 Correcciones

🎨 Tema <stic-theme>

• Compatibilidad ajustada a los nuevos tokens v1.5.1.6 del Sistema de Diseño.

⚠️ Deprecados

🗑️ <stic-notification>

• El componente clásico queda obsoleto.
  🔁 Reemplázalo por <stic-notification-v2>.

La versión 1.69.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

🚀 ¡Nueva versión 1.69.0 disponible!

📅 Fecha: 2 de junio de 2025

¡Ya está disponible la versión 1.69.0 del Sistema de Diseño y el Catálogo de Componentes STIC!
Esta versión llega con nuevos componentes, mejoras importantes y correcciones clave que refuerzan la experiencia de desarrollo y diseño.

Catálogo de componentes

🆕 Nuevos componentes y especializaciones

• <stic-uploader>
  Nuevo componente para subir archivos con distintas modalidades:

  • 📂 <stic-uploader-drag-drop>: permite arrastrar y soltar archivos fácilmente.

✨ Mejoras en componentes existentes

• @sas/stic-button-set
  ➕ Nueva propiedad: isLoading
  Muestra el estado de carga del grupo de botones.

• @sas/stic-sheet
  ➕ Nueva propiedad: isLoading
  Controla el estado de carga del botón primario en el pie del componente.

🔄 Cambios visuales

• Se reemplaza el componente de carga <stic-circular-progress> por el nuevo <stic-progress-indicator-circle> en:
  @sas/stic-button, @sas/stic-button-v2, @sas/stic-fab-button, @sas/stic-infinity-scroll, @sas/stic-table.

• También se actualiza <stic-linear-progress> por <stic-progress-indicator-bar> en:
  @sas/stic-infinity-scroll-more-button, @sas/stic-pagination.

🛠️ Correcciones

• @sas/wc-stic-input-v2
  🐞 Solucionado el comportamiento inesperado al no definir la propiedad value.

• @sas/wc-stic-filter-area
  ✅ Arreglos en:

  • Visibilidad de filtros obligatorios al eliminar su valor.

  • Borrado correcto del filtro filter-chip-select-multiple dentro de filtros obligatorios.

🧯 Componente obsoleto (Deprecado)

• @sas/wc-stic-file-upload
  ⚠️ Este componente ha sido depreciado.
  Se recomienda usar en su lugar:

  • <stic-uploader-button>

  • <stic-uploader-drag-drop>