Alert

v32.3.0

Apr 6, 2023

Alert: Design uplift
Refine the design to use consistent horizontal container inset, aligning content with elements like Card, as well as simplifying the design by removing the sidebar/keyline (consistent with useToast).

v32.2.0

Mar 31, 2023

Alert, Card, useToast: Decouple keyline width from space scale
Previously the keyline width on the left determined its width using the space scale. Re-aligning this to use the grid unit to enable themes with larger space scales.

v31.20.0

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" />

v31.2.0

Dec 7, 2021

Alert, Card, Toast: Improve highlight keyline
Ensures that components using a highlight keyline have the correct border radius and mask their overflow correctly.
Alert, Autosuggest, Tag, TextField: Use neutral tone button style for clear action

v30.4.0

Aug 20, 2021

Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale

v29.32.0

May 19, 2021

Add support for data attribute maps on all components.

EXAMPLE USAGE:

<Alert
  data={{
    testId: 'message'
  }}
/>

// => <div data-testId="message" />

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>