Nov 9, 2022
  • Support data attribute boolean values

    The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.

    EXAMPLE USAGE:

    <Component
      data={{
        'custom-attribute': true,
      }}
    />
    // => <div data-custom-attribute="true" />
Oct 21, 2022
  • Removes custom icon sizing and layout in favour of new typography icon sizes and layout.

May 19, 2021
  • Add support for data attribute maps on all components.

    EXAMPLE USAGE:

    <Alert
      data={{
        testId: 'message'
      }}
    />
    
    // => <div data-testId="message" />
May 27, 2020
  • Alert, Notice: Support rich content

    BREAKING CHANGE

    Since Alert and Notice no longer render a Text component for you, you'll need to ensure that you're providing an enclosing Text element as a direct child.

    Alert:

    <Alert tone="positive">
    -  Success!
    +  <Text>Success!</Text>
    </Alert>

    Notice:

    <Notice tone="positive">
    -  Success!
    +  <Text>Success!</Text>
    </Notice>
    

    WHY?

    The Alert and Notice components were originally designed to render a single paragraph of text, but in practice we've found that there's a lot of demand for richer content, e.g. multiple paragraphs, bullet lists, etc.

    In order to support this level of flexibility, Alert and Notice no longer render an enclosing Text component for you. While this means you'll need a bit more boilerplate in simple cases, it also means you now have much more fine-grained control over the layout.

    For example, if you wanted to render an Alert using both Text and BulletList with "medium" space between them:

    <Alert tone="positive">
      <Stack space="medium">
        <Text>The quick brown fox jumps over the lazy dog.</Text>
        <BulletList space="small">
          <Bullet>Bullet 1</Bullet>
          <Bullet>Bullet 2</Bullet>
        </BulletList>
      </Stack>
    </Alert>

    This same pattern applies to Notice:

    <Notice tone="positive">
      <Stack space="medium">
        <Text>The quick brown fox jumps over the lazy dog.</Text>
        <BulletList space="small">
          <Bullet>Bullet 1</Bullet>
          <Bullet>Bullet 2</Bullet>
        </BulletList>
      </Stack>
    </Notice>