Standardise icon slot spacing
Normalise the space between the icon slot and component content across the system.
Button, ButtonLink: Remove deprecated bleedY prop
Remove the deprecated bleedY prop from the Button and ButtonLink components.
Consumers should use the bleed prop instead, which bleeds based on the selected variant.
<Button - bleedY + bleed {...} > Button </Button>
Improve virtual touch target positioning for narrow elements
To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area. This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.
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"
apac and seekBusiness consumersGiven 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.
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>
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.
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.
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>
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" />
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.
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.
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.
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.
Button, ButtonLink: Add icon support
Provides a designed slot for adding an icon to a Button or ButtonLink
EXAMPLE USAGE:
<Button icon={<IconSend />}>{...}</Button>
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>
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).
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.
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
TextLink, ButtonLink: Add support for ref prop
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>
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:
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>
Can be replicated with a variant of solid (default), with a tone of brandAccent.
-<Button weight="strong">...</Button> +<Button tone="brandAccent">...</Button>
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.
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
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>
Loader, Button, ButtonLink, ButtonRenderer: Improve performance of loading animations
Adjust animations properties and values to reduce CPU recalculation overheads.
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>