useToast

v32.3.0

Apr 6, 2023

useToast: Design uplift with increased page contrast
As a means to increase constrast against page content, the design has been updated to be presented on inverted backgrounds based on the color mode. The design has also be refined to remove the sidebar/keyline (consistent with Alert), while also applying the tone to the provided message.

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.
Improve consistency of border radius usage across components
Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.
Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.

v31.18.0

Oct 21, 2022

useToast: Add data attribute support

Support applying custom data attributes to Toast elements.

EXAMPLE USAGE:

 export const Component = () => {
   const showToast = useToast();

   return (
     <Button onClick={() =>
       showToast({
+        data: { testId: 'myToastMessage' },
         ...
       })
     }>
       Show
     </Button>
   );
 }

The above example results in the following HTML attribute being set on the toast element: data-testId="myToastMessage".

v31.17.0

Aug 25, 2022

useToast: Add neutral tone support

Add support for neutral tone. When using a neutral tone, an icon may optionally be provided. For consistency, the tone of the icon is set to secondary and cannot be customised.

EXAMPLE USAGE:

import { useToast } from "braid-design-system"

export const DemoButton = () => {
  const showToast = useToast();

  return (
    <Button
      onClick={() =>
        showToast({
          tone: "neutral",
          icon: <IconBookmark />,
          message: "Neutral with icon",
        })
      }
    >
      Show Toast
    </Button>
  );
}

v31.9.0

Apr 8, 2022

Autosuggest, PasswordField, TextField, useToast: Add id to internal close/clear buttons
Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon
Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.

v31.8.0

Mar 23, 2022

useToast: Add closeLabel prop

To support translations, the close button can now be customised using the closeLabel prop.

EXAMPLE USAGE:

<Button
  onClick={() =>
    showToast({
      closeLabel: 'Close'
      // ...
    })
  }
/>

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

v28.2.0

Jun 24, 2020

useToast: Add deduplication of toasts

Passing key when creating new toasts will now remove existing Toasts on screen with the same key before adding the new Toast. This is useful when a toast is created as part of a repeatable process that happens frequently.

const showToast = useToast();

showToast({
  message: 'There can only be one of me',
  tone: 'positive',
  key: 'deduped',
});