Sep 18, 2023
  • Button, ButtonLink: Default to neutral ghost in non-legacy themes

    By default, a button now has a neutral tone and uses the ghost variant, allowing the visual prominence to be increased or decreased as required, enabling colour to be applied as accents and with purpose, rather than by default.

    <Button />
    // => tone="neutral" & variant="ghost"

    To compliment this, when a tone is purposefully applied, the default variant becomes solid to maximise its impact — allowing the visual prominence to be reduced as needed.

    <Button tone="brandAccent" />
    // => tone="brandAccent" & variant="solid"

    No change for apac and seekBusiness consumers

    Given the fundamental change in approach to colour and usage of such a core component, this change has been isolated to newer themes and does not impact apac and seekBusiness consumers.

    These themes will continue to have a tone of formAccent and a solid variant by default, allowing consumers to adopt this new approach as part of the design uplift when migrating to an updated theme, e.g. seekJobs.

Sep 12, 2023
  • Button, ButtonLink: Provide formAccent as the name for undefined tone

    Formalise the name of the undefined tone as formAccent, making it more discoverable as an accent available for increased prominence.

    Note: Consumers should only apply this tone where an action should be emphasized explicitly. The undefined value is still valid for buttons that should follow the default button style of the theme.

    EXAMPLE USAGE:

    <Button tone="formAccent">
      ...
    </Button>
Apr 6, 2023
  • Button, ButtonLink: Align ghost border width with field border width

    Align the border width of ghost variants with the border width of fields. This is the final re-alignment piece to ensure all components use theme scales consistently, improving the ability of Braid themes to deliver cohesive design uplift.

Mar 31, 2023
  • Button, ButtonLink: Improve support for different typographic scales

    Ensure the height of a small sized Button is not reliant on the text line height.

    This enables different typographic scales across themes, while ensuring the Button height is relative.

Mar 9, 2023
  • Button, ButtonLink, TextLink, TextLinkButton: Add support for trailing icons

    Provide support for choosing the position of the icon slot within a Button or TextLink.

    By default, the iconPosition will be leading the label, but optionally, can be set to trailing.

    EXAMPLE USAGE:

    <Button
      icon={<IconArrow direction="right" />}
      iconPosition="trailing"
    >
      Next
    </Button>
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" />
Oct 27, 2022
  • ButtonLink: Allow native data attributes with anchor api

    Disables the validation against the use of data attributes on ButtonLink. Given it exposes the full native anchor tag api, it is not invalid to use the native syntax.

Oct 24, 2022
  • Button, ButtonLink: Improve alignment of transparent buttons with icons against Text with icons

    To improve optical balance of a Button with an icon, the icon container is bled to the left to balance against the larger horizontal inset of a standard button. This alignment correction is now only applied on standard sized buttons that are not using the transparent variant.

    Isolating this alignment correction enables transparent buttons to better align with other components with icon slots, for example:

    <Stack space="small">
      <Text icon={<IconSend />}>Text</Text>
      <Button icon={<IconSend />} variant="transparent" bleed>
        Button
      </Button>
    </Stack>

    Icons and text will now be perfectly aligned between Button components and others icon slots with the same text size.

May 11, 2022
  • Button, ButtonLink: Ensure bleedY is backwards compatibile for transparent variant

    Ensure that bleedY applies bleed only vertically on transparent variant, isolating the new horizontal bleed to the new bleed prop exclusively.

May 10, 2022
  • Button, ButtonLink: Improve Button bleed

    Previously the bleedY prop allowed the background of Button to bleed vertically into the surrounding layout. This worked well for all variants except transparent, which needed to bleed horizontally as well.

    To support this we have introduced the bleed prop which will apply the bleed based on the variant. We have also deprecated bleedY which will be removed in a future release.

    EXAMPLE USAGE:

     <Button
    -  bleedY
    +  bleed
       {...}
     >
       Button
     </Button>

    MIGRATION GUIDE

    Migration from bleedY to bleed can be automated by running the Braid upgrade command, passing the v31.11 version. You must provide a glob to target your project’s source files. For example:

    yarn braid-upgrade v31.11 "**/*.{ts,tsx}"

    It is recommended to visually review the any Button usage with the transparent variant, to ensure the layout is as expected.

Apr 8, 2022
  • Button, ButtonLink: Add icon support

    Provides a designed slot for adding an icon to a Button or ButtonLink

    EXAMPLE USAGE:

    <Button icon={<IconSend />}>{...}</Button>
Nov 23, 2021
  • Button, ButtonLink: Add neutral tone

    Introduces a neutral tone for cases where actions need to be de-emphasised. As a result, there is a breaking change to the contextual design rules that invert buttons in dark containers.

    BREAKING CHANGE:

    A Button with a variant of ghost, soft, or transparent and no specified tone would previously invert when inside a dark container. Now, instead of inverting the foreground colour, these cases will use a lighter version of the default tone, i.e. formAccent.

    MIGRATION GUIDE:

    To maintain previous behaviour, consumers should opt into the neutral tone.

     <Box background="brand" padding="gutter">
    -   <Button variant="ghost">Click</Button>
    +   <Button variant="ghost" tone="neutral">Click</Button>
     </Box>
  • Button, ButtonLink: Remove weight prop

    Removing support for the weight prop. This was deprecated back in v29.26.0 in favour of using the variant prop.

Sep 30, 2021
  • Buttons, Fields, TextLinks, Toggle: Use span for field state overlays instead of div

    Produce more valid HTML as div elements are not as flexible with which elements they can be inside (from a validators perspective).

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

  • Button, ButtonLink, ButtonRenderer: The soft variant now has a solid background colour rather than an opacity. You may need to review any usage on top of coloured backgrounds.

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
  • TextLink, ButtonLink: Add support for ref prop

Feb 15, 2021
  • Button, ButtonLink, ButtonRenderer: Add bleedY prop

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

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

    EXAMPLE USAGE:

    <Inline space="small" alignY="center">
      <Heading level="4">Heading</Heading>
      <Button bleedY>Button</Button>
      <Button bleedY size="small">
        Button
      </Button>
    </Inline>
Feb 11, 2021
  • Button,ButtonLink: Add variant to Button and deprecate weight

    Introduces a new variant prop to Button/ButtonLink giving consumers a single prop to use for selecting the visual style of the button. Choose from solid (default), ghost, soft or transparent. The colour of the button is now consistently controlled via the tone prop, with supported values being "brandAccent", "critical" or undefined.

    As a result the weight prop is now deprecated. See the migration guide below.

    EXAMPLE USAGE:

    <Inline space="small" collapseBelow="desktop">
      <Button>Solid</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="transparent">Transparent</Button>
    </Inline>

    MIGRATION GUIDE: The weight prop is now deprecated. If you are not specifying a weight there is no change required.

    If you are, each weight can be migrated as follows:

    Regular

    Can be replicated with a variant of solid (default).

    -<Button weight="regular">...</Button>
    +<Button variant="solid">...</Button>

    Given it is the default variant, you could also choose to simply remove the weight prop.

    -<Button weight="regular">...</Button>
    +<Button>...</Button>

    Strong

    Can be replicated with a variant of solid (default), with a tone of brandAccent.

    -<Button weight="strong">...</Button>
    +<Button tone="brandAccent">...</Button>

    Weak

    Can be replicated with a variant of ghost.

    -<Button weight="weak">...</Button>
    +<Button variant="ghost">...</Button>
  • Button, ButtonLink: Remove all interactive styles when loading

    No longer applies hover and cursor pointer styles when a Button is set to loading.

Jan 29, 2021
  • Button, ButtonLink, ButtonRenderer, Actions: Add size prop, support small size

    You can now render smaller variants of button/action elements by setting the size prop to small.

    EXAMPLE USAGE

    Small Button

    <Button size="small">Small Button</Button>

    Small Actions

    <Actions size="small">
      <Button>Regular Button</Button>
      <Button weight="weak">Weak Button</Button>
      <TextLink href="#">TextLink</TextLink>
    </Actions>
  • Button, ButtonLink, ButtonRenderer: Reduce horizontal padding of standard size from gutter to medium

Dec 15, 2020
  • Button, ButtonLink, ButtonRenderer: Add support for critical tone

    For destructive actions (e.g. "Delete") you can now provide a tone prop with a value of "critical".

    EXAMPLE USAGE

    <Button tone="critical">
      <IconDelete /> Delete
    </Button>
Oct 6, 2020
  • Loader, Button, ButtonLink, ButtonRenderer: Improve performance of loading animations

    Adjust animations properties and values to reduce CPU recalculation overheads.

Apr 6, 2020
  • Add ButtonLink component

    You can now easily render semantic links that look like Button elements without needing to use the lower level ButtonRenderer.

    This component renders a native a element by default, but this can be customised via the linkComponent prop on BraidProvider.

    Example usage:

    <ButtonLink href="#" weight="strong">
      Submit
    </ButtonLink>