v29.4.0

Minor Changes

• Badge: Add bleedY prop (#743)

  You can now choose to allow the badge’s background colour to bleed out into the surrounding layout, making it easier to align with other elements.

  For example, we can align a badge to a Heading element using an Inline, even though the badge is actually taller than the heading. If we didn’t use the bleedY prop in this case, the badge would introduce unwanted space above and below the heading.

  <Inline alignY="center" space="xsmall">
    <Heading level="4">Heading</Heading>
    <Badge bleedY tone="positive">
      New
    </Badge>
  </Inline>

• Add Dialog component (#746)

  Follows the WAI Aria Dialog (Modal) Pattern.

  EXAMPLE USAGE:

  <Fragment>
    <Actions>
      <Button onClick={() => setOpen(true)}>Open dialog</Button>
    </Actions>
  
    <Dialog title="Dialog Example" id={id} open={open} onClose={setOpen}>
      <Placeholder height={100} width="100%" />
    </Dialog>
  </Fragment>

  See the documentation for an exhaustive list of features.

Patch Changes

• List, BulletList: Ensure list items are full width (#745)

  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.

• ContentBlock: Ensure block is full width (#746)

  Fixes an issue where ContentBlocks inside of flex containers would not grow to their defined max-width.