A component, ContentDiff: the old value on a red line with a minus, the new value on a green line with a plus, in one bordered block, like a text diff.
proposals/ContentDiff/decisions.md19 lines · View on GitHub
Decisions: ContentDiff
A component of its own, taken from the Suggestion Change (2026-10-21)
Decision: the stacked before and after is ContentDiff, a component of its own. Its markup and CSS moved out of SuggestionChange (the classes __diff, __line, __marker and __text of .pds-suggestion-change became .pds-content-diff, __line, __marker and __text). SuggestionChange is now the field name above a ContentDiff, with the same props.
Why: the designer asked for a Content Diff component proposal, from the image of the stacked diff.
Port impact: one new component. Suggestion Card ports after it.
The design (kept from the Suggestion Change)
A stacked diff, not columns. It reads top to bottom, gives long text the full width, and matches the diff look used elsewhere. Before is on the critical status background and foreground with a minus icon; after is on the success background and foreground with a plus icon, at medium weight.
A definition list.dl with a visually hidden dt ("Before", "After") and a dd for each value. beforeLabel and afterLabel are required strings, so they are translatable.
The minus and plus icons are aria-hidden: the names come from the hidden dts.
Open questions
Highlight the changed words inside each line?
Should it take a visible title (the field name) itself, instead of the Suggestion Change putting one above it?