[email protected]

Minor Changes

• TextField: Add inputMode and step support (#1174)

  Provide support for the native inputMode and step attributes.

  The inputMode will also be defaulted based on the specified type. For example: <TextField type="number" /> will default the inputMode to numeric.

  EXAMPLE USAGE:

  <TextField inputMode="numeric" step=".01" />

Patch Changes

• Rating: Only fill star for scores .75 and above (#1176)

  A star is only filled when the score is .75 and above. Fixes an issue where all scores .5 or above are shown as half filled stars.

  EXAMPLE USAGE:
  Now when a rating reaches .75 it will round up to a full star.

  <Rating rating={3.75} /> // 4 filled

• ButtonLink: Allow native data attributes with anchor api (#1178)

  Disables the validation against the use of data attributes on ButtonLink. Given it exposes the full native anchor tag api, it is not invalid to use the native syntax.

• Box, atoms: Remove native buttons on number input field (#1174)

  Extends the CSS reset behaviour of HTML input fields where type="number" to remove the native increment and decrement buttons.

  EXAMPLE USAGE:
  The following will now render a HTML input of type number without native buttons:

  <Box component="input" type="number" />

  Additionally, if using the atoms function to build styles, when resetting an input field, the native buttons will also be removed.

  const customClasses = atoms({
    reset: 'input',
    ...
  });

[email protected]

Patch Changes

• Button, ButtonLink: Improve alignment of transparent buttons with icons against Text with icons (#1170)

  To improve optical balance of a Button with an icon, the icon container is bled to the left to balance against the larger horizontal inset of a standard button.
  This alignment correction is now only applied on standard sized buttons that are not using the transparent variant.

  Isolating this alignment correction enables transparent buttons to better align with other components with icon slots, for example:

  <Stack space="small">
    <Text icon={<IconSend />}>Text</Text>
    <Button icon={<IconSend />} variant="transparent" bleed>
      Button
    </Button>
  </Stack>

  Icons and text will now be perfectly aligned between Button components and others icon slots with the same text size.

[email protected]

Minor Changes

• Box: Support custom data prop format for attributes (#1168)

  While Box already supports the native HTML syntax for data attributes, e.g. data-testid="123", it now supports the data prop too. This allows data attributes to be provided consistently to all components.

  EXAMPLE USAGE:

   <Box
  +  data={{ testId: 'myComponent' }}
   />

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

• Text, Heading: Add icon slots (#1160)

  Provides a designed slot for adding an icon to Text and Heading components

  EXAMPLE USAGE:

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

  or with a Heading:

  <Heading level="3" icon={<IconPromote />}>{...}</Heading>

• useToast: Add data attribute support (#1168)

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

Patch Changes

• Provide dev time validation/warnings when the native data attribute format is provided to components that do not support it. (#1168)
  This is required as TypeScript does not validate kebab cased properties, and Braid components do not spread abritrary props.

  This validation will prevent silent failures where attributes are seemingly provided, but not applied.

  For example:

  <Card data-testid={123} />
  // => Would not be applied and TypeScript would not error.

  However, now the following console warning will guide users to use the data prop:

   Braid components do not support the native data attribute format. Use the “data” prop instead.
    <Component
  -    data-testid={123}
  +    data={{
  +      testid: 123,
  +    }}
    />
   For more details, see the “Data Attributes” documentation:
   https://seek-oss.github.io/braid-design-system/components/Box#data-attributes

• Pagination: Increase chevron spacing on prev/next links (#1160)

  Increases the space between the "Previous" and "Next" text and their chevron icons to balance with the larger icon size.

• MenuItemCheckbox: Align with increased icon size (#1160)

  Ensure menu item text has uniform spacing to the checkbox of MenuItemCheckbox and the icon slot of MenuItem.

• Text, Heading: Increase icon size inside typographic elements (#1160)

  The size of icons has been increased by 20% when used inside of Text and Heading components. There is no layout impact expected for consumers, with only the visual ratio of icon to text size changing.

  This applies to icons using the new icon slots, as well as inline icons within the text content.

  Icons used outside of typographic elements are not affected by this change.

• ButtonIcon: Increase standard icon size (#1160)

  Adopt the increased standard icon size.

  Note this does not affect overall dimensions of ButtonIcon, or the layout of surrounding components.

• Removes custom icon sizing and layout in favour of new typography icon sizes and layout. (#1162)

[email protected]

Patch Changes

• Update @vanilla-extract/css dependency (#1158)

  This fixes a type error that was occurring with typescript versions >=4.5.0

• Heading: Nested icons inherit text colour (#1153)

  When using icons inside of a Heading, the default tone was always neutral, rather than inheriting the colour of the nearest component.

  For example, when an icon was used inside of a TextLink within a Heading:

  <Heading level="1">
    Title with{' '}
    <TextLink>
      link <IconArrow />
    </TextLink>
  </Heading>
  // => Previously, IconArrow was the heading text colour
  // `neutral`, now inherits the `link` colour.

  or equally, when an icon was used inside of a Secondary component within a Heading:

  <Heading level="1">
    Title with{' '}
    <Secondary>
      secondary <IconArrow />
    </Secondary>
  </Heading>
  // => Previously, IconArrow was the heading text colour
  // `neutral`, now inherits the `secondary` colour.

[email protected]

Patch Changes

• Fixes an issue with a missing dependency (#1143)

v31.16.0

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,
  });

v31.15.0

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.

v31.14.0

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.

v31.13.0

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 => {
      // ...
    }}
  />

v31.12.0

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)