v2.0.5

Text List

Stable

This component is considered stable. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/text-list

npm @spark-web/text-list

Source GitHub.com

Bundle unpkg.com

List semantics are handled automatically, including the use of ordered lists where appropriate.

Bullet
Bullet
Bullet

Number
Number
Number

Icon
Icon
Icon

Open in Playroom

<Columns gap="large">
  <TextList>
    <Text>Bullet</Text>
    <Text>Bullet</Text>
    <Text>Bullet</Text>
  </TextList>
  <TextList type="number">
    <Text>Number</Text>
    <Text>Number</Text>
    <Text>Number</Text>
  </TextList>
  <TextList icon={<CheckCircleIcon size="xxsmall" />}>
    <Text>Icon</Text>
    <Text>Icon</Text>
    <Text>Icon</Text>
  </TextList>
</Columns>

<Columns gap="large">
  <TextList>
    <Text>Bullet</Text>
    <Text>Bullet</Text>
    <Text>Bullet</Text>
  </TextList>
  <TextList type="number">
    <Text>Number</Text>
    <Text>Number</Text>
    <Text>Number</Text>
  </TextList>
  <TextList icon={<CheckCircleIcon size="xxsmall" />}>
    <Text>Icon</Text>
    <Text>Icon</Text>
    <Text>Icon</Text>
  </TextList>
</Columns>

Examples

Color, size and gap

Lists support the same sizes and colors as Text, and the same gap as Stack.

Large
Large
Large

Standard
Standard
Standard

Small
Small
Small

Open in Playroom

<Columns gap="large">
  <TextList tone="muted" size="large" gap="large">
    <Text>Large</Text>
    <Text>Large</Text>
    <Text>Large</Text>
  </TextList>
  <TextList tone="muted" size="standard" gap="medium">
    <Text>Standard</Text>
    <Text>Standard</Text>
    <Text>Standard</Text>
  </TextList>
  <TextList tone="muted" size="small" gap="small">
    <Text>Small</Text>
    <Text>Small</Text>
    <Text>Small</Text>
  </TextList>
</Columns>

<Columns gap="large">
  <TextList tone="muted" size="large" gap="large">
    <Text>Large</Text>
    <Text>Large</Text>
    <Text>Large</Text>
  </TextList>
  <TextList tone="muted" size="standard" gap="medium">
    <Text>Standard</Text>
    <Text>Standard</Text>
    <Text>Standard</Text>
  </TextList>
  <TextList tone="muted" size="small" gap="small">
    <Text>Small</Text>
    <Text>Small</Text>
    <Text>Small</Text>
  </TextList>
</Columns>

Rich content

Use the Stack as a list item to display multiple lines of text.

This is a paragraph.
This is another paragraph.
This is a paragraph.
This is another paragraph.

Open in Playroom

<TextList gap="large">
  <Stack gap="medium">
    <Text weight="semibold">This is a paragraph.</Text>
    <Text>This is another paragraph.</Text>
  </Stack>
  <Stack gap="medium">
    <Text weight="semibold">This is a paragraph.</Text>
    <Text>This is another paragraph.</Text>
  </Stack>
</TextList>

<TextList gap="large">
  <Stack gap="medium">
    <Text weight="semibold">This is a paragraph.</Text>
    <Text>This is another paragraph.</Text>
  </Stack>
  <Stack gap="medium">
    <Text weight="semibold">This is a paragraph.</Text>
    <Text>This is another paragraph.</Text>
  </Stack>
</TextList>

Nested lists

Lists of varying types can be nested within each other.

1.
Number list
- Bullet list
- Bullet list
- Bullet list
2.
Number list
- Bullet list
- Bullet list
- Bullet list

Open in Playroom

<TextList gap="large" type="number">
  <Stack gap="medium">
    <Text>Number list</Text>
    <TextList>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
    </TextList>
  </Stack>
  <Stack gap="medium">
    <Text>Number list</Text>
    <TextList>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
    </TextList>
  </Stack>
</TextList>

<TextList gap="large" type="number">
  <Stack gap="medium">
    <Text>Number list</Text>
    <TextList>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
    </TextList>
  </Stack>
  <Stack gap="medium">
    <Text>Number list</Text>
    <TextList>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
    </TextList>
  </Stack>
</TextList>

Props

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	The elements that represent each item in the list.
data?	DataAttributeMap	Sets data attributes for the element.
gap?	ResponsiveProp<"xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge">	The size of the gap between each item. Default: `"large"`
icon?	ReactElement<IconProps, string \| JSXElementConstructor<any>>	Provide an icon to be used as the "bullet" element.
size?	string \| number \| symbol	Default the size of child Text elements. Default: `"standard"`
tone?	"neutral" \| "muted" \| "link" \| "disabled" \| "fieldAccent" \| "placeholder" \| "accent" \| "primary" \| "primaryHover" \| "primaryActive" \| "secondary" \| "secondaryHover" \| "secondaryActive" \| "caution" \| "critical" \| "info" \| "positive"	Default the tone of child Text elements. Default: `"neutral"`
type?	"number" \| "bullet"	Define the list type. Equivalent to HTML's ordered and unordered lists. Default: `"bullet"`

The TextList component also passes extra props into the component's nested Stack component.