Skip to content

Commit

Permalink
update name
Browse files Browse the repository at this point in the history
  • Loading branch information
laurenmrice committed Jan 14, 2025
1 parent e53b77c commit dd5e07f
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 23 deletions.
30 changes: 15 additions & 15 deletions src/pages/components/contained-list/style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -103,19 +103,19 @@ in a phrase and any proper nouns capitalized.

## Structure

| Element | Property | px / rem | Spacing token |
| ----------------------------- | --------------------------- | -------- | ------------- |
| List header area: on-page | height | 32 / 2 | `$spacing-07` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| List header area: disclosed | height | 48 / 3 | `$spacing-09` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| List item | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Decorative icon (optional) | height, width | 16px ||
| | padding left, padding-right | 16 / 1 | `$spacing-05` |
| Inline action icon (optional) | height, width | 16px ||
| | padding left, padding-right | 16 / 1 | `$spacing-05` |
| Search icon (optional) | height, width | 16px ||
| | padding left, padding-right | 16 / 1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| ------------------------------- | --------------------------- | -------- | ------------- |
| List header area: on-page | height | 32 / 2 | `$spacing-07` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| List header area: disclosed | height | 48 / 3 | `$spacing-09` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| List item | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Non-interactive icon (optional) | height, width | 16px ||
| | padding left, padding-right | 16 / 1 | `$spacing-05` |
| Inline action icon (optional) | height, width | 16px ||
| | padding left, padding-right | 16 / 1 | `$spacing-05` |
| Search icon (optional) | height, width | 16px ||
| | padding left, padding-right | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand Down Expand Up @@ -180,12 +180,12 @@ in a phrase and any proper nouns capitalized.

<div className="image--fixed">

![Structure and spacing measurements for decorative icons.](images/contained-list-decorative-icons-style.png)
![Structure and spacing measurements for non-interactive icons.](images/contained-list-decorative-icons-style.png)

</div>

<Caption>
Structure and spacing measurements for decorative icons. | px / rem
Structure and spacing measurements for non-interactive icons. | px / rem
</Caption>

<br />
Expand Down
16 changes: 8 additions & 8 deletions src/pages/components/contained-list/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -127,12 +127,12 @@ and optional interactive elements.
2. **List item area:** Area to group text and elements in a list row.
3. **List title:** Descriptive name for the group of list items.
4. **List item:** The content in a list item row.
5. **Decorative icon (optional):** A non-interactive icon to help visually
5. **Non-interactive icon (optional):** A decorative icon to help visually
describe a list item.
6. **Search icon (optional):** An icon to represent search or filtering
functionality in the contained list.
7. **Interactive element** (optional): An interactive element in the header or
row such as a button, link, icon, or toggle.
row such as a button, link, icon, tag, or toggle.

### Alignment

Expand Down Expand Up @@ -339,18 +339,18 @@ multiple column headers, we recommend using a data table instead.
</Column>
</Row>

### Decorative icons
### Non-interactive icons

Contained lists can have decorative icons positioned before the text in each row
to help visually describe the list item, category, or status. These icons are
non-interactive elements and are used for visual purposes only. Icons should
typically be the same color as the text in the row unless they are status
Contained lists can have non-interactive icons positioned before the text in
each row to help visually describe the list item, category, or status. These
icons are decorative elements and are used for visual purposes only. Icons
should typically be the same color as the text in the row unless they are status
indicators.

<Row>
<Column colLg={8}>

![Contained list decorative icons](images/contained-list-decorative-icons-usage.png)
![Contained list non-interactive icons](images/contained-list-non-interactive-icons-usage.png)

</Column>
</Row>
Expand Down

0 comments on commit dd5e07f

Please sign in to comment.