diff --git a/src/pages/components/contained-list/images/contained-list-non-interactive-icons-style.png b/src/pages/components/contained-list/images/contained-list-non-interactive-icons-style.png new file mode 100644 index 00000000000..4b183efc3f7 Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-non-interactive-icons-style.png differ diff --git a/src/pages/components/contained-list/images/contained-list-non-interactive-icons-usage.png b/src/pages/components/contained-list/images/contained-list-non-interactive-icons-usage.png new file mode 100644 index 00000000000..9d51fa40131 Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-non-interactive-icons-usage.png differ diff --git a/src/pages/components/contained-list/images/contained-list-search-style.png b/src/pages/components/contained-list/images/contained-list-search-style.png new file mode 100644 index 00000000000..eaa93aedd9c Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-search-style.png differ diff --git a/src/pages/components/contained-list/images/contained-list-style-8.png b/src/pages/components/contained-list/images/contained-list-style-8.png index 83bb92de7f2..74a01c03e2c 100644 Binary files a/src/pages/components/contained-list/images/contained-list-style-8.png and b/src/pages/components/contained-list/images/contained-list-style-8.png differ diff --git a/src/pages/components/contained-list/images/contained-list-usage-15.png b/src/pages/components/contained-list/images/contained-list-usage-15.png index e04709c7f22..10743e1f3cd 100644 Binary files a/src/pages/components/contained-list/images/contained-list-usage-15.png and b/src/pages/components/contained-list/images/contained-list-usage-15.png differ diff --git a/src/pages/components/contained-list/images/contained-list-usage-2.png b/src/pages/components/contained-list/images/contained-list-usage-2.png index 5db20317681..c36ed950b56 100644 Binary files a/src/pages/components/contained-list/images/contained-list-usage-2.png and b/src/pages/components/contained-list/images/contained-list-usage-2.png differ diff --git a/src/pages/components/contained-list/style.mdx b/src/pages/components/contained-list/style.mdx index 2b90bc78bbc..58c67d7d8be 100644 --- a/src/pages/components/contained-list/style.mdx +++ b/src/pages/components/contained-list/style.mdx @@ -103,14 +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` | -| Icon (optional) | height, width | 16 / 1 | — | +| 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` |
@@ -171,6 +176,30 @@ in a phrase and any proper nouns capitalized. Structure and spacing measurements for inline actions. | px / rem +
+ +
+ +![Structure and spacing measurements for non-interactive icons.](images/contained-list-decorative-icons-style.png) + +
+ + + Structure and spacing measurements for non-interactive icons. | px / rem + + +
+ +
+ +![Structure and spacing measurements for search and filtering.](images/contained-list-search-style.png) + +
+ + + Structure and spacing measurements for search and filtering. | px / rem + + ## Size ### On-page list diff --git a/src/pages/components/contained-list/usage.mdx b/src/pages/components/contained-list/usage.mdx index 2bf8c8c2446..6625578fcfc 100644 --- a/src/pages/components/contained-list/usage.mdx +++ b/src/pages/components/contained-list/usage.mdx @@ -124,10 +124,15 @@ and optional interactive elements. 1. **List header area:** Area to group the succeeding list items. -2. **List title:** Descriptive name for the group of list items. -3. **List item:** The content with in a list item row. -4. **Interactive element** (optional): An interactive element in the header or - row such as a button, link, icon, or toggle. +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. **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, tag, or toggle. ### Alignment @@ -334,6 +339,22 @@ multiple column headers, we recommend using a data table instead. +### Non-interactive icons + +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. + + + + +![Contained list non-interactive icons](images/contained-list-non-interactive-icons-usage.png) + + + + ### Search and filtering Contained lists can include a search or filter functionality. The search or