Columns

v33.0.0

Oct 15, 2024

Column: Add component support

With Columns no longer adding intermediary elements, consumers are free to control the underlying HTML element of the Column themselves via the component prop. Valid options are kept to a white list of elements relevant to Column that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.

EXAMPLE USAGE:

<Columns component="ul">
  <Column component="li">
    ...
  </Column>
  <Column component="li">
    ...
  </Column>
</Columns>

Column: Prevent growing when content width specified
Ensure that when a column width is specified, the column does not grow or shrink. Only a column with no width specified will fluidly adapt to the available space.
Fixes a bug when all Column components have a defined width, a column specifying content width would incorrectly grow to consume the available space.
Columns, Inline: Only respect reverse in combination with collapseBelow
The reverse prop is only respected in combination with collapseBelow. This ensures the content is reversed on the same row, but follows the document order when collapsed.
If content needs to be reversed without collapseBelow then it should be reversed in the document/source order directly.
Stack, Inline, Columns: Widen component support
With Stack, Columns and Inline no longer adding intermediary elements, the component prop can now accept a wider range of elements. Valid options are kept to a white list of elements relevant to Stack that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.

v32.22.0

Aug 9, 2024

Column: Add support for hide above/below breakpoint

Introduce new hideAbove and hideBelow props on column for responsively hiding columns across breakpoint.

These props can be used either separately or in combination to optimise content display across different screen sizes.

EXAMPLE USAGE:

<Columns space="small">
  <Column>
    <Placeholder height={60} label="Always visible" />
  </Column>
  <Column hideBelow="tablet">
    <Placeholder height={60} label="Tablet and above" />
  </Column>
  <Column hideAbove="mobile">
    <Placeholder height={60} label="Mobile Only" />
  </Column>
</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>