Description list
Record details with responsive labels, copy actions, and protected edits.
Import from @commenda/pathfinder/description-list, and load the shared stylesheet once.
API reference
| Prop | Type | Behavior |
|---|---|---|
itemsRequired | readonly DescriptionItem[] | Stable IDs, label, and ReactNode value |
layout | "inline"|"auto"|"stacked" | auto: stack below 480px of container width |
size | "default"|"compact" | Default 36px inline minimum; compact 28px |
emptyLabel | string | Not set; zero and false remain visible |
className | string | Root dl styling |
Each item supports localLabel, help text, leadingIcon, copyConfig: { text, onCopy?, onError? }, and editConfig. Editable items use { kind: 'editable', onEdit }; protected items use { kind: 'locked', reason, onRequestChange }. The application opens its editor or change-request flow. Copy text is explicit, including when the displayed value is a badge or link.
Copy and edit
Copy success appears only after the clipboard write succeeds. Failed writes announce an error. Actions appear on hover, keyboard focus, and touch without moving content. Protected fields remain readable and request a change rather than opening an inline editor.
Compact panels
Use a Card with padding="none" for section framing. DescriptionList supplies its own 8px inset. Section titles and section-level Edit actions belong to Card. Read the record component rules.
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Source rules
| Rule | Contract and provenance |
|---|---|
| DESCRIPTION-001 | Figma 967:9 / 969:377: 8px list inset, 2px row gaps, 200px inline label column; stack below 480px container width. Default/compact row heights are minimums, allowing wrapping. |
| DESCRIPTION-002 | Native dl/dt/dd; zero/false are values. Actions reserve space and appear on focus/touch as well as hover. |
| DESCRIPTION-003 | Copy explicit text, announce real success/failure. Locked edit requests a change; apps own editor surfaces. |
Recorded design decisions
Description row source/provenance, sensitive-value reveal, and edit-history explorations are not combined into the initial approved row interface. Consumers can compose record value content; future named behavior needs a chosen design contract.