list

import { List } from "woly";

List is a list of items related to a single object. A List displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control. This component can be used in list dropdown or input autosuggestion components.

Simple lists open over the anchor element by default. When close to a screen edge, simple lists vertically realign to make sure that all list items are completely visible.

ListItem This component defines a selectable item in a List. It should only be used as a descendant of a List. It does not need to be a direct child of the List component.

Example List

  • John
  • Alex
  • Michael
  • Donald
<Playground>
  <block.L>
    <ListContainer priority="primary" style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem
          key={id}
          disabled={disabled}
          text={content}
          iconRight={<IconInfo />}
          iconLeft={<IconInfo />}
        />
      ))}
    </ListContainer>
  </block.L>
</Playground>

Example dropdown list

  • John
  • Alex
  • Michael
  • Donald
<Playground>
  <Surface>
    <ListContainer priority="primary" style={{ width: '100%' }} as="ul">
      {links.map(({ id, content }) => (
        <ListItem
          tabIndex={1}
          key={id}
          onClick={() => {
            console.log(id);
          }}
          text={content}
        />
      ))}
    </ListContainer>
  </Surface>
</Playground>

Example List with Input, Checkboxes and Button

<Playground>
  <block.L>
    <State initial={false} change={(i) => !i}>
      {(value, change) => (
        <ListContainer priority="primary" style={{ width: '100%' }}>
          <Surface>
            <Input
              name="name"
              onChange={(event) => console.info('On input change')}
              placeholder="Enter your name here"
              type="text"
              priority="primary"
            />
            {links.map(({ id, content }) => (
              <Checkbox
                checked={value}
                id="small"
                onChange={change}
                text={content}
                priority="primary"
                key={id}
              />
            ))}
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <Button text="Show more" priority="primary" />
            </div>
          </Surface>
        </ListContainer>
      )}
    </State>
  </block.L>
</Playground>

Icons

List items can have an icon on the left or/and the right side. To use icons on both sides is not recommended.

  • John
  • Alex
  • Michael
  • Donald
  • John
  • Alex
  • Michael
  • Donald
  • John
  • Alex
  • Michael
  • Donald
<Playground>
  <Surface priority="primary">
    <ListContainer style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem key={id} as="a" href={`#${id}`} disabled={disabled} text={content} />
      ))}
    </ListContainer>
  </Surface>
  <Surface priority="primary">
    <ListContainer style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem key={id} disabled={disabled} text={content} iconLeft={<IconInfo />} />
      ))}
    </ListContainer>
  </Surface>
  <Surface priority="primary">
    <ListContainer style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem key={id} disabled={disabled} text={content} iconRight={<IconInfo />} />
      ))}
    </ListContainer>
  </Surface>
  <Surface priority="primary">
    <ListContainer style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem
          key={id}
          disabled={disabled}
          text={content}
          iconRight={<IconInfo />}
          iconLeft={<IconInfo />}
        />
      ))}
    </ListContainer>
  </Surface>
</Playground>

Sizes

Size of list item is controlled by the component-level block property not from the props.

  • John
  • Alex
  • Michael
  • Donald
  • John
  • Alex
  • Michael
  • Donald
  • John
  • Alex
  • Michael
  • Donald
  • John
  • Alex
  • Michael
  • Donald
  • John
  • Alex
  • Michael
  • Donald
<Playground>
  <block.S>
    <ListContainer priority="primary" style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem
          key={id}
          disabled={disabled}
          text={content}
          iconRight={<IconInfo />}
          iconLeft={<IconInfo />}
        />
      ))}
    </ListContainer>
  </block.S>
  <block.M>
    <ListContainer priority="primary" style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem
          key={id}
          disabled={disabled}
          text={content}
          iconRight={<IconInfo />}
          iconLeft={<IconInfo />}
        />
      ))}
    </ListContainer>
  </block.M>
  <block.L>
    <ListContainer priority="primary" style={{ width: '100%' }}>
      {links.map(({ id, content, disabled }) => (
        <ListItem
          key={id}
          disabled={disabled}
          text={content}
          iconRight={<IconInfo />}
          iconLeft={<IconInfo />}
        />
      ))}
    </ListContainer>
  </block.L>
  <block.XL>
    <ListContainer priority="primary" style={{ width: '100%' }} as="ul">
      {links.map(({ id, content, disabled }) => (
        <ListItem
          disabled={disabled}
          iconLeft={<IconInfo />}
          iconRight={<IconInfo />}
          key={id}
          text={content}
          priority="primary"
        />
      ))}
    </ListContainer>
  </block.XL>
  <block.H>
    <ListContainer priority="primary" style={{ width: '100%' }} as="ul">
      {links.map(({ id, content, disabled }) => (
        <ListItem
          disabled={disabled}
          iconLeft={<IconInfo />}
          iconRight={<IconInfo />}
          key={id}
          text={content}
          priority="primary"
        />
      ))}
    </ListContainer>
  </block.H>
</Playground>

ListItem Props

NameTypeDefaultDescription
as'a' ÓŹ 'li'Use as to set tag for element
disabledbooleanfalse disabled attribute
hrefstringhref attribute
iconLeftReact.ReactNodeLeft icon
iconRightReact.ReactNodeRight icon
prioritystring'default'Priority prop to style List component
tabIndexnumberset tabIndex to list item
textstringtext of list item

ListContainer Props

NameTypeDefaultDescription
prioritystring'secondary'Priority prop to style ListContainer component