braid-design-system

Minor Changes

• Introduce apac theme (#676)

  The seekAnz theme has always been held back by the need to maintain visual consistency with SEEK Style Guide.

  In order to provide a path forwards, this release introduces a new apac theme, giving teams the opportunity to adopt newer design standards while still providing the seekAnz theme as a backwards compatibility layer.

  Consumers of the seekAnz theme are under no immediate pressure to migrate and both themes will be provided for the forseeable future. For now, this theme is aimed at those teams that are explicitly wanting to adopt newer design standards.

  The visual changes to seekAnz are as follows:

  • The body background has changed from #eeeeee to #f5f6f8.
  • All grey colours now have a hint of blue.
  • Buttons and form fields have decreased in height from 48px to 44px.
  • Border radiuses have increased from 2px to 4px.

  It's possible that your application has custom design elements that depend on these older values in order to look correct. It's also possible that your application is part of a broader user journey that makes use of these older design standards. As a result, a design review is highly recommended.

  This release also signifies that the seekUnifiedBeta theme is coming out of beta. Any references to this theme should be replaced with apac. As with seekAnz, both themes will be provided for the timebeing to give you an opportunity to migrate.

  EXAMPLE USAGE

  import apac from 'braid-design-system/themes/apac';
  
  <BraidProvider theme={apac}>
  

  <BraidLoadableProvider themeName="apac">
  

Minor Changes

• Box: Add body background (#677)

  You can now use the theme's body background on arbitrary elements within the page.

  EXAMPLE USAGE

  <Box background="body">...</Box>
  

Minor Changes

• MonthPicker: Support custom month and year labels (#672)

  To support internationalisation, you can now pass the following props to MonthPicker:

  • monthLabel (string)
  • yearLabel (string)
  • monthNames (string[])

Minor Changes

• Expose docs theme (#670)

  In order to support internal documentation sites that leverage Braid, we're now exposing a docs theme.

  import docsTheme from 'braid-design-system/themes/docs';
  

Minor Changes

• Add Tabs component (#666)

  Follows the WAI Aria Tabs Pattern.

  EXAMPLE USAGE:

  <TabsProvider id="id">
    <Stack space="medium">
      <Tabs label="Label">
        <Tab>The first tab</Tab>
        <Tab>The second tab</Tab>
        <Tab badge={<Badge tone="positive">New</Badge>}>The third tab</Tab>
      </Tabs>
      <TabPanels>
        <TabPanel>...</TabPanel>
        <TabPanel>...</TabPanel>
        <TabPanel>...</TabPanel>
      </TabPanels>
    </Stack>
  </TabsProvider>
  

Patch Changes

• Autosuggest: Fix suggestion double tap bug on iOS (#668)

  Tapping a suggestion on iOS triggers the hover state rather than a selection, forcing users to tap a second time to select the suggestion.

  This is due to the way that iOS simulates mouse events in a touch environment. If the document is updated during a mouseover, mouseenter or mousemove event, the subsequent click event is never fired. While it may seem counterintuitive, this ensures that touch users are able to see hover effects that make changes to the page.

  To fix this, we now trigger our suggestion hover logic on touchstart so that the document doesn't change during mouse events, which then allows the click event to fire uninterrupted.

Patch Changes

• Fix CSS ordering issue in production mode (#664)

  Files within the top-level themes directory were not correctly marked as side effects which meant that, when importing from braid-design-system/themes/*, the CSS order could differ between development and production.

Minor Changes

• useToast: Add deduplication of toasts (#662)

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

Minor Changes

• Inline: Add support for semantic list elements (#654)

  As already featured on Stack, when rendering <Inline component="ul|ol">, its children will be rendered as li elements.

Patch Changes

• Hide icons from screen readers that have no title (#656)

  Icons are mostly used for decorative purposes and as such are now hidden from screen readers unless providing a title. In this case, an Icon is identified as an image.

Major Changes

• Alert, Notice: Support rich content (#647)

  BREAKING CHANGE

  Since Alert and Notice no longer render a Text component for you, you'll need to ensure that you're providing an enclosing Text element as a direct child.

  Alert:

  <Alert tone="positive">
  -  Success!
  +  <Text>Success!</Text>
  </Alert>
  

  Notice:

  <Notice tone="positive">
  -  Success!
  +  <Text>Success!</Text>
  </Notice>
  
  

  Why?

  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>
  

Patch Changes

• MonthPicker: Fix internal <Hidden screen> deprecation warning (#650)

  The MonthPicker component was mistakenly using <Hidden screen> to provide labels to screen readers rather than the new HiddenVisually component. As a result, deprecation warnings were being logged in the console during development.

Patch Changes

• Use assert for runtime assertions during development (#624)

  Please ensure you are on sku v10.3.0 or higher so that these assertions are removed in production. This ensures that these checks don't have a negative performance impact on users.

  The main driver for this change is to ensure that runtime design validation occurs within the Braid Playroom.

  Playroom is built in production mode to maximise performance, but this means that our custom development-time validation code isn't being executed. As a result, it's becoming increasingly common for prototypes to contain invalid code that only throws an error when transposed into a proper development environment. This change ensures that invalid designs are caught as early as possible.

Minor Changes

• Improve field border contrast ratio (#638)

  To improve accessibility, field borders have been darkened for the following themes:

  • seekAnz
  • seekBusiness
  • seekUnifiedBeta
  • catho (based on referencing Quantum)

  Since this is a noticeable visual change that may introduce inconsistincies with custom design elements, design review is recommended.

Patch Changes

• Toggle: Hide border on dark backgrounds (#638)

  In order to reduce visual noise, similar to other fields, we now hide the border on Toggle elements when rendered on dark backgrounds.

• Dropdown: Lighten chevron when disabled (#638)

  The visual prominence of the chevron icon is now lower when disabled is set to true.

• Autosuggest: Apply darker background when disabled (#638)

  When disabled, Autosuggest elements didn't have the same dark background as other disabled fields. This has now been fixed.

Minor Changes

• Add HiddenVisually component (#643)

  You can now easily provide content to assistive technologies while hiding it from the screen.

  <Text>
    This content is available to everyone.
    <HiddenVisually>
      This content is only available to screen readers.
    </HiddenVisually>
  </Text>
  

Patch Changes

• Hidden: Infer inline prop when nested inside Text or Heading (#643)

  Currently, if you want to hide content using the Hidden component in an inline context (e.g. hiding part of a sentence), you need to remember to set the inline boolean prop.

  Since most usages of this feature are within text, we now infer this for you automatically within the context of a Text or Heading component.

  MIGRATION GUIDE

  This change is not strictly required, but you can now clean up your code like this:

  -<Text>The end of this sentence is... <Hidden inline below="tablet">hidden on mobile.</Hidden>
  +<Text>The end of this sentence is... <Hidden below="tablet">hidden on mobile.</Hidden>
  

Patch Changes

• MonthPicker: Preserve touchable height on iOS (#641)

  Fix for the native variant of MonthPicker having a reduced height on iOS when no value is provided.

Minor Changes

• Stack: Add support for Hidden stack items (#632)

  You can now responsively hide stack items using the Hidden component while maintaining the correct spacing between all visible elements.

  For example, if you wanted to hide a stack item on mobile:

  <Stack space="small">
    <Text>...</Text>
    <Hidden below="tablet">
      <Text>...</Text>
    </Hidden>
    <Text>...</Text>
  </Stack>
  

Major Changes

• seekAnz, seekBusiness, seekUnifiedBeta: Change critical colour to red (#634)

  As part of the colour uplift work, this updates the critical colour in the seekAnz (and subsequently seekBusiness and seekUnifiedBeta) theme from pink to red. This brings the theme into line with our colour usage guide documented under Tones on the website.

  BREAKING CHANGE
  While not technically a breaking change, you may want to review usage of the critical tone in your application, particularly in custom scenarios, for example:

  Usage of background props on Box

  <Box background="critical">...</Box>
  

  or

  <Box background="criticalLight">...</Box>
  

  Usage of tone props on Icon or Text

  <Icon tone="critical">...</Icon>
  

  or

  <Text tone="critical">...</Text>
  

Major Changes

• Stack, Inline, Tiles: Flatten fragments when provided as direct children (#626)

  The following patterns should now work as you might have previously expected:

  <Stack space="small">
    <React.Fragment>
      <Text>...</Text>
      <Text>...</Text>
    </React.Fragment>
    <Text>...</Text>
  </Stack>
  

  <Inline space="small">
    <React.Fragment>
      <Badge>...</Badge>
      <Badge>...</Badge>
    </React.Fragment>
    <Badge>...</Badge>
  </Inline>
  

  <Tiles space="small" columns={3}>
    <React.Fragment>
      <Card>...</Card>
      <Card>...</Card>
    </React.Fragment>
    <Card>...</Card>
  </Tiles>
  

  BREAKING CHANGE

  While highly unlikely, if you were using a fragment to group unspaced sibling nodes within a Stack, Inline or Tiles element, you'll need to replace it with a Box, for example:

  <Stack space="small">
    ...
  -  <React.Fragment>
  +  <Box>
      <Box>...</Box>
      <Box>...</Box>
  -  <React.Fragment>
  +  </Box>
    ...
  </Stack>
  

  <Inline space="small">
    ...
  -  <React.Fragment>
  +  <Box>
      <Box>...</Box>
      <Box>...</Box>
  -  <React.Fragment>
  +  </Box>
    ...
  </Inline>
  

  <Tiles space="small" columns={3}>
    ...
  -  <React.Fragment>
  +  <Box>
      <Box>...</Box>
      <Box>...</Box>
  -  <React.Fragment>
  +  </Box>
    ...
  </Tiles>
  

Patch Changes

• TextField, Autosuggest, PasswordField: Improved support for field buttons with browser extensions. (#625)

  The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.

  Affects the following components:

  • PasswordField: visibility toggle button
  • TextField: clear button
  • Autosuggest: clear button

• Textarea: Fix border radius on dark backgrounds (#625)

  When rendering a Textarea on a background other than white, the field background extended out beyond the field's border radius.

• TextField, Autosuggest, PasswordField: Prevent field buttons firing on right click (#625)

  Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.

  Affects the following components:

  • PasswordField: visibility toggle button
  • TextField: clear button
  • Autosuggest: clear button

Minor Changes

• Add zero opacity to Box (#621)

  Provide zero opacity on Box as an optimisation.

  Example usage:

  <Box opacity={0}>...</Box>
  

• Add PasswordField component (#620)

  Provides a password field complete with visibility toggle to switch between a masked and unmasked field value.

Minor Changes

• Autosuggest: Support suggestion descriptions (#613)

  You can now provide a description as part of each suggestion item, e.g.:

  <Autosuggest
    suggestions={[
      {
        text: 'Apples',
        value: 123,
        description: 'Juicy and delicious',
      },
    ]}
    {...rest}
  />
  

Patch Changes

• Autosuggest: Don't select suggestions onBlur when using automaticSelection and suggestions are closed (#609)