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/custom.md25 lines · View on GitHub

Custom and net-new: ContentDiff

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

  • .pds-content-diff — a before and after of a piece of content, stacked like a text diff.
    • Parts and modifiers: .pds-content-diff__line, .pds-content-diff__line--after, .pds-content-diff__line--before, .pds-content-diff__marker, .pds-content-diff__text

Additions to existing PDS components

None.

Net-new props

All props of ContentDiffProps are new (net-new component).

Custom CSS variables

None.

Raw values kept on purpose

None.