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.

22.5.1 (2020-03-03)

Bug Fixes

• Autosuggest: Support search input field type (#512) (46688aa)

22.5.0 (2020-03-03)

Features

• Add useToast hook (#506) (6d4719e)

22.4.0 (2020-03-03)

Features

• Tiles: Support 6 columns and full height content (#508) (1e1419f)

22.3.1 (2020-02-26)

Bug Fixes

• Box: Make Box types backwards compatible (#507) (da1375e)

22.3.0 (2020-02-25)

Features

• Box: Add position 0 props (#505) (cb5d37d)