← All proposals

Suggestion Card

A card for use inside an agent `ChatMessage`:

Net-new componentOpen in Storybook

proposals/SuggestionCard/custom.md30 lines · View on GitHub

Custom and net-new: SuggestionCard

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-suggestion-card — An agent's proposed changes in chat, built on Panel, with before/after change rows.
    • Parts and modifiers: .pds-suggestion-card--choice (the multiple choice type), .pds-suggestion-card--dismissed, .pds-suggestion-card__actions, .pds-suggestion-card__actions-end, .pds-suggestion-card__body, .pds-suggestion-card__changes, .pds-suggestion-card__choices, .pds-suggestion-card__section, .pds-suggestion-card__section--footer, .pds-suggestion-card__section--header, .pds-suggestion-card__description, .pds-suggestion-card__footer, .pds-suggestion-card__footer--empty, .pds-suggestion-card__heading, .pds-suggestion-card__result, .pds-suggestion-card__result-icon, .pds-suggestion-card__title
  • .pds-suggestion-change — One change in a suggestion: the field name over a Content Diff (the Content Diff proposal).
    • Parts and modifiers: .pds-suggestion-change__field
  • .pds-suggestion-choice — One row of a multiple choice card: a radio or checkbox with a label and optional description, in a PDS PanelRow.
    • Parts and modifiers: .pds-suggestion-choice__control, .pds-suggestion-choice__description, .pds-suggestion-choice__extra, .pds-suggestion-choice__label, .pds-suggestion-choice__name, .pds-suggestion-choice__text

Additions to existing PDS components

  • SuggestionChoice uses the package's .pds-radio-group__option class on its radio label, to borrow the PDS radio styling (the PDS RadioGroup cannot be one row), and the PDS Checkbox for checkbox rows.

Net-new props

All props of SuggestionCardProps, SuggestionChangeProps and SuggestionChoiceProps are new (including type: changes or choice) (net-new component).

Custom CSS variables

  • --suggestion-card-actions-gap — set on .pds-suggestion-card
  • --suggestion-card-gap — set on .pds-suggestion-card

Raw values kept on purpose

None.