diff --git a/src/pages/components/structured-list/images/structured-list-style-1.png b/src/pages/components/structured-list/images/structured-list-style-1.png index ef598405456..0853c41fe25 100644 Binary files a/src/pages/components/structured-list/images/structured-list-style-1.png and b/src/pages/components/structured-list/images/structured-list-style-1.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-2.png b/src/pages/components/structured-list/images/structured-list-style-2.png index 3e8b768af3f..97e42aca2d6 100644 Binary files a/src/pages/components/structured-list/images/structured-list-style-2.png and b/src/pages/components/structured-list/images/structured-list-style-2.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-3.png b/src/pages/components/structured-list/images/structured-list-style-3.png new file mode 100644 index 00000000000..a933b9708f4 Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-style-3.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-1.png b/src/pages/components/structured-list/images/structured-list-usage-1.png new file mode 100644 index 00000000000..5b999706b87 Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-usage-1.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-2.png b/src/pages/components/structured-list/images/structured-list-usage-2.png index c0a3a384d9f..50850a46033 100644 Binary files a/src/pages/components/structured-list/images/structured-list-usage-2.png and b/src/pages/components/structured-list/images/structured-list-usage-2.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-3.png b/src/pages/components/structured-list/images/structured-list-usage-3.png new file mode 100644 index 00000000000..a94ef8faf2f Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-usage-3.png differ diff --git a/src/pages/components/structured-list/style.mdx b/src/pages/components/structured-list/style.mdx index 1e9fcc99d98..dba1832d3dc 100644 --- a/src/pages/components/structured-list/style.mdx +++ b/src/pages/components/structured-list/style.mdx @@ -55,7 +55,9 @@ in sentence case. All typography is left aligned. -Spacing and measurements for structured list | px / rem + + The width of structured list varies based on content and layout. +
@@ -64,5 +66,17 @@ in sentence case. All typography is left aligned.
- Spacing and measurements for structured list with selection | px / rem + Spacing and measurements for default spacing with hang alignment and flush + alignment| px / rem + + +
+ +![Spacing and measurements for structured list with selection](images/structured-list-style-3.png) + +
+ + + Spacing and measurements for condensed spacing with hang alignment and flush + alignment | px / rem diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx index 435ddf8941a..88ad616421e 100755 --- a/src/pages/components/structured-list/usage.mdx +++ b/src/pages/components/structured-list/usage.mdx @@ -15,12 +15,46 @@ definitions. +Overview +Live demo +Formatting Content -Interactions +Related Feedback +## Overview + +Structured list displays a simple list with a considerable amount of items of +read-only values. It helps organize and present grouped information into logical +and scannable patterns. The content within a list can be stacked to create +hierarchy within the data. + +#### When to use + +- To browse information or select certain information within the group in the + simplest form +- To view description and detailed information, present features, or compare + pricing plans + +#### When not to use + +Nesting items is not recommended, as structured lists are used to present simple +data. If you have more than 25 items or additional content that needs to be +shown, consider using a +[data table](https://www.carbondesignsystem.com/components/data-table/usage/), +which supports nesting items and presents a larger set of content. + +### Variants + +| Variant | Purpose | +| ------------ | ----------------------------------------------------------------------------- | +| _Default_ | Allows the user to quickly browse and view information within a group of data | +| _Selectable_ | Allows the user to mark or select a desired option within a group of data | + +## Live demo + import { CheckmarkFilled16 } from '@carbon/icons-react'; + scope={{ CheckmarkFilled16 }} +> {` + 'Web Components': + 'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default', + }} + >{` {` + 'Web Components': + 'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default', + }} + >{` -## Content +## Formatting + +### Anatomy + +Structured list is composed of two sections—column header and data row. + + + + +![Structured list anatomy](images/structured-list-usage-1.png) + + + + +1. **Column header**: Shows titles for the row header description. +2. **Data row**: Shows different types of data. Rows can be selectable and + modified to show alternating zebra stripe background colors -- Row height varies based on content and can expand to fit multiple lines. -- In a single list, all rows do not have to be the same height. -- Column widths can either be equally proportional or proportioned based on - content. -- If a list extends past 25 items, consider using a - [data table](/components/data-table/usage) to present this larger set of - content. -- A maximum of one paragraph of text is recommended per row. -- Nesting items is not recommended, as structured lists are used to present - simple data. If you have additional content that needs to be shown, consider - using a [data table](/components/data-table/usage), which supports nesting - items. +### Sizing + +The structured list is available in two different sizes in height: default and +condensed. The structure list's width varies based on content and layout. -![Structured list to present definitions.](images/structured-list-usage-2.png) +![data table anatomy](images/structured-list-usage-2.png) -## Interactions +### Alignment + +The structured list is available in two alignment styles: hang and flush +alignment. + + + -Structured lists can be single-select if a user is choosing between a set of -options. +![data table anatomy](images/structured-list-usage-3.png) -#### Guidelines: + + + +## Content + +- A maximum of three paragraphs of text is recommended per row. +- A structured list’s title and row information should use sentence-case + capitalization. + +#### Column header titles + +- Column header titles should be short and clear, sticking to one or two words + that describe the data in that column. +- In cases where a column header title is too long, wrap the text to two lines + and then truncate the rest of the text. The full text should be shown in a + tooltip on hover. +- Column header titles should use sentence-case capitalization. + +## Interactions + +#### Selectable structured list - Only one item can be selected from the list. - By default, one option should be selected. @@ -236,6 +306,14 @@ options. - When the user selects an item from the list, the selected row will appear with the `checkmark--filled` icon. +## Related + +These following components are additional ways to organize a group of data. + +- [Accordion](https://www.carbondesignsystem.com/components/accordion/usage/) +- [Data table](https://www.carbondesignsystem.com/components/data-table/usage/) +- [List](https://www.carbondesignsystem.com/components/list/usage/) + ## Feedback Help us improve this component by providing feedback, asking questions, and