Bleed

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

Bleed: Add data attribute support

EXAMPLE USAGE:

<Bleed data={{ testid: 123 }}>
  ...
</Bleed>

v31.10.0

Apr 13, 2022

Bleed: Support using span elements via component prop
Setting the component prop to span will now ensure all elements controlled by Bleed are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.
EXAMPLE USAGE:
<Bleed space="medium" component="span"> ... </Bleed>

v31.6.0

Feb 25, 2022

Bleed: Add component

Introduce Bleed layout component that allows content to bleed out into the parent layout by a specified amount, useful when a content needs to negate the indent provided by a parent component.

See the documentation and layout guide for more information.

EXAMPLE USAGE:

 <Card>
   <Stack space="gutter">
+    <Bleed horizontal="gutter" top="gutter">
       <Placeholder height={200} label="Header Image" />
+    </Bleed>
     <Heading level="3">Heading</Heading>
     <Text>Text content</Text>
   </Stack>
 </Card>

Braid Logo