Alertas flotantes
Fuente y alcance
El proyecto ya incluye sileo@0.1.5, un <Toaster> en el layout y llamadas a src/lib/notify.ts. El SGD personaliza esa instalación; no necesita otra librería ni un segundo proveedor. La captura de renovación muestra el problema anterior: un error general dentro del cuerpo desplazaba el contador y añadía scroll. La posición, el estilo, la duración y los cuatro estados siguientes son reglas del SGD para resolverlo; la captura no especifica esos detalles.
Uso
import { notifyError, notifyErrorMessage, notifyInfo, notifySuccess, notifyWarning } from '@/lib/notify'
notifySuccess('Operación completada', 'Los cambios se guardaron correctamente.')
notifyErrorMessage('No se pudo renovar la sesión. Inténtalo de nuevo.', 'session-renewal-error')
notifyError(error, fallbackTitle) traduce BackendApiError a un mensaje legible sin exponer detalles internos. notifyErrorMessage acepta un mensaje controlado y una clave opcional para evitar copias de la misma alerta. dismissNotification(key) permite retirar una alerta al comenzar un nuevo intento, como hace el diálogo de sesión. Usar estas funciones para resultados generales, errores de operación y conexión. La validación que indica qué campo corregir permanece junto al campo, con su relación accesible.
Variantes y comportamiento
| Variante | Icono | Token de estado | Ejemplo |
|---|---|---|---|
| Éxito | check_circle | --success | Guardado completado |
| Error | error | --sgd-toast-error (deriva de --destructive en claro y tiene contraste propio en oscuro) | Renovación fallida |
| Advertencia | warning | --warning | Acción que requiere atención |
| Información | info | --info | Aviso general |
La superficie usa --card, el texto principal --card-foreground, el secundario --muted-foreground, el borde --border y una sombra discreta. Los tres temas y sus modos claro/oscuro solo cambian estos tokens; estructura y comportamiento son comunes. El icono y el texto identifican el estado sin depender solo del color.
El proveedor único SgdToastProvider está en src/components/sileo-toaster.tsx y se monta en src/app/layout.tsx. En escritorio sitúa la alerta arriba a la derecha; bajo 640 px, arriba y centrada. Éxito e información duran 5 segundos; advertencia, 8 segundos; los errores que requieren acción permanecen hasta cerrarlos o resolverlos. Las alertas con tiempo incorporan en la parte inferior una barra de progreso decreciente (2 px) fina, limpia, minimalista y moderna, con su pista sutil al 12 % y color semántico acorde al estado; disminuye uniformemente y se pausa al pasar el mouse o al enfocar la alerta con el teclado, reanudándose al salir o perder el foco. Todas tienen botón «Cerrar notificación». Sileo aporta un desvanecimiento suave al retirarla y elimina esa animación junto a la barra de progreso si el usuario prefiere reducir movimiento (prefers-reduced-motion). Las claves activas evitan acumular avisos idénticos.
El error de renovación de sesión permanece hasta cerrarlo, reintentar o cambiar el estado de sesión. Al iniciar un reintento se retira el aviso anterior; al confirmar la renovación el modal se cierra, y al expirar la sesión se descarta el error de renovación. Estos tiempos afectan solo a las alertas flotantes: el modal sigue abierto hasta una renovación confirmada o la transición a sesión expirada.
El cierre conserva un área de interacción de 40 × 40 px. La X visible mide 13 px y el fondo circular de hover 32 px; ambos comparten centro y no cambian el tamaño del control. El foco por teclado mantiene su anillo visible.
La X usa los tokens compartidos --sgd-close-icon y --sgd-close-icon-hover; el hover no la oscurece hasta foreground, para mantener la atención en el mensaje. Estos tokens se aplican también a los demás controles de cierre del SGD.
Cuando hay un diálogo Radix abierto, el proveedor mueve el mismo Toaster al diálogo activo. Visualmente la alerta queda sobre el fondo atenuado, fuera de la superficie; en el árbol accesible permanece dentro del foco modal. El mensaje se expone a lectores de pantalla mediante la región viva del proveedor, sin mover el foco. El botón de cierre se recorre con Tab y funciona con Enter o Espacio. El toast no forma parte de DialogBody ni del footer, por lo que no cambia la altura, la posición de las acciones o el scroll del contenido legítimamente largo. DialogBody conserva su desplazamiento normal.
La página /design-system/componentes incluye las cuatro variantes y una prueba con modal abierto. Al modificar los estilos, comprobar visualmente claro y oscuro en Theme LATAM, Theme Adobe Spectrum y Theme Institucional, además de foco, cierre, posición móvil y distribución del modal.