[Task](ui): create DescriptionList with child components #1172
Description
Create DescriptionList Component With Child Components
Overview
Problem Statement
We currently do not have a standardized component/pattern to consistently display terms and descriptions, such as metadata, etc.
Goal
Have a consistent component in place that is to be used for displaying information metadata keys and values and similarly structured data, providing document semantics identical to the html dl element.
Context
Ongoing development and enhancement of our Design System, ongoing application support.
Details
Implementation
Implement DescriptionList, DescriptionTerm, and DescriptionDefinition component that render html <dl>, <dt>, and <dd>elements. We should alias these as DL, DT, and DD accordingly, in order to provide a shorter way to write React code and allow for making shorter, better readable code, but exporting these components under their respective shortcut name, too.
When checking for types of children and deciding/implementing on layout, we should keep in mind it is possible and valid according to spec (MDN) to do the following:
- use multiple
ddelements perdt - wrap groups of a single
dtwith one or multipleddelements in adiv
(Future) There does not need to be a perfectly working implementation for layouting these with this first implementation, however we should be aware in order to prepare for this. Grid layout seems to be the best contender.
DescriptionList
Renders a html <dl> element.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
children |
React nodes DescriptionTerm, DescriptionDefinition, div |
null |
allow for passign div as well as html allows grouping dt and dl elements in a dl using a div. When aliasing to shorter DT and DD component names, add these as well(?) |
alignTerms |
["left", "right"] |
"right" |
Use CSS/classes to avoid having to create a context to store purely stylistic information? |
className |
string |
"" |
DescriptionTerm
Renders a html <dt> element.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
children |
React node | null | |
className |
string |
"" |
DescriptionDefinition
Renders a html <dd> element.
| Prop | Type | Default | Notes |
|---|---|---|---|
children |
React node | null | |
className |
string |
"" |
Design Tokens
| Property | @theme-Variable |
Per-Mode Variable | Dark Mode | Light Mode | Notes |
|---|---|---|---|---|---|
| description term background color | -- | --color-dt-background |
--color-bg-lvl-0 |
--color-bg-lvl-1 |
|
| description term color | -- | --color-dt-text |
--color-text-high |
--color-text-high |
|
| description definition background color | -- | --color-dd-background |
--color-transparent |
--color-transparent |
|
| description definition color | -- | --color-dd-text |
--color-text-high |
--color-text-high |
|
| "row" bottom border | Update:--border-color-theme-default |
--color-dd-dt-border |
--color-border-default (maps to --color-juno-grey-light-7) |
--color-border-default (maps to --color-juno-grey-blue-3) |
Update: --border-color-theme-default already exists, and maps to a variable called --color-default-border that does not seem to exist. We need to map to a new variable --color-border-default that should reference the colors as specified here. Also see #1237 . |
Figma
Estimation
Acceptance Criteria
QA
Additional Information
Update: Here's an impression about what DescriptionList is going to be used for typically:
Additional Links
Metadata
Metadata
Assignees
Type
Projects
Status