Columns

Columns: Ensure component occupies available height

Enables Columns content to occupy the available height of the parent container.

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:

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.

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:

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.

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:

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:

Column: Enure inner element honours component prop

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:

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:

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:

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: