Accordion

Migrate from custom focus ring visibility to native :focus-visible behaviour.

Previously Braid would change the presentation of focus ring outlines based on the user input, i.e. mouse or keyboard, to prevent showing focus rings on click. With the updated Browser Support Policy, we can now leverage the native :focus-visible pseudo class instead.

Change id prop from required to optional, allowing simplified usage.

Remove the uuid dependency which was previously used to generate fallback IDs in Playroom.

EXAMPLE USAGE:

Support null for badge and icon slots, in addition to undefined.

Previously, badge and icon props could only be explicitly omitted with undefined. This change allows passing null.

EXAMPLE USAGE:

Accordion: Fix data prop parsing

Ensure the data prop is correctly passed through to Stack internally, and validate data-* attributes are not being passed in incorrectly.

AccordionItem: Fix issue that caused data props to be incorrectly parsed.

AccordionItem: Simplify internal layout.

Accordion, AccordionItem: Adjust spacing values for improved visual balance.

This change reduces the default spacing within Accordion and AccordionItem components at certain sizes, ensuring the content is better associated with the correct AccordionItem.

Within the Accordion component, the default space between AccordionItem components has been reduced for size large with dividers, and sizes small and xsmall without dividers. Within the AccordionItem component, the space between the label and content has been reduced for sizes large and small.

Standardise icon slot spacing

Normalise the space between the icon slot and component content across the system.

Move badge slot inside label

Relocate the badge slot inside the label slot enabling the Badge to sit alongside the last word in wrapping lines of text.

Improve virtual touch target positioning for narrow elements

To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area. This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.

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:

or

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:

Removes custom icon sizing and layout in favour of new typography icon sizes and layout.

AccordionItem: Add icon support

Provides a designed slot for adding an icon to an AccordionItem

EXAMPLE USAGE:

AccordionItem: Add badge support

The AccordionItem now has support for the badge prop.

EXAMPLE USAGE:

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
  }
  

Support object notation for responsive props

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

This also means that breakpoints can be skipped.

Add support for data attribute maps on all components.

EXAMPLE USAGE:

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

AccordionItem: Prevent Safari from clipping label text

AccordionItem: Support onToggle prop without expanded to allow tracking in uncontrolled mode

For example:

Add Accordion and AccordionItem components

Example usage:

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.