Record Diff
Field-level before and after, for audit entries, settings history and revisions.
- Data
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add record-diffNo npm packages are needed beyond what Dowel already requires.
import { RecordDiff } from "@/components/ui/record-diff";Default
All Fields
Added And Removed
Redacted Secrets
Audit Entry
No Changes
Value Formatting
Custom Formatter
<RecordDiff>
| Prop | Type | Default |
|---|---|---|
after (required) | Record<string, unknown> | — |
before (required) | Record<string, unknown> | — |
collapseUnchangedHides unchanged fields behind a toggle. | boolean | true |
fieldsOnly these keys, in this order. Anything else is ignored. | string[] | — |
formatValue | (value: unknown, key: string) => string | defaultFormatValue |
labelsOverrides the humanised key. | Record<string, string> | — |
redactKeys to render as redacted. Defaults to common secret-shaped names. | RegExp | DEFAULT_REDACT |
children | React.ReactNode | — |
Plus every attribute of <div> except children.
<RecordDiffSummary>
Plus every attribute of <p>.
<RecordDiffTable>
| Prop | Type | Default |
|---|---|---|
collapseUnchanged | boolean | true |
Plus every attribute of <table>.
A real table, not a grid of divs. Each field name is a th with scope="row", so a value is announced with the field it belongs to rather than as a loose cell. The kind of change is never carried by row colour alone — every row states added, removed or changed in text for screen readers, satisfying WCAG 1.4.1. The unchanged-field toggle is a real button with aria-expanded. Redacted values never reach the DOM at all.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes