FeedbackAlea Pro

ChangedByBanner

A notice that someone else changed what you are looking at ("Ana changed this 3 minutes ago"), with your own actions after it, such as Review changes and Keep mine.

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

Examples

Changed by someone

The sentence, the time and your own actions. A polite status: screen readers say it when it appears.

Case 1042

Three people work on the same case: who is here, who is editing what, and a banner when someone changes it.

Props

`ChangedByBanner` props

"Ana changed this 3 minutes ago", with your actions after it. A polite status, so a screen reader says it when it appears. Built on Banner.

Prop	Type	Default	Description
`people`required	`PresencePerson[]`		Who changed it. Empty hides the banner.
`actions`	`ReactNode`	none	The buttons after the message: Review changes, Keep mine.
`at`	`TimeInput`	none	When, as a date or a timestamp: shown as "3 minutes ago" with the exact time in a tooltip title.
`className`	`string`	none	Extra class names for the root element.
`onDismiss`	`(() => void)`	none	Shows a close button.
`tone`	`"neutral" \| "warning" \| "info"`	`"info"`	info (default) or warning, for a change that touches what the person is doing.
`when`	`ReactNode`	none	Or the time already worded ("while you were away"), when you do not have a date.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Variants: toneneutralwarninginfo
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-changed-by.alea-changed-by-icon

It is a polite status, so a screen reader says the sentence when it appears and does not interrupt what the person is doing.
The time is a time element with the exact date and hour in its title; the relative text follows the language.
The buttons are yours: give them names that say what they do, and keep the safe one (Keep mine) as easy to reach as the other.

Keyboard

Key	Does
`Tab`	Reaches the actions and the close button

Do and don't

Show it where the person is looking, above the content that changed.
Pair it with ReviewChanges: one action opens the review.
Pass at when you know it; pass when to say it your own way ("while you were away").

Don't

Don't apply the change before the person has chosen: the banner informs, it does not decide.
Don't stack one banner per change: pass all the people who changed it.

In Figma

The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.

`Changed by banner` · 3 variants

Figma property	Kind	Values	Default	React prop
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`