BRAID
Braid Logo
 

Box

v33.10.0

Jul 4, 2025

  • Box, atoms: Add sticky to position.

    EXAMPLE USAGE:

    <Box position="sticky" top={0} ... />

  • Box, atoms: Deprecate outline value none, and boxShadow value outlineFocus.

    Previously it was recommended to hide an element's outline in favour of using boxShadow="outlineFocus".

    Braid now leverages the outline property directly, managing focus rings of interactive elements as part of its scoped CSS reset.

    MIGRATION GUIDE:

    For styling the focus ring via Box:

    1. Remove usage of outline="none" and boxShadow="outlineFocus"
    2. Refer to focus outlines for guidance on leveraging Braid's focus outline styles.
    - <Box outline="none" className={styles.customFocusStyles} />
+ <Box />

    For styling the focus outline of an element based on the focus of another element, see outlineStyle.

v33.0.0

Oct 15, 2024

  • Box, atoms: Add content to maxWidth

    Add the content option to the maxWidth property on the styling atoms. This will ensure an element is only as wide as its content.

    EXAMPLE USAGE:

    <Box maxWidth="content" />

    import { atoms } from 'braid-design-system/css';

atoms({
  maxWidth: 'content',
})

  • Box, atoms: Add responsive gap support

    Add the gap property to the available styling atoms, inclusive of responsive spacing values.

    EXAMPLE USAGE:

    <Box gap="small" />

    import { atoms } from 'braid-design-system/css';

atoms({ gap: 'small' });

v32.10.0

Sep 4, 2023

  • docs: Lighten soft background tokens

    Lighten the brandAccentSoft and formAccentSoft background tokens for the docs theme.

v32.3.0

Apr 6, 2023

  • Box, atoms: Add borderBrandAccent variants to available boxShadows

    Add borderBrandAccent and borderBrandAccentLight to the available boxShadows, combining the brandAccent and brandAccentLight border colours with the standard border width token. Previously, brandAccent was only available with the large border width.

    EXAMPLE USAGE:

    <Box boxShadow="borderBrandAccent" />
{/* or */}
<Box boxShadow="borderBrandAccentLight" />

    import { atoms } from 'braid-design-system/css';

atoms({ boxShadow: 'borderBrandAccent' });
atoms({ boxShadow: 'borderBrandAccentLight' });

v32.2.0

Mar 31, 2023

  • Box, atoms, vars: Add small to border radius scale

    Extends the border radius scale to include small as a step below standard. 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:

    <Box borderRadius="small" />

{/* Or responsively: */}
<Box borderRadius={{ mobile: 'small', tablet: 'standard' }} />

    import { atoms } from 'braid-design-system/css';

atoms({ borderRadius: 'small' })

    import { vars } from 'braid-design-system/css';

const radius = vars.borderRadius.small;

  • 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.19.0

Oct 27, 2022

  • Box, atoms: Remove native buttons on number input field

    Extends the CSS reset behaviour of HTML input fields where type="number" to remove the native increment and decrement buttons.

    EXAMPLE USAGE: The following will now render a HTML input of type number without native buttons:

    <Box component="input" type="number" />

    Additionally, if using the atoms function to build styles, when resetting an input field, the native buttons will also be removed.

    const customClasses = atoms({
  reset: 'input',
  ...
});

v31.18.0

Oct 21, 2022

  • Box: Support custom data prop format for attributes

    While Box already supports the native HTML syntax for data attributes, e.g. data-testid="123", it now supports the data prop too. This allows data attributes to be provided consistently to all components.

    EXAMPLE USAGE:

     <Box
+  data={{ testId: 'myComponent' }}
 />

    The above example results in the following HTML attribute being set on the element: data-testId="myComponent".

v31.6.0

Feb 25, 2022

  • Box, BoxRenderer, atoms: Add support for inset shorthand

    Introduces the inset shorthand as a convenience for applying top, bottom, left and right properties.

    EXAMPLE USAGE:

    <Box position="absolute" inset={0} />

    or

    atoms({
  position: 'absolute',
  inset: 0,
})

v31.2.0

Dec 7, 2021

  • Box: Reset background color on input and select elements

    When specifying a component of input or select the background color was not being reset, falling through to the user agent styles. Reseting it to transparent to ensure predicatble styles across browsers and colour modes.

v31.0.0

Nov 23, 2021

  • Box: Add neutral background variants and new boxShadow border variants

    New backgrounds The following backgrounds are now available:

    • neutralActive
    • neutralHover
    • neutralSoftActive
    • neutralSoftHover

    New boxShadows The following box shadows are now available:

    • borderBrandAccentLightLarge
    • borderCriticalLightLarge
    • borderFormAccentLight
    • borderFormAccentLightLarge

  • Box, atoms, vars: Update theme colour tokens with improved semantics.

    Simplifies the semantics of the colour-based tokens to support upcoming colour mode work. Changes to the property values on backgroundColor and borderColor has flow on affects to the apis on Box and atoms.

    TOKEN CHANGES

    New

    • backgroundColor: surface, neutralSoft
    • borderColor: neutral, neutralInverted, neutralLight

    Removed

    • backgroundColor: card, formAccentDisabled, input, inputDisabled, selection
    • borderColor: formHover, standard, standardInverted

    MIGRATION GUIDE

    Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:

    yarn braid-upgrade v31 "**/*.{ts,tsx}"

    It may be necessary to manually migrate code in some cases, here are the affected use cases:

    Box backgrounds

    - <Box background="card" />
+ <Box background="surface" />

- <Box background="formAccentDisabled" />
+ <Box background="neutralLight" />

- <Box background="input" />
+ <Box background="surface" />

- <Box background="inputDisabled" />
+ <Box background="neutralSoft" />

- <Box background="selection" />
+ <Box background="formAccentSoft" />

    Box boxShadows

    - <Box boxShadow="borderStandard" />
+ <Box boxShadow="borderNeutralLight" />

- <Box boxShadow="borderStandardInverted" />
+ <Box boxShadow="borderNeutralInverted" />

- <Box boxShadow="borderStandardInvertedLarge" />
+ <Box boxShadow="borderNeutralInvertedLarge" />

- <Box boxShadow="borderFormHover" />
+ <Box boxShadow="borderFormAccent" />

    vars

    - vars.borderColor.standard
+ vars.borderColor.neutralLight

- vars.borderColor.standardInverted
+ vars.borderColor.neutralInverted

- vars.borderColor.formHover
+ vars.borderColor.formAccent

    atoms

     atoms({
-  boxShadow: 'borderStandard',
+  boxShadow: 'borderNeutralLight',
 });

 atoms({
-  boxShadow: 'borderStandardInverted',
+  boxShadow: 'borderNeutralInverted',
 });

 atoms({
-  boxShadow: 'borderStandardInvertedLarge',
+  boxShadow: 'borderNeutralInvertedLarge',
 });

 atoms({
-  boxShadow: 'borderFormHover',
+  boxShadow: 'borderFormAccent',
 });

v30.4.0

Aug 20, 2021

  • Box: Add new background and border colours

    New background values:

    • brandAccentSoft
    • brandAccentSoftActive
    • brandAccentSoftHover
    • criticalSoft
    • criticalSoftActive
    • criticalSoftHover
    • formAccentSoft
    • formAccentSoftActive
    • formAccentSoftHover

    New boxShadow values:

    • borderCautionLight
    • borderCriticalLight
    • borderInfoLight
    • borderPositiveLight
    • borderPromoteLight

  • Box, atoms, vars: Add large and xlarge to borderRadius scale

  • apac and seekBusiness themes: Increase size of focus ring (accessed via the boxShadow value of "outlineFocus") and use updated colour palette.

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

  • Box: Remove transform="touchable" in favour of transform={{ active: 'touchable' }}

    MIGRATION GUIDE

    -<Box transform="touchable">
+<Box transform={{ active: 'touchable' }}>

  • 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' }

  • Box, Tag, Toggle: Make borderRadius="full" always circular

    Fixes circular border radius bug where non-square elements would result in an ellipse.

v29.29.0

Feb 23, 2021

  • Box: Support responsive borderRadius

    Adds support for responsive values to borderRadius.

    EXAMPLE USAGE:

    <Box borderRadius={['none', 'standard']}>
  ...
</Box>

v29.28.0

Feb 15, 2021

  • Box: Support value of default on cursor prop

    EXAMPLE USAGE

    <Box cursor="default">...</Box>

v29.26.0

Feb 11, 2021

  • Box: Add borderBrandAccentLarge to boxShadow prop

v29.19.0

Dec 15, 2020

  • Box: Add "criticalActive" and "criticalHover" to background prop

  • Box: Add "borderCriticalLarge" to boxShadow prop

v29.8.0

Oct 1, 2020

  • Box: Add maxWidth prop

    The sizes from ContentBlock are now available at a lower level for more primitive-based layouts.

    EXAMPLE USAGE:

    <Box maxWidth="large">...</Box>

v29.2.0

Aug 14, 2020

  • Box: Added zIndex prop

    The following z-index palette is now available on Box:

    Local stacking

    • 0
    • 1
    • 2

    Global stacking

    • "dropdownBackdrop"
    • "dropdown"
    • "sticky"
    • "modalBackdrop"
    • "modal"
    • "notification"

    EXAMPLE USAGE

    <Box position="fixed" zIndex="sticky">
  ...
</Box>

v28.6.0

Jul 8, 2020

  • Box: Add body background

    You can now use the theme's body background on arbitrary elements within the page.

    EXAMPLE USAGE

    <Box background="body">...</Box>

v25.7.0

May 7, 2020

  • Add zero opacity to Box

    Provide zero opacity on Box as an optimisation.

    Example usage:

    <Box opacity={0}>...</Box>

v25.3.0

Apr 17, 2020

  • Hide native focus rings on Box elements during mouse interactions

v25.2.0

Apr 9, 2020

  • Box: Add support for outline="none"

v24.2.0

Mar 25, 2020

  • Box: Add userSelect="none".

    Box

    You can now set userSelect to "none" directly on Box.

    Since the default value of user-select in CSS is "auto", you can make this value dynamic by conditionally setting it to undefined, e.g. <Box userSelect={selectable ? undefined : 'none'}.