Apr 19, 2023
  • Card: Add full height support

    Provide support for making a Card use all available vertical space. This is useful when laying out rows of Card elements and having them all be equal height.

    EXAMPLE USAGE:

    <Card height="full">
      ...
    </Card>
Mar 31, 2023
  • Alert, Card, useToast: Decouple keyline width from space scale

    Previously the keyline width on the left determined its width using the space scale. Re-aligning this to use the grid unit to enable themes with larger space scales.

  • Improve consistency of border radius usage across components

    Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.

    Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.

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" />
Dec 7, 2021
  • Alert, Card, Toast: Improve highlight keyline

    Ensures that components using a highlight keyline have the correct border radius and mask their overflow correctly.

Aug 20, 2021
  • Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale

May 19, 2021
  • Add support for data attribute maps on all components.

    EXAMPLE USAGE:

    <Alert
      data={{
        testId: 'message'
      }}
    />
    
    // => <div data-testId="message" />
Feb 23, 2021
  • Card: Add component support

    The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div (default), article, aside, details, main and section.

    EXAMPLE USAGE:

    <Card component="article">
      ...
    </Card>
  • Card: Add tone support

    Specifying a tone will now add a keyline down the left hand side of the container. The supported tones are promote and formAccent.

    As a result, Cards are now position relative containers.

    EXAMPLE USAGE:

    <Card tone="formAccent">
      ...
    </Card>
  • Card: Add rounded and roundedAbove support

    Card corners can be rounded by providing the rounded prop.

    Alternatively, rounding may be applied responsively using the roundedAbove prop, and providing either mobile or tablet. This enables card edges to be softened on larger screens, but squared off if it runs full bleed on smaller devices.

    EXAMPLE USAGE:

    <Card rounded>
      ...
    </Card>

    or

    <Card roundedAbove="mobile">
      ...
    </Card>