v31.6.0

Minor Changes

• Bleed: Add component (#1066)

  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>

• Box, BoxRenderer, atoms: Add support for inset shorthand (#1069)

  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,
  });

• Pagination: Add pageLimit support (#1070)

  Add support for configuring the number of pages displayed using the pageLimit prop. The default is still set to 7, but consumers can now reduce this, useful when Pagination is used inside column layouts.

  In addition, the layout has been stabilised, preventing the links moving when the next/prev actions are shown/hidden.

  EXAMPLE USAGE:

  <Pagination
    ...
    pageLimit={3}
  />

• Columns: Support using span elements via component prop (#1064)

  Setting the component prop to span will now ensure all elements controlled by Columns are spans. This is useful when using layout components inside dom elements that should not contain divs from a HTML validation perspective.

  EXAMPLE USAGE:

  <Columns space="medium" component="span">
    ...
  </Columns>

• Drawer: Support positioning on the left (#1067)

  A Drawer can now enter from and be positioned on the left. The default remains unchanged and will enter from and be docked to the right.

  EXAMPLE USAGE:

  <Drawer
    ...
    position="left"
  />

• Inline: Support using span elements via component prop (#1068)

  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:

  <Inline space="medium" component="span">
    ...
  </Inline>