Disclosure

v32.2.0

Mar 31, 2023

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:

<Stack space="xxxlarge">...</Stack>

{/* Or responsively: */}
<Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>

import { atoms } from 'braid-design-system/css';

atoms({ paddingY: 'xxxlarge' })

import { vars } from 'braid-design-system/css';

const space = vars.space.xxxlarge;

v32.1.0

Mar 9, 2023

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 weight="weak"> ... </Disclosure>

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:

<Text>
  Preceding text content that is followed by a Disclosure.
  <Disclosure expandLabel="Read more">
    ...
  </Disclosure>
</Text>

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.

v31.20.0

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" />

v30.1.0

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
}

v30.0.0

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' }

v29.32.0

May 19, 2021

Add support for data attribute maps on all components.

EXAMPLE USAGE:

<Alert
  data={{
    testId: 'message'
  }}
/>

// => <div data-testId="message" />

v28.10.0

Jul 16, 2020

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.

-<ToggleContent onShowMore={(expanded) => { ... }} {...rest}>
+<Disclosure onToggle={(expanded) => { ... }} {...rest}>