Inline

Stack, Inline: Consumers need to render li elements

When setting component to ul or ol on Stack or Inline, consumers need to ensure they render children as li elements. Previously Braid owned an intermediate HTML element, ensuring it was an li when required. Moving to CSS gap means child elements are no longer being wrapped, requiring consumers to update their child elements to the correct HTML element, e.g. li.

MIGRATION GUIDE:

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.

Migrate to CSS gap internally.

With the browser support policy now enabling adoption of CSS gap, Braid’s layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management.

Previously to enable gap-like behaviour, layout components iterated over their children wrapping them in container elements that applied padding. The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or returned null, requiring developers to hoist logic to the parent component.

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:

Inline: Support using span elements via component prop

Setting the component prop to span will now ensure all elements controlled by Inline 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:

Inline: Prevent overlapping of preceding interactive components

Inline: Add support for semantic list elements

As already featured on Stack, when rendering <Inline component="ul|ol">, its children will be rendered as li elements.

Stack, Inline, Tiles: Flatten fragments when provided as direct children

The following patterns should now work as you might have previously expected:

BREAKING CHANGE

While highly unlikely, if you were using a fragment to group unspaced sibling nodes within a Stack, Inline or Tiles element, you'll need to replace it with a Box, for example:

Inline: Add collapseBelow and reverse props.

Similar to Columns, you can now responsively collapse an Inline into a vertical stack on mobile with the collapseBelow prop.

For example, if you want items to stack vertically below tablet:

Also similar to Columns, you can now reverse the order of items horizontally. This is particularly useful when combined with align="right".

For example, if you're rendering buttons and you want your primary action on the right on desktop, but at the top on mobile:

Inline: Support vertical alignment

Inline

Vertical alignment is now supported via the alignY prop, e.g. <Inline space="small" alignY="center">.

This also supports responsive values, e.g. <Inline space="small" alignY={['center', 'top']}>