Before and After Summary on Save

ProNew

Pressing Save on a form with changes opens a short list of what will change (field, old value, new value) with Confirm and Back; unchanged forms say there is nothing to save. Use this when changes are sensitive or hard to reverse (permissions, pricing, legal names).

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A save changes something that affects other people or money and a mistake is costly.

Do not use it when: Do not add a confirmation to every save; people learn to click through it.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`Record<string, string>`	The saved values (`plan`, `price`, `seats`).
`onSave`	`(values) => void \| Promise<void>`	Called on Confirm.

listChanges(fields, before, after) is exported.

Accessibility

The summary is a real table with a caption, column headers and a header cell per row, in a dialog titled with the number of changes. Focus moves into the dialog and returns to Save when it closes.
The old value is struck through and the new one is bold, but both are also in separate cells with headers (Before, After), so the difference is not only typographic.
Nothing to save is a status message; the primary action in the dialog says what it does ("Confirm and save").

Testing

The pattern ships with a Testing Library test (changes-summary-before-save.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A save changes something that affects other people or money and a mistake is costly.

Do not use it when: Do not add a confirmation to every save; people learn to click through it.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`Record<string, string>`	The saved values (`plan`, `price`, `seats`).
`onSave`	`(values) => void \| Promise<void>`	Called on Confirm.

listChanges(fields, before, after) is exported.

Accessibility

The summary is a real table with a caption, column headers and a header cell per row, in a dialog titled with the number of changes. Focus moves into the dialog and returns to Save when it closes.
The old value is struck through and the new one is bold, but both are also in separate cells with headers (Before, After), so the difference is not only typographic.
Nothing to save is a status message; the primary action in the dialog says what it does ("Confirm and save").

Testing

The pattern ships with a Testing Library test (changes-summary-before-save.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.