Feb 5, 2023
  • Accordion, AccordionItem: Add weight support

    Add support for customising the weight of AccordionItems. This can be either at an Accordion level or on a standalone AccordionItem based on design requirements.

    Note, in order to maintain visual consistency, the weight prop can only be specified on an AccordionItem when outside of an Accordion.

    EXAMPLE USAGE:

    <Accordion weight="strong">
      <AccordionItem />
      ...
    </Accordion>

    or

    <AccordionItem weight="strong" />
Nov 9, 2022
  • Support data attribute boolean values

    The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.

    EXAMPLE USAGE:

    <Component
      data={{
        'custom-attribute': true,
      }}
    />
    // => <div data-custom-attribute="true" />
Oct 21, 2022
  • Removes custom icon sizing and layout in favour of new typography icon sizes and layout.

Apr 8, 2022
  • AccordionItem: Add icon support

    Provides a designed slot for adding an icon to an AccordionItem

    EXAMPLE USAGE:

    <AccordionItem
      icon={<IconPromote />}
      {...}
    />
Feb 1, 2022
  • AccordionItem: Add badge support

    The AccordionItem now has support for the badge prop.

    EXAMPLE USAGE:

    <AccordionItem
      label="Label"
      badge={<Badge>New</Badge>}
    >
      ...
    </AccordionItem>
Jul 8, 2021
  • Add wide breakpoint of 1200px

    This adds support for wide to the following touchpoints:

    • Responsive values, e.g.
      { mobile: 'small', wide: 'large' }
    • Responsive range props, e.g.
      <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
    • The responsiveStyle function, e.g.
      export const className = style(responsiveStyle({ wide: '...' }));
    • The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.
      {
        mobile: 0,
        tablet: 740,
        desktop: 940,
        wide: 1200
      }
Jun 21, 2021
  • Support object notation for responsive props

    Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.

    { mobile: 'small', tablet: 'medium', desktop: 'large' }

    This also means that breakpoints can be skipped.

    { mobile: 'small', desktop: 'large' }
May 19, 2021
  • Add support for data attribute maps on all components.

    EXAMPLE USAGE:

    <Alert
      data={{
        testId: 'message'
      }}
    />
    
    // => <div data-testId="message" />
Apr 21, 2021
  • Accordion, AccordionItem: Allow customisation of size, tone, space and dividers.

    Note that, to ensure adequate space for touch targets, the space prop only accepts values of "medium", "large" and "xlarge".

    EXAMPLE USAGE

    <Accordion size="standard" tone="secondary" space="xlarge" dividers={false}>
      <AccordionItem label="Accordion item 1">...</AccordionItem>
      <AccordionItem label="Accordion item 2">...</AccordionItem>
      <AccordionItem label="Accordion item 3">...</AccordionItem>
    </Accordion>
Aug 7, 2020
  • AccordionItem: Prevent Safari from clipping label text

Apr 23, 2020
  • AccordionItem: Support onToggle prop without expanded to allow tracking in uncontrolled mode

    For example:

    <AccordionItem
      id="id"
      label="Label"
      onToggle={expanded => trackSomething(expanded)}
    >
      ...
    </AccordionItem>
Apr 9, 2020
  • Add Accordion and AccordionItem components

    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>;