AvisosAlea Pro

ChangedByBanner

Un aviso de que otra persona cambió lo que estás viendo ("Ana modificó esto hace 3 minutos"), con tus propias acciones después, como Revisar cambios y Mantener lo mío.

import { Button } from '@alea-design/ui';
import { ChangedByBanner } from '@alea-design/pro';

Ejemplos

Cambiado por alguien

La frase, la hora y tus propias acciones. Un estado cortés: los lectores de pantalla lo dicen al aparecer.

Expediente 1042

Tres personas trabajan en el mismo expediente: quién está aquí, quién edita qué y un aviso cuando alguien lo cambia.

Props

`ChangedByBanner` props

"Ana modificó esto hace 3 minutos", con tus acciones después. Un estado cortés: el lector de pantalla lo dice al aparecer. Construido sobre Banner.

Prop	Tipo	Por defecto	Descripción
`people`obligatoria	`PresencePerson[]`		Quién lo cambió. Vacío oculta el aviso.
`actions`	`ReactNode`	ninguno	Los botones después del mensaje: Revisar cambios, Mantener lo mío.
`at`	`TimeInput`	ninguno	Cuándo, como fecha o marca de tiempo: se muestra como "hace 3 minutos" con la hora exacta en el título.
`className`	`string`	ninguno	Clases extra para el elemento raíz.
`onDismiss`	`(() => void)`	ninguno	Muestra un botón de cerrar.
`tone`	`"neutral" \| "warning" \| "info"`	`"info"`	info (por defecto) o warning, para un cambio que toca lo que la persona está haciendo.
`when`	`ReactNode`	ninguno	O la hora ya redactada ("mientras no estabas"), cuando no tienes una fecha.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: toneneutralwarninginfo
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-changed-by.alea-changed-by-icon

Es un estado cortés: el lector de pantalla dice la frase cuando aparece y no interrumpe lo que la persona está haciendo.
La hora es un elemento time con la fecha y hora exactas en su título; el texto relativo sigue el idioma.
Los botones son tuyos: ponles nombres que digan lo que hacen y deja la opción segura (Mantener lo mío) tan fácil de alcanzar como la otra.

Teclado

Tecla	Acción
`Tab`	Llega a las acciones y al botón de cerrar

Qué hacer y qué evitar

Hacer

Muéstralo donde la persona está mirando, encima del contenido que cambió.
Combínalo con ReviewChanges: una acción abre la revisión.
Pasa at cuando lo sepas; pasa when para decirlo a tu manera ("mientras no estabas").

Evitar

No apliques el cambio antes de que la persona elija: el aviso informa, no decide.
No apiles un aviso por cada cambio: pasa a todas las personas que lo cambiaron.

En Figma

Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.

`Changed by banner` · 3 variantes

Propiedad de Figma	Tipo	Valores	Por defecto	Prop de React
Tone	Variant	Info, Warning, Neutral	`Info`	`tone`
Message	Text	-	`Ana changed this 3 minutes ago`	`people`, `at`, `when`
Actions	Boolean	-	`true`	`actions`
Dismissible	Boolean	-	`false`	`onDismiss`