Columns

v32.4.0

Apr 19, 2023

Column: Support full height content
Provide support for full height content by growing all Column elements to be uniform in height.
This will have no effect on the content itself, but enables consumers to create designs of uniform content, such as rows of Card elements.

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;

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

v31.7.0

Mar 7, 2022

Column: Enure inner element honours component prop

v31.6.0

Feb 25, 2022

Columns: Support using span elements via component prop
Setting the component prop to span will now ensure all elements controlled by Columns are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.
EXAMPLE USAGE:
<Columns space="medium" component="span"> ... </Columns>

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

v25.3.0

Apr 17, 2020

Columns: Add align prop

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>