| 1 | ---
|
| 2 | title: Text List
|
| 3 | storybookPath: data-display-textlist--default
|
| 4 | isExperimentalPackage: false
|
| 5 | ---
|
| 6 |
|
| 7 | List semantics are handled automatically, including the use of ordered lists
|
| 8 | where appropriate.
|
| 9 |
|
| 10 | ```jsx live
|
| 11 | <Columns gap="large">
|
| 12 | <TextList>
|
| 13 | <Text>Bullet</Text>
|
| 14 | <Text>Bullet</Text>
|
| 15 | <Text>Bullet</Text>
|
| 16 | </TextList>
|
| 17 | <TextList type="number">
|
| 18 | <Text>Number</Text>
|
| 19 | <Text>Number</Text>
|
| 20 | <Text>Number</Text>
|
| 21 | </TextList>
|
| 22 | <TextList icon={<CheckCircleIcon size="xxsmall" />}>
|
| 23 | <Text>Icon</Text>
|
| 24 | <Text>Icon</Text>
|
| 25 | <Text>Icon</Text>
|
| 26 | </TextList>
|
| 27 | </Columns>
|
| 28 | ```
|
| 29 |
|
| 30 | ## Examples
|
| 31 |
|
| 32 | ### Color, size and gap
|
| 33 |
|
| 34 | Lists support the same sizes and colors as [Text](/package/text), and the same
|
| 35 | gap as [Stack](/package/stack).
|
| 36 |
|
| 37 | ```jsx live
|
| 38 | <Columns gap="large">
|
| 39 | <TextList tone="muted" size="large" gap="large">
|
| 40 | <Text>Large</Text>
|
| 41 | <Text>Large</Text>
|
| 42 | <Text>Large</Text>
|
| 43 | </TextList>
|
| 44 | <TextList tone="muted" size="standard" gap="medium">
|
| 45 | <Text>Standard</Text>
|
| 46 | <Text>Standard</Text>
|
| 47 | <Text>Standard</Text>
|
| 48 | </TextList>
|
| 49 | <TextList tone="muted" size="small" gap="small">
|
| 50 | <Text>Small</Text>
|
| 51 | <Text>Small</Text>
|
| 52 | <Text>Small</Text>
|
| 53 | </TextList>
|
| 54 | </Columns>
|
| 55 | ```
|
| 56 |
|
| 57 | ### Rich content
|
| 58 |
|
| 59 | Use the [Stack](/package/stack) as a list item to display multiple lines of
|
| 60 | text.
|
| 61 |
|
| 62 | ```jsx live
|
| 63 | <TextList gap="large">
|
| 64 | <Stack gap="medium">
|
| 65 | <Text weight="semibold">This is a paragraph.</Text>
|
| 66 | <Text>This is another paragraph.</Text>
|
| 67 | </Stack>
|
| 68 | <Stack gap="medium">
|
| 69 | <Text weight="semibold">This is a paragraph.</Text>
|
| 70 | <Text>This is another paragraph.</Text>
|
| 71 | </Stack>
|
| 72 | </TextList>
|
| 73 | ```
|
| 74 |
|
| 75 | ### Nested lists
|
| 76 |
|
| 77 | Lists of varying types can be nested within each other.
|
| 78 |
|
| 79 | ```jsx live
|
| 80 | <TextList gap="large" type="number">
|
| 81 | <Stack gap="medium">
|
| 82 | <Text>Number list</Text>
|
| 83 | <TextList>
|
| 84 | <Text>Bullet list</Text>
|
| 85 | <Text>Bullet list</Text>
|
| 86 | <Text>Bullet list</Text>
|
| 87 | </TextList>
|
| 88 | </Stack>
|
| 89 | <Stack gap="medium">
|
| 90 | <Text>Number list</Text>
|
| 91 | <TextList>
|
| 92 | <Text>Bullet list</Text>
|
| 93 | <Text>Bullet list</Text>
|
| 94 | <Text>Bullet list</Text>
|
| 95 | </TextList>
|
| 96 | </Stack>
|
| 97 | </TextList>
|
| 98 | ```
|
| 99 |
|
| 100 | ## Props
|
| 101 |
|
| 102 | <PropsTable displayName="TextList" />
|
| 103 |
|
| 104 | The `TextList` component also passes extra props into the component's nested
|
| 105 | [`Stack`](/package/stack) component.
|
| 106 |
|
| 107 | [data-attribute-map]:
|
| 108 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
| 109 | [stack-props]: /package/stack
|
| 110 | [text-props]: /package/text
|