braid-design-system

Minor Changes

• vars: Expose shadow palette (#1133)

  Provide access to the themed shadow scale on the vars object

  EXAMPLE USAGE:

  import { vars } from 'braid-design-system/css';
  
  export const dropShadow = style({
    boxShadow: vars.shadow.small,
  });
  

Minor Changes

• IconArrow: Add component (#1130)

  Add new IconArrow component. The orientation of the arrow can be controlled using the direction prop.

  EXAMPLE USAGE:

  <IconArrow direction="left" />
  

• Stepper: Add align prop (#1126)

  Provide the align prop which now includes support for left alignment.

  EXAMPLE USAGE:

  <Stepper align="left">...</Stepper>
  

Patch Changes

• RadioGroup: Remove surrounding white space with no visual label (#1129)

  Removes additional white space applied above the RadioItems when no visible label is provided, i.e. when labelling via aria-label or aria-labelledby.

• Stepper: Fix clipping of step name in Safari (#1126)

  Fixes issue where the descenders in Step labels were being clipped only in Safari.

Minor Changes

• Rating: Add variant prop and deprecate showTextRating (#1123)

  Provide the variant prop to allow customising the appearance. This supports the new minimal appearance, which presents a single star alongside the text rating.

  Also adding the starsOnly variant as a replacement for the now deprecated showTextRating={false}.

  EXAMPLE USAGE:

  <Rating rating={3.7} variant="minimal" />
  

  MIGRATION GUIDE:

  The showTextRating prop is now deprecated. If you were using this previously, please migrate to the new variant prop using starsOnly.

  <Rating
    rating={3.7}
  - showTextRating={false}
  + variant="starsOnly"
  />
  

• IconPlatformAndroid, IconPlatformApple, IconSocialYouTube: Add new icons (#1121)

  Add icons for the Apple and Android mobile platforms as well as YouTube

  EXAMPLE USAGE:

  <IconPlatformAndroid />
  <IconPlatformApple />
  <IconSocialYouTube />
  

Patch Changes

• apac and seekBusiness themes: Update colour palette (#1104)

  The colours used in these themes have been updated to the latest design standards as they were subtly off due to coming from an incorrect source.

Minor Changes

• MenuRenderer, OverflowMenu: Provide context data to onClose (#1115)

  The onClose handler now receives data to allow consumers to discern why the menu closed — either by exiting or selecting an action. See the documentation for more details.

  EXAMPLE USAGE:

  <MenuRenderer
    onClose={closeReason => {
      // ...
    }}
  />
  

Minor Changes

• RadioItem: Add disabled support (#1108)

  Provide support for disabling individual RadioItems within a RadioGroup.

  EXAMPLE USAGE:

  <RadioGroup>
    <RadioItem label="One" value="1" />
    <RadioItem label="Two" value="2" />
    <RadioItem label="Three" value="3" disabled={true} />
  </RadioGroup>
  

Patch Changes

• Dropdown: React 18 compatibility (#1114)

Patch Changes

• Button, ButtonLink: Ensure bleedY is backwards compatibile for transparent variant (#1106)

  Ensure that bleedY applies bleed only vertically on transparent variant, isolating the new horizontal bleed to the new bleed prop exclusively.

Minor Changes

• Button, ButtonLink: Improve Button bleed (#1103)

  Previously the bleedY prop allowed the background of Button to bleed vertically into the surrounding layout. This worked well for all variants except transparent, which needed to bleed horizontally as well.

  To support this we have introduced the bleed prop which will apply the bleed based on the variant. We have also deprecated bleedY which will be removed in a future release.

  EXAMPLE USAGE:

   <Button
  -  bleedY
  +  bleed
     {...}
   >
     Button
   </Button>
  

  MIGRATION GUIDE

  Migration from bleedY to bleed can be automated by running the Braid upgrade command, passing the v31.11 version. You must provide a glob to target your project’s source files. For example:

  yarn braid-upgrade v31.11 "**/*.{ts,tsx}"
  

  It is recommended to visually review the any Button usage with the transparent variant, to ensure the layout is as expected.

Minor Changes

• Bleed: Support using span elements via component prop (#1094)

  Setting the component prop to span will now ensure all elements controlled by Bleed are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.

  EXAMPLE USAGE:

  <Bleed space="medium" component="span">
    ...
  </Bleed>
  

Patch Changes

• Dialog, Drawer: Prevent sticky close button container from blocking content (#1097)

  Fix regression introduced when migrating the close action to use ButtonIcon. The close action container was blocking the content of the Dialog/Drawer, and when scrolling could prevent a user from interacting with the content as it went behind the container.

  Additionally, re-introduced the surface coloured background behind the button to prevent the button from visually colliding with content when scrolling.

Minor Changes

• Tab: Add icon support (#1089)

  Provides a designed slot for adding an icon to a Tab

  EXAMPLE USAGE:

  <Tab icon={<IconPromote />}>{...}</Tab>
  

• AccordionItem: Add icon support (#1086)

  Provides a designed slot for adding an icon to an AccordionItem

  EXAMPLE USAGE:

  <AccordionItem
    icon={<IconPromote />}
    {...}
  />
  

• Tag: Add id support (#1081)

• Button, ButtonLink: Add icon support (#1090)

  Provides a designed slot for adding an icon to a Button or ButtonLink

  EXAMPLE USAGE:

  <Button icon={<IconSend />}>{...}</Button>
  

• Tag: Add icon support (#1087)

  Provides a designed slot for adding an icon to a Tag

  EXAMPLE USAGE:

  <Tag
    icon={<IconPromote />}
    {...}
  />
  

• OverflowMenu: Add id support (#1081)

• ButtonIcon: Add component (#1084)

  See documentation for full feature set.

  EXAMPLE USAGE:

  <ButtonIcon
    icon={<IconShare/>}
    label="Share"
    id="share"
    onClick={...}
  />
  

Patch Changes

• Divider: Use span element (#1089)

  As the Divider component is not used as a container element, we now use a span. This allows it to be used inside button elements, such as a Tab, without producing invalid html.

• Badge: Use span element (#1086)

  As the Badge component is not used as a container element, we now use a span. This allows it to be used inside button elements, such as an AccordionItem, without producing invalid html.

• TooltipRenderer: Ignore pointer events on tip container (#1082)

  Fix for the container of the tooltip interferring with pointer events of the tooltip trigger itself.

• MenuRenderer, OverflowMenu: Guard against open/close handlers firing incorrectly (#1088)

  Add guard to ensure open and close handlers are not re-fired when handler instances are updated.

• Autosuggest, PasswordField, TextField, useToast: Add id to internal close/clear buttons (#1081)

• Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon (#1084)

  Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.

Minor Changes

• useToast: Add closeLabel prop (#1079)

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

  EXAMPLE USAGE:

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

• Autosuggest, TextField: Add clearLabel prop (#1079)

  To support translations, the clear button in the field can now be customised using the clearLabel prop.

  EXAMPLE USAGE:

  <Autosuggest
    clearLabel="Clear"
    // ...
  />
  

• Loader: Apply WAI-ARIA alert pattern (#1079)

  To improve the feedback of the Loader provided to screen readers, we now apply the WAI-ARIA Alert Pattern using an assertive level of importance.

Patch Changes

• IconThumb: Update artwork (#1080)

• MenuRenderer, OverflowMenu: Mouse leave no longer affects focus state (#1077)

  Previously, moving the mouse from hovering a menu item to outside of the menu would shift focus the to the menu trigger. This is not a requirement for accessibility and introduces undesired behaviour when the trigger is used in conjunction with TooltipRenderer.

  Note: As per the menu accessibility guidelines, focus will still be returned to the trigger when clicking outside the menu, selecting a menu item or pressing the escape key.

Minor Changes

• MenuRenderer, OverflowMenu: Add menu width and placement support (#1075)

  Provides a set of widths to control how wide the menu is, where content is the default. The available widths are ratioed off the contentWidths specified on the theme.

  Additionally the placement of the menu can choose from either top or bottom where the latter remains the default.

  EXAMPLE USAGE:

  <MenuRenderer
    // ...
    width="small"
    placement="top"
  >
    ...
  </MenuRenderer>
  

• MenuItem, MenuItemLink, MenuRenderer, OverflowMenu: Add icon support (#1075)

  Provides a designed slot for adding an icon to MenuItem and MenuItemLink. To compliment this we have introduced reserveIconSpace on both MenuRenderer and OverflowMenu so the labels in menu items without icons align with the labels of menu items with an icon.

  EXAMPLE USAGE:

  <MenuRenderer reserveIconSpace>
    <MenuItem
      // ...
      icon={<IconBookmark />}
    >
      Menu Item
    </MenuItem>
  </MenuRenderer>
  

• MenuItem, MenuItemLink, MenuItemChecklist: Add badge support (#1075)

  Provides a designed slot for adding a Badge to all the variants of a menu item.

  EXAMPLE USAGE:

  <MenuRenderer>
    <MenuItem
      // ...
      badge={<Badge>Badge</Badge>}
    >
      Menu Item
    </MenuItem>
  </MenuRenderer>
  

Patch Changes

• Button: Support using as menu trigger (#1075)

  Allow a Button to receive all of the required props for a menu trigger. As a result a Button now accepts onKeyUp, onKeyDown and aria-haspopup.

  EXAMPLE USAGE:

  <MenuRenderer
    trigger={triggerProps => <Button {...triggerProps}>Button</Button>}
  >
    ...
  </MenuRenderer>
  

• Column: Enure inner element honours component prop (#1075)

Minor Changes

• Bleed: Add component (#1066)

  Introduce Bleed layout component that allows content to bleed out into the parent layout by a specified amount, useful when a content needs to negate the indent provided by a parent component.

  See the documentation and layout guide for more information.

  EXAMPLE USAGE:

   <Card>
     <Stack space="gutter">
  +    <Bleed horizontal="gutter" top="gutter">
         <Placeholder height={200} label="Header Image" />
  +    </Bleed>
       <Heading level="3">Heading</Heading>
       <Text>Text content</Text>
     </Stack>
   </Card>
  

• Box, BoxRenderer, atoms: Add support for inset shorthand (#1069)

  Introduces the inset shorthand as a convenience for applying top, bottom, left and right properties.

  EXAMPLE USAGE:

  <Box position="absolute" inset={0} />
  

  or

  atoms({
    position: 'absolute',
    inset: 0,
  });
  

• Pagination: Add pageLimit support (#1070)

  Add support for configuring the number of pages displayed using the pageLimit prop. The default is still set to 7, but consumers can now reduce this, useful when Pagination is used inside column layouts.

  In addition, the layout has been stabilised, preventing the links moving when the next/prev actions are shown/hidden.

  EXAMPLE USAGE:

  <Pagination
    ...
    pageLimit={3}
  />
  

• Columns: Support using span elements via component prop (#1064)

  Setting the component prop to span will now ensure all elements controlled by Columns are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.

  EXAMPLE USAGE:

  <Columns space="medium" component="span">
    ...
  </Columns>
  

• Drawer: Support positioning on the left (#1067)

  A Drawer can now enter from and be positioned on the left. The default remains unchanged and will enter from and be docked to the right.

  EXAMPLE USAGE:

  <Drawer
    ...
    position="left"
  />
  

• Inline: Support using span elements via component prop (#1068)

  Setting the component prop to span will now ensure all elements controlled by Inline are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.

  EXAMPLE USAGE:

  <Inline space="medium" component="span">
    ...
  </Inline>
  

Minor Changes

• Stack: Add support for span elements (#1060)

  Stack now supports using span elements for it's markup, this is useful when using layout components inside elements that should not contain a div element, e.g. button.

  EXAMPLE USAGE:

  <Stack component="span" space="medium">
    ...
  </Stack>
  

• Stepper: Add component (#1060)

  See documentation for full feature set and usage details.

  EXAMPLE USAGE:

  <Stepper label="Linear steps" progress={3}>
    <Step>1. First step</Step>
    <Step>2. Second step</Step>
    <Step>3. Third step</Step>
    <Step>4. Forth step</Step>
  </Stepper>
  

Minor Changes

• AccordionItem: Add badge support (#1057)

  The AccordionItem now has support for the badge prop.

  EXAMPLE USAGE:

  <AccordionItem label="Label" badge={<Badge>New</Badge>}>
    ...
  </AccordionItem>
  

Patch Changes

• Autosuggest: Scroll list into view (#1058)

  The suggestions list will now be scrolled into view (on tablet and above) if it extends beyond the bottom of the window. This prevents suggestions (particularly those loaded asynchronously) from being obscured by the edge of the window.

Patch Changes

• MenuRenderer, OverflowMenu: Ensure layout of the trigger is controlled by the parent (#1055)

  Fixes an issue where the trigger container did not adhere to the parent layout, preventing consumers from providing triggers that take up the full width of their available space. This goes against one of Braid's key layout principles which says spacing between elements is owned entirely by layout components.

Minor Changes

• vars: Expose contentWidth theme tokens (#1052)

Patch Changes

• Update experimental color mode flags (#1050)

Patch Changes

• BraidProvider: Add backgroundColor to html node when styleBody is set (defaults to true) (#1047)

Patch Changes

• useIcon: Return props compatible with public Box component (#1045)

Minor Changes

• vars: Add light variant foreground colors (#1042)

  New foregrounds
  The following foregrounds are now available on the vars.foregroundColor theme object:

  • cautionLight
  • infoLight
  • linkLight
  • linkLightVisited
  • positiveLight
  • promoteLight

• Text: Improve contrast of caution, positive, info, promote and link tones (#1042)

  When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.

Patch Changes

• OverflowMenu: Use neutral tone button style (#1042)

• Alert, Card, Toast: Improve highlight keyline (#1042)

  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 (#1042)

• Box: Reset background color on input and select elements (#1042)

  When specifying a component of input or select the background color was not being reset, falling through to the user agent styles. Reseting it to transparent to ensure predicatble styles across browsers and colour modes.

• MenuItem, MenuItemLink, MenuItemCheckbox: Use span elements internally for more valid HTML. (#1042)

• Loader: Use current text color (#1042)