PDS proposals
← All proposals

Code Diff

A Panel List of changed files.

Net-new componentOpen in Storybook

proposals/CodeDiff/decisions.md11 lines · View on GitHub

Decisions

  • Built from PDS, not copied. The package already exports PanelList, PanelRow, CodeBlock (with language='diff') and FileDiff, so CodeDiff composes them. The only new CSS is the file name (code font) and the stats width.
  • "Diff variant" of the Code Block is the existing language='diff'. No new Code Block variant. Check that the added, removed and hunk-header colors match the reference (the package colors them with its syntax tokens).
  • File Diff is optional (shown when both additions and deletions are given). The reference has none; it is there because the approval report row had it.
  • Open: initially expanded rows. The reference shows rows already expanded. The package Panel Row starts collapsed and has no prop to change that, so stories open collapsed. Needs a isDefaultExpanded on Panel Row (a change to the PDS component, not this one).
  • Open: file icon. fileDiff is a guess from the reference.
  • Local stand-ins: mergeClasses, and the local Icon wrapper. Everything else comes from the package.
  • Storybook: Proposals/Code Diff, tagged new-pattern.
  • Compact rows. The Panel List's paddingSize only sets block padding (2xs to l). The rows are also held open by a 48px minimum height and 20px side padding in the Panel Row that no prop changes, so CodeDiff overrides those in its own CSS (--pds-spacing-2xl minimum height, --pds-spacing-s side padding) and defaults paddingSize to 2xs. Rows go from about 73px to 48px. Open: a Panel Row/List size prop would remove the override.