useToast: Ensure content is left aligned
Applies left alignment to Toast content to ensure intended alignment, regardless of other styles applied.
Fix warning in React 18.3.0 when using useToast.
Move secondary ButtonIcon tone to icons
Following the deprecation of the secondary tone of ButtonIcon, this updates all internal usages to apply the secondary tone directly to the icon.
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.
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.
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".
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> ); }
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.
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' // ... }) } />
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
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', });