Stack

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:

Stack, Tiles: Remove divider support

As part of migrating our layout components to leverage flex gap, the Stack & Tiles components no longer iterate over their children, making dividers no longer feasible to implement centrally.

While we could have exposed an API to apply this behaviour conditionally, there are edge cases that cannot be handled correctly without consumer-side rendering logic, such as when child components render nothing or a hidden element.

MIGRATION GUIDE:

For Stacks with static children you can manually interleave Divider components:

Or for conditionally rendering children you can return a [React Fragment], including the Divider and child:

For Stacks with iterable children you can return a [React Fragment] and conditionally render the Divider component as the first child, before each item (except the first):

For Tiles the dividers prop was only applied when showing a single column.

For this you can conditionally render the Divider in a Stack with the same spacing as specified on the Tiles instance, and hide it on breakpoints showing more than one column.

Here is an example of this with static children:

Here is an example of this with iterable children:

Stack: Set default text alignment based on align

As a convenience, the align prop sets the text alignment for the container, meaning any nested Text or Heading components will inherit this alignment by default.

This can be overridden by setting the alignment explicitly on the relevant Text or Heading component.

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.

Stack, Tiles: Deprecate dividers prop

In preparation for migrating Braid layout components to use CSS gap, the dividers prop has been deprecated on Stack and Tiles.

Consumers are encouraged to migrate now in advance of its removal in v33.

Migration Guide

See migration guide for details on how to migrate off the dividers prop.

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:

Stack: Add support for span elements

Stack now supports using span elements for it's markup, this is useful when using layout components inside elements that should not contain a div element, e.g. button.

EXAMPLE USAGE:

Add wide breakpoint of 1200px

This adds support for wide to the following touchpoints:

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:

Stack: Add support for Hidden stack items

You can now responsively hide stack items using the Hidden component while maintaining the correct spacing between all visible elements.

For example, if you wanted to hide a stack item on mobile:

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: