Disclosure

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:

Disclosure: Add size support

Introduce the size prop to the Disclosure component, providing the same options as the Text component.

EXAMPLE USAGE:

Add xxxlarge to the space scale

Extends the range of the space scale to include xxxlarge. This addition is to support an upcoming design uplift that requires greater fidelity in the scale. Note, the new value is also available as a responsive property.

EXAMPLE USAGE:

Disclosure: Add weight support

Provides support for reducing the visual weight of the Disclosure's call to action. Follows the same contextual styling rules as TextLink.

EXAMPLE USAGE:

Disclosure: Add inline content support

Provides support for using a Disclosure within a sentence by allowing it to be nested within a typographic component, i.e. Text.

All size and weight properties will inherit from the parent component.

EXAMPLE USAGE:

Disclosure: Ensure chevron does not wrap alone

Fixes the scenario where based on copy length and container size, the chevron could wrap independently of the rest of the label. By using a zero-width, non-breaking space, the chevron will now wrap together with the last word of the label.

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:

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:

Add Disclosure component

This component serves as a replacement for ToggleContent from SEEK Style Guide.

SEEK STYLE GUIDE MIGRATION GUIDE

• ToggleContent has been renamed to Disclosure.
• The onShowMore prop has been renamed to onToggle.
• The spacing around the button has changed to follow Braid's layout guidelines. Design review is recommeded.