List

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" />

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" />

v29.13.0

Oct 29, 2020

List: Add support for icons

Provides a way to use an icon for all the items in a list. When using type="icon" you must also provide the icon prop. See example below:

EXAMPLE USAGE:

<List type="icon" icon={<IconTick tone="positive" />}>
  <Text>This is a list item.</Text>
  <Text>This is a list item.</Text>
  <Text>This is a list item.</Text>
</List>

v29.10.0

Oct 9, 2020

List: Add support for Roman numerals

EXAMPLE USAGE

<List type="roman">
  <Text>This is a Roman list item.</Text>
  <Text>This is a Roman list item.</Text>
  <Text>This is a Roman list item.</Text>
</List>

v29.4.0

Aug 27, 2020

List, BulletList: Ensure list items are full width
Fixes an issue where list content was unable to stretch to the edge of its container. To allow this, we now set the list item container itself to be full width so that content is no longer constrained.

v29.1.1

Aug 10, 2020

List, BulletList: Limit width to 100% of parent

v29.1.0

Aug 7, 2020

Add List component

List serves as a replacement for the BulletList and Bullet components which adds the following improvements:

Support for numbers and alpha characters as bullets
Support for custom start positions in number/alpha lists
Rich content support, e.g. list items with multiple paragraphs, nested lists, etc.

Note: The BulletList and Bullet components have been marked as deprecated and will be removed in an upcoming major release.

MIGRATION GUIDE

If you want to migrate from BulletList to List, you can simply replace BulletList with List, and Bullet with Text:

-<BulletList>
-  <Bullet>...</Bullet>
-  <Bullet>...</Bullet>
-  <Bullet>...</Bullet>
-</BulletList>

+<List>
+  <Text>...</Text>
+  <Text>...</Text>
+  <Text>...</Text>
+</List>