PDS proposals
← All proposals

Content Diff

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.

Net-new componentOpen in Storybook

proposals/ContentDiff/context.md22 lines · View on GitHub

Content Diff

Status: built 2026-10-21, ready for dev 2026-10-21 (HANDOFF.md).

Problem

The designer wants the before and after of a piece of content (text an agent proposes to change) as its own component. It started as the body of the Suggestion Card's SuggestionChange and is useful on its own, for example in an approval report or a message.

Proposal

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. Props: before, after, and beforeLabel / afterLabel (screen-reader names, required so they can be translated).

The Suggestion Card's SuggestionChange composes it (the field name above a Content Diff).

Out of scope for now

Highlighting the changed words inside a line, a side-by-side layout, and diffs of code (the Code diff recipe).

Source

The designer's screenshot of the stacked before and after in the Suggestion Card (2026-10-21). No Figma or Jira.