Button, ButtonLink: Ensure label is vertically centered
Fixes a bug where a ButtonLink label would not be vertically centered inside containers that stretch elements to fill the available space, such as Tiles.
While the issue did not affect Button, the fix was applied to both components to ensure there is no reliance on browser default styling.
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, TextLinkButton: Add aria-label support
Provide support for aria-label, enabling additional context to be given to assistive technologies where context is typically visual.
EXAMPLE USAGE:
<Button aria-label="Save job">Save</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.
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.
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" />
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.
Removes custom icon sizing and layout in favour of new typography icon sizes and layout.
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: Support using as menu trigger
Allow a Button to receive all of the required props for a menu trigger. As a result a Button now accepts onKeyUp, onKeyDown and aria-haspopup.
EXAMPLE USAGE:
<MenuRenderer trigger={triggerProps => ( <Button {...triggerProps}> Button </Button> )} > ... </MenuRenderer>
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.
Button: Add support for ref and tabIndex props
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.
Button: Add aria-controls and aria-expanded props
Drop lodash usage to decrease bundle size.
This directly affects MonthPicker and any components using the data prop:
Only show focus rings on buttons for keyboard navigation.
This impacts the following components:
ButtonButtonRendererOverflowMenuBrowsers automatically show focus rings on buttons when clicking on them, even though (for our purposes, at least) they're undesirable from a visual design perspective and redudant from a UX perspective.
We now automatically hide these focus rings if the user has moved their mouse, indicating that they're not navigating via the keyboard. However, to maintain keyboard accessibility, we reinstate these focus rings whenever the keyboard is used. Most typically, this ensures that you'll see focus rings when tabbing around the UI, even if you've previously used the mouse.
MIGRATION GUIDE
No public APIs are affected by this, but you may find that this causes unit test failues that look like this:
Warning: An update to X inside a test was not wrapped in act(...).
If this is the case, you should replace BraidProvider in your tests with BraidTestProvider.
-<BraidProvider theme={wireframe}> +<BraidTestProvider>