braid-design-system

Minor Changes

• AccordionItem: Support onToggle prop without expanded to allow tracking in uncontrolled mode (#605)

  For example:

  <AccordionItem
    id="id"
    label="Label"
    onToggle={expanded => trackSomething(expanded)}
  >
    ...
  </AccordionItem>
  

Patch Changes

• Autosuggest: When using the automaticSelection prop, we now prevent automatic selection from ocurring if the input value hasn't changed since focusing the field (#601)

Minor Changes

• Text: Add data attribute support (#596)

• Heading: Add data attribute support (#596)

Minor Changes

• Inline: Add collapseBelow and reverse props. (#593)

  Similar to Columns, you can now responsively collapse an Inline into a vertical stack on mobile with the collapseBelow prop.

  For example, if you want items to stack vertically below tablet:

  <Inline space="small" collapseBelow="tablet">
    ...
  </Inline>
  

  Also similar to Columns, you can now reverse the order of items horizontally. This is particularly useful when combined with align="right".

  For example, if you're rendering buttons and you want your primary action on the right on desktop, but at the top on mobile:

  <Inline space="small" collapseBelow="tablet" align="right" reverse>
    <Button>Primary action</Button>
    <Button weight="weak">Secondary action</Button>
  </Inline>
  

• Columns: Add align prop (#593)

  When collapsing columns into a vertical stack on smaller screens, you can now control the alignment.

  For example, if you want your columns to be horizontally centred on mobile:

  <Columns space="small" collapseBelow="tablet" align="center">
    <Column>...<Column>
    <Column>...<Column>
    <Column>...<Column>
  </Columns>
  

  As a side effect, this also means that you can control the alignment of columns when the total width doesn't reach 100%.

  For example:

  <Columns space="small" align="center">
    <Column width="1/3">...<Column>
    <Column width="1/3">...<Column>
  </Columns>
  

• Add TextDropdown component (#594)

  An inline dropdown that can be used as part of a sentence or as an
  alternative to Dropdown, outside of a more structured form.

  Inherits its styling from the parent typographic component, and as such
  must be used nested within either a Text or Heading component.

  Example usage:

  const [jobTitle, setJobTitle] = useState('Developer');
  
  <Text>
    <TextDropdown
      id="jobTitle"
      label="Job Title"
      value={jobTitle}
      onChange={setJobTitle}
      options={['Developer', 'Designer', 'Product Manager']}
    />
  </Text>;
  

Patch Changes

• Hide native focus rings on Box elements during mouse interactions (#589)

Minor Changes

• Theme: Introduce the Catho theme (#550)

  Adds support to build product for the Catho market. This theme is an adaption of the Quantum Design System.

• Add Accordion and AccordionItem components (#587)

  Example usage:

  <Accordion>
    <AccordionItem id="item_1" label="Accordion item 1">
      <Text>Accordion item content</Text>
    </AccordionItem>
    <AccordionItem id="item_2" label="Accordion item 2">
      <Text>Accordion item content</Text>
    </AccordionItem>
    <AccordionItem id="item_3" label="Accordion item 3">
      <Text>Accordion item content</Text>
    </AccordionItem>
  </Accordion>
  

  Accordions manage their own state internally by default. If you'd like to take control of them yourself, you can pass an expanded prop to AccordionItem as well as an onToggle callback.

  const [expanded, setExpanded] = useState(false);
  
  <AccordionItem
    id="id"
    label="Accordion item"
    expanded={expanded}
    onToggle={setExpanded}
  >
    <Text>Accordion item content</Text>
  </AccordionItem>;
  

• Box: Add support for outline="none" (#587)

Patch Changes

• Drop lodash usage to decrease bundle size. (#585)

  This directly affects MonthPicker and any components using the data prop:

  • All field components
  • OverflowMenu
  • MenuRenderer
  • Button

Minor Changes

• Add ButtonLink component (#581)

  You can now easily render semantic links that look like Button elements without needing to use the lower level ButtonRenderer.

  This component renders a native a element by default, but this can be customised via the linkComponent prop on BraidProvider.

  Example usage:

  <ButtonLink href="#" weight="strong">
    Submit
  </ButtonLink>
  

Major Changes

• BraidProvider: Add linkComponent prop to customise link rendering. (#574)

  If you'd like to customise the technical implementation of all Link and TextLink components from Braid, you can now pass a custom component to the linkComponent prop on BraidProvider. For example, if you wanted to ensure that all relative links are React Router links:

  import React, { ComponentProps } from 'react';
  import { Link as ReactRouterLink } from 'react-router-dom';
  import { BraidProvider, LinkComponent } from 'braid-design-system';
  
  // First create the custom link implementation:
  const BraidLink: LinkComponent = ({ href, ...restProps }) =>
    href[0] === '/' ? (
      <ReactRouterLink to={href} {...restProps} />
    ) : (
      <a href={href} {...restProps} />
    );
  
  // Then pass it to BraidProvider:
  export const App = () => (
    <BraidProvider theme={jobStreetTheme} linkComponent={BraidLink}>
      ...
    </BraidProvider>
  );
  

  In order to make your custom link component available for any type of link (not just usages of TextLink), this release introduces a new Link component which renders an unstyled a tag by default.

  BREAKING CHANGES

  • TextLink now requires an href prop. Even though this is unlikely to affect anyone (a TextLink without an href isn't terribly useful), this is still technically a breaking change.

    However, if you find an instance of TextLink that you think shouldn't have an href, this is a sign that it's not actually a link and you should use a TextLinkRenderer instead. Unfortunately, because there's no way for us to know the semantics of your usage ahead of time, we're unable to provide a migration guide, so you'll need to be mindful of how this might impact accessibility.

  • The props for TextLink now extend React's AnchorHTMLAttributes<HTMLAnchorElement> type rather than AllHTMLAttributes<HTMLAnchorElement>. While highly unlikely, this may cause type errors if you've passed props to TextLink that aren't considered to be valid anchor props.

Patch Changes

• Themes: Fix OCC theme export (#576)

  The braid-design-system/themes/occ theme export is now exposed correctly.

Patch Changes

• Divider: Rename 'standard' weight to 'regular'. (#572)

Minor Changes

• Divider: Add strong weight variant, e.g. <Divider weight="strong">. (#569)

  Note that this also affects the dividers prop on both Stack and Tiles, e.g. <Stack space="medium" dividers="strong">. You can still pass a boolean prop if you want to render the default divider styling, e.g. <Stack space="medium" dividers>, so this change is backwards compatible.

Patch Changes

• Update deprecated treat imports (#566)

Minor Changes

• Theme: Introduce the OCC theme (#547)

  Adds support to build product for the OCC market. This theme is an adaption of the Atomic Design System.

Minor Changes

• Inline: Support vertical alignment (#562)

  Inline

  Vertical alignment is now supported via the alignY prop, e.g. <Inline space="small" alignY="center">.

  This also supports responsive values, e.g. <Inline space="small" alignY={['center', 'top']}>

• Box: Add userSelect="none". (#556)

  Box

  You can now set userSelect to "none" directly on Box.

  Since the default value of user-select in CSS is "auto", you can make this value dynamic by conditionally setting it to undefined, e.g. <Box userSelect={selectable ? undefined : 'none'}.

Patch Changes

• Textarea: Fix trailing new line highlight issue (#555)

  BUG FIXES

  Textarea

  Fix for highlightRanges, where the highlights could get out of sync with the field value, if the value contained trailing new lines.

Patch Changes

• Checkbox & Radio: Only add aria-describedby when a message is provided (#542)

  BUG FIXES

  Checkbox & Radio

  Both of these inputs were previously always adding the aria-describedby attribute, while conditionally rendering the message only when provided. This meant that elements without a message would be indicating that they are described by an element that does not exist.

Patch Changes

• Tiles: Honour column width for non-breaking content. (#537)

  BUG FIXES

  Tiles

  The column width of a tile was not being honoured when its child elements contained non-wrapping/breaking content.

Minor Changes

• MenuRenderer: Add support for configuring the menu offset from the trigger (#532)

  FEATURES

  MenuRenderer

  Configure the offset distance between the menu trigger and menu using the offsetSpace prop. As with all space values in the system, this accepts a responsive prop.

   <MenuRenderer
  +  offsetSpace="small"
     trigger={(triggerProps, { open }) => (
       <button {...triggerProps}>Menu</button>
     )}
   >
     <MenuItem onClick={...}>Option</MenuItem>
   </MenuRenderer>
  

Major Changes

• Add customisable MenuRenderer component (#514)

  BREAKING CHANGES

  • Rename OverflowMenuItem to MenuItem.
  • Removed type="link" from OverflowMenuItem due to an accessibility issue with the approach (based on review of consumer usage, it did not seem to be used).

  FEATURES

  MenuRenderer

  Encapsulates all the behaviours of an accessible menu button, allowing consumers to define a custom trigger to open the menu. The trigger function receives two arguments:

  1. Props required for accessibility, including mouse/keyboard interactions
  2. Menu state object containing the open state.

  <MenuRenderer
    trigger={(triggerProps, { open }) => (
      <button {...triggerProps}>Menu</button>
    )}
  >
    <MenuItem onClick={...}>Option</MenuItem>
  </MenuRenderer>
  

  MIGRATION GUIDE

  OverflowMenuItem

  Rename OverflowMenuItem to MenuItem.

   <OverflowMenu label="Overflow">
  -  <OverflowMenuItem onClick={...}>Option</OverflowMenuItem>
  +  <MenuItem onClick={...}>Option</MenuItem>
   </OverflowMenu>
  

  Changing the type is no longer supported due to an accessibility issue with the previous implementation. Please get in contact via Slack if you depended on this.

   <OverflowMenu label="Overflow">
  -  <OverflowMenuItem type="link" onClick={...}>Option</OverflowMenuItem>
  +  <MenuItem onClick={...}>Option</MenuItem>
   </OverflowMenu>
  

Minor Changes

• Add BraidTestProvider component. (#529)

  This is an alternative to BraidProvider for unit test environments. Note that, as the name implies, this should not be used in production code.

  MIGRATION GUIDE

  In your unit tests, you can replace usage of BraidProvider with BraidTestProvider, omitting the theme.

  -<BraidProvider theme={wireframe}>
  +<BraidTestProvider>
  

  If for whatever reason your tests are relying on the presence of a specific theme, you can pass the name of the desired theme.

  -<BraidProvider theme={seekAnz}>
  +<BraidTestProvider themeName="seekAnz">
  

• Only show focus rings on buttons for keyboard navigation. (#526)

  This impacts the following components:

  • Button
  • ButtonRenderer
  • OverflowMenu

  Browsers automatically show focus rings on buttons when clicking on them, even though (for our purposes, at least) they're undesirable from a visual design perspective and redudant from a UX perspective.

  We now automatically hide these focus rings if the user has moved their mouse, indicating that they're not navigating via the keyboard. However, to maintain keyboard accessibility, we reinstate these focus rings whenever the keyboard is used. Most typically, this ensures that you'll see focus rings when tabbing around the UI, even if you've previously used the mouse.

  MIGRATION GUIDE

  No public APIs are affected by this, but you may find that this causes unit test failues that look like this:

  Warning: An update to X inside a test was not wrapped in act(...).

  If this is the case, you should replace BraidProvider in your tests with BraidTestProvider.

  -<BraidProvider theme={wireframe}>
  +<BraidTestProvider>
  

Patch Changes

• 273ed8a: seekUnifiedBeta: Decrease touchable height to 44px

Patch Changes

• 9890660: Hide webkit native clear field on search type inputs

Patch Changes

• eae3496: Fix release of v23.0.0