-
Checkbox,RadioGroup,Toggle: Add
size
support to Checkbox, RadioGroup & Toggle (#928)Adds support for adjusting the
size
of aCheckbox
, the RadioItems within aRadioGroup
or aToggle
. Setting the size adjusts both the visual control and the text size of the label.EXAMPLE USAGE:
<Checkbox size="small" label="Label" />
<RadioGroup size="small" label="Label"> ... </RadioGroup>
<Toggle size="small" label="Label" />
-
Pagination: Add keyline to improve active page indicator contrast (#926)
Improves the contrast of the active page indicator by adding a keyline when
Pagination
is used outside of aCard
.
-
Accordion, AccordionItem: Allow customisation of size, tone, space and dividers. (#925)
Note that, to ensure adequate space for touch targets, the
space
prop only accepts values of"medium"
,"large"
and"xlarge"
.EXAMPLE USAGE
<Accordion size="standard" tone="secondary" space="xlarge" dividers={false}> <AccordionItem label="Accordion item 1">...</AccordionItem> <AccordionItem label="Accordion item 2">...</AccordionItem> <AccordionItem label="Accordion item 3">...</AccordionItem> </Accordion>
- Update capsize dependency (#921)
- Textarea: Highlight excess characters when
characterLimit
is provided (#919)
- Fix type errors in TypeScript v4.2.2 (#915)
- TooltipRenderer: Support usage within
Text
elements (#912)
-
Box: Support responsive
borderRadius
(#910)Adds support for responsive values to
borderRadius
.EXAMPLE USAGE:
<Box borderRadius={['none', 'standard']}>...</Box>
-
Button: Add support for
ref
andtabIndex
props (#905) -
Card: Add
component
support (#910)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
andsection
.EXAMPLE USAGE:
<Card component="article">...</Card>
-
Badge: Add support for
ref
,tabIndex
andaria-describedby
props (#905) -
Card: Add
tone
support (#910)Specifying a
tone
will now add a keyline down the left hand side of the container. The supported tones arepromote
andformAccent
.As a result, Cards are now position relative containers.
EXAMPLE USAGE:
<Card tone="formAccent">...</Card>
-
TextLink, ButtonLink: Add support for
ref
prop (#905) -
Card: Add
rounded
androundedAbove
support (#910)Card corners can be rounded by providing the
rounded
prop.Alternatively, rounding may be applied responsively using the
roundedAbove
prop, and providing eithermobile
ortablet
. 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>
-
Badge: Ensure
ref
,title
,tabIndex
andaria-describedby
props are applied to the visual badge element, not its container element (#908) -
TooltipRenderer: Add arrow to tooltip (#908)
- TextLink, TextLinkButton, TextLinkRenderer: Scope deprecation warning to only be in Actions context. (#903)
-
Box: Support value of
default
oncursor
prop (#901)EXAMPLE USAGE
<Box cursor="default">...</Box>
-
TooltipRenderer: Add
placement
prop, supporttop
andbottom
. Set default placement totop
. (#901)EXAMPLE USAGE
<TooltipRenderer id={id} tooltip={<Text>This is a tooltip!</Text>} placement="bottom" > {({ triggerProps }) => ( <Box aria-label="Help" {...triggerProps}> <IconHelp /> </Box> )} </TooltipRenderer>
-
Button, ButtonLink, ButtonRenderer: Add
bleedY
prop (#900)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>
-
Add TooltipRenderer component (#897)
Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.
Tooltips cannot contain interactive elements like links, buttons or form elements.
Note: The trigger element must support
ref
,tabIndex
andaria-describedby
props.EXAMPLE USAGE
<TooltipRenderer id={id} tooltip={<Text>This is a tooltip!</Text>}> {({ triggerProps }) => ( <Box aria-label="Help" {...triggerProps}> <IconHelp /> </Box> )} </TooltipRenderer>
-
Box: Add
borderBrandAccentLarge
toboxShadow
prop (#893) -
Text, Icons: Add brandAccent tone to Text and Icons (#893)
EXAMPLE USAGE:
<Text tone="brandAccent">...</Text>
-
Button,ButtonLink: Add variant to Button and deprecate weight (#893)
Introduces a new
variant
prop toButton
/ButtonLink
giving consumers a single prop to use for selecting the visual style of the button. Choose fromsolid
(default),ghost
,soft
ortransparent
. The colour of the button is now consistently controlled via thetone
prop, with supported values being"brandAccent"
,"critical"
orundefined
.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 aweight
there is no change required.If you are, each weight can be migrated as follows:
Can be replicated with a
variant
ofsolid
(default).-<Button weight="regular">...</Button> +<Button variant="solid">...</Button>
Given it is the default
variant
, you could also choose to simply remove theweight
prop.-<Button weight="regular">...</Button> +<Button>...</Button>
Can be replicated with a
variant
ofsolid
(default), with atone
ofbrandAccent
.-<Button weight="strong">...</Button> +<Button tone="brandAccent">...</Button>
Can be replicated with a
variant
ofghost
.-<Button weight="weak">...</Button> +<Button variant="ghost">...</Button>
-
TextLink,TextLinkButton: Deprecate inside of Actions in favour of transparent Button (#893)
Usage of
TextLink
orTextLinkButton
inside of anActions
container should now use aButton
with avariant
oftransparent
.Previously when a
TextLink
orTextLinkButton
was placed inside of anActions
container, it would be given a custom layout to align with theButton
elements. We are deprecating this behaviour.MIGRATION GUIDE: Going forward
Actions
should only containButton
elements. To migrate towards this, bothTextLink
andTextLinkButton
should now use either aButtonLink
orButton
respectively, with avariant
ortransparent
.<Actions> <Button>...</Button> - <TextLink href="...">...</TextLink> + <ButtonLink href="..." variant="transparent">...</ButtonLink> </Actions>
<Actions> <Button>...</Button> - <TextLinkButton onClick={...}>...</TextLinkButton> + <Button onClick={...} variant="transparent">...</Button> </Actions>
-
Button, ButtonLink: Remove all interactive styles when loading (#895)
No longer applies hover and cursor pointer styles when a
Button
is set toloading
.
- Tabs: Support fragments and
null
/undefined
as children inTabs
andTabPanels
(#889)
- Add space between page and navigation controls above mobile to improve affordance between the current page and the hover state of surrounding buttons. (#888)
-
Hidden: Add
component
support (#880)You can now customise the DOM element rendered when using
Hidden
. If nocomponent
is specified, it will fall back to the current behaviour — adiv
by default, or aspan
when settinginline
totrue
.EXAMPLE USAGE:
<Hidden component="li">...</Hidden>
-
Pagination: Add component (#880)
EXAMPLE USAGE:
<Pagination label="Search results pagination" page={1} total={20} linkProps={({ page }) => ({ href: `/results?page=${page}`, })} />
- Update dependencies (#883)
-
Button, ButtonLink, ButtonRenderer, Actions: Add
size
prop, supportsmall
size (#879)You can now render smaller variants of button/action elements by setting the
size
prop tosmall
.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 fromgutter
tomedium
(#879)
-
Tabs: Add
divider
prop, supportfull
andnone
(#875)You can now customise the width of the divider line underneath the tab strip. The default value is
minimal
, but you can now set it tofull
ornone
.EXAMPLE USAGE
<TabsProvider id="id"> <Tabs label="Label" divider="full"> <Tab>The first tab</Tab> <Tab>The second tab</Tab> </Tabs> <TabPanels> <TabPanel>...</TabPanel> <TabPanel>...</TabPanel> </TabPanels> </TabsProvider>
- Autosuggest: Ensure input occupies the full width of its container (#872)
-
Add IconMobile and IconDesktop icons. (#867)
-
TextField: Add
prefix
prop (#866)The
prefix
prop allows you to prepend read-only content on the left-hand side of the field. This is typically used for currency symbols, country codes, etc.EXAMPLE USAGE
<TextField prefix="+61" {...rest} />
-
Use JSDoc comments to flag deprecated components (#860)
You will now receive in-editor warnings and migration guidance when using deprecated components.
-
Autosuggest: Fix bug where async suggestions may not be visible (#862)
This fixes a bug where suggestions wouldn't become visible if the
suggestions
prop was initially empty and then populated asynchronously, only becoming visible on the next user interaction, e.g. typing in the field.
-
MenuItem, MenuItemLink: Add support for
critical
tone (#855)For destructive actions (e.g. "Delete") you can now provide a
tone
prop with a value of"critical"
.EXAMPLE USAGE
<OverflowMenu label="Options"> <MenuItem tone="critical" onClick={() => {}}> Delete </MenuItem> </OverflowMenu>
- OverflowMenu, MenuRenderer, MenuItemDivider: Remove horizontal padding (#855)
-
Box: Add
"criticalActive"
and"criticalHover"
tobackground
prop (#851) -
Button, ButtonLink, ButtonRenderer: Add support for
critical
tone (#851)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>
-
Box: Add
"borderCriticalLarge"
toboxShadow
prop (#851)
-
Autosuggest: Add support for custom messages when no suggestions are present (#847)
If no suggestions are available and you'd like to provide an explanation to the user, you can now pass an object with a
messages
property to thesuggestions
prop.EXAMPLE USAGE
<Autosuggest suggestions={{ message: 'No suggestions available.' }} {...restProps} />
-
Checkbox: Support inferring of tri-state checked value (#843)
To simplify the use of tri-state checkboxes, the checked prop now supports resolving the tri-state value from an array of checked values.
EXAMPLE USAGE:
<Checkbox label="Select all" checked={[true, false, false]} // Will resolve to "mixed" />
-
Dropdown: Only show a blank option in the list when the
value
prop is blank and a placeholder isn't present (#846) -
PasswordField: Ensure disabled is handled correctly (#845)
Fixes a bug where the disabled prop was hiding the visibility toggle but leaving the field enabled.
- Fix type definitions for Stack and scroll components (#841)
- Toggle: Fix layout issue when label text wraps to multiple lines (#838)
-
Autosuggest: Add
filterSuggestions
function, allowsuggestions
prop to be a function (#831)The logic for filtering suggestions typically lives on the server rather than the client because it’s impractical to send all possible suggestions over the network. However, when prototyping in Playroom or working with smaller datasets, you may want to perform this filtering on the client instead. For this case, we now provide a
filterSuggestions
function to make this as painless as possible.To better support this behaviour, you can now pass a function to the
suggestions
prop. When executed, this function will be passed the currentvalue
of the field.EXAMPLE USAGE
import { Autosuggest, filterSuggestions } from 'braid-design-system'; <Autosuggest suggestions={filterSuggestions([ { text: 'Apples', value: 1 }, { text: 'Bananas', value: 2 }, ])} {...restProps} />;
-
Checkbox: Add support for mixed state (#822)
A checkbox can now accept a boolean or
mixed
as thechecked
property. Whenmixed
, the checkbox is marked as being in anindeterminate
state and announced asmixed
to a screen reader.EXAMPLE USAGE:
<Checkbox checked="mixed" onChange={handler} label="Label" />
-
Autosuggest: Support custom label text for suggestions (#821)
You can now optionally provide different suggestion text from the value that gets inserted into the text field.
EXAMPLE USAGE
<Autosuggest suggestions={[{ text: 'apples', label: 'Add "apples"' }]} {...restProps} />
- Autosuggest: Forward
ref
prop to input element (#819)
-
Checkbox,RadioGroup,Radio: Fix element type passed to onChange event (#814)
Fixes a bug where the
onChange
event previously received the change event for aform
element rather than aninput
element.
-
List: Add support for icons (#810)
Provides a way to use an icon for all the items in a list. When using
type="icon"
you must also provide theicon
prop. See example below:EXAMPLE USAGE:
<List type="icon" icon={<IconTick tone="positive" />}> <Text>This is a list item.</Text> <Text>This is a list item.</Text> <Text>This is a list item.</Text> </List>
-
RadioGroup,RadioItem: Add RadioGroup & RadioItem components (#807)
The RadioGroup provides an accessible way to group and control a set of RadioItem components. The RadioGroup is responsible for handling the value, tone, message, and disabled state—determining the presentation and selection of the items in the list.
EXAMPLE USAGE:
<RadioGroup id="experience" label="Experience" value="" onChange={() => {}}> <RadioItem label="Less than one year" value="0" /> <RadioItem label="1 year" value="1" /> <RadioItem label="2 years" value="2" /> <RadioItem label="3+ years " value="3" /> </RadioGroup>
-
Tabs: Only scroll tabs when necessary on large screens (#806)
Previously, when there were enough tabs to require horizontal scrolling, we would always scroll the active tab to the left-hand side of the scroll container (with a slight offset). This was primarily designed as a mobile interaction, and in practice was found to be a bit unexpected on large screens.
Instead, when the tabs are scrollable on large screens, we now only scroll the active tab into view if it's partially off-screen or positioned too close to the edge of the scroll container. This ensures that automatic scrolling only occurs when absolutely necessary.
-
Radio,Checkbox: Apply aria-describedby only when needed (#802)
Only apply aria-describedby when needed, e.g. either a message or description is passed.
-
IconVisibility: Simplify visibility icon (#804)
-
TextField,Dropdown,PasswordField,MonthPicker,Textarea: Apply aria-describedby to form elements only when needed (#798)
Only apply
aria-describedby
to form elements when needed, e.g. either amessage
,description
, or an explicitaria-describedby
is passed. -
MonthPicker: Announce semantic grouping of fields and improved translation support. (#798)
When not on a native device, the MonthPicker uses a
fieldset
containing two dropdowns. This change ensures that the grouping is announced correctly. From a translations perspective the labels for the dropdowns are no longer a concatenation of thelabel
andmonthLabel
/yearLabel
, supporting translation of the entire phrase.
-
Autosuggest: Add
hideSuggestionsOnSelection
prop (#792)Typically we hide the suggestion list when a selection is made, assuming that the field is now populated with the desired value. However, if the surrounding application clears the text field when a selection is made, this clashes with the user expectation that the field has been reverted back to its initial state with suggestions visible. To cater for this, we now allow you to opt out of this behaviour via the
hideSuggestionsOnSelection
boolean prop.EXAMPLE USAGE
<Autosuggest hideSuggestionsOnSelection={false} {...rest} />
-
List: Add support for Roman numerals (#788)
EXAMPLE USAGE
<List type="roman"> <Text>This is a Roman list item.</Text> <Text>This is a Roman list item.</Text> <Text>This is a Roman list item.</Text> </List>
-
Radio,Checkbox: Add description and badge support (#786)
Allows a way to provide more detail about a
Radio
orCheckbox
item usingdescription
, bringing these fields into line with the rest of the form fields in Braid. Also allows abadge
to be provided to be placed alongside thelabel
.EXAMPLE USAGE:
<Radio label="Option" description="This option is your favourite" badge={ <Badge tone="positive" weight="strong"> New </Badge> } />
or
<Checkbox label="Option" description="This option is your favourite" badge={ <Badge tone="positive" weight="strong"> New </Badge> } />
-
Loader, Button, ButtonLink, ButtonRenderer: Improve performance of loading animations (#784)
Adjust animations properties and values to reduce CPU recalculation overheads.
-
Toggle: Ensure there is a minimum amount of space between the label and the toggle when using justified alignment (#782)
-
Add Drawer component (#775)
You can now open a modal panel on the right-hand side of the screen, following the WAI Aria Dialog (Modal) Pattern.
See the documentation for more details and interactive examples.
-
Box: Add
maxWidth
prop (#775)The sizes from ContentBlock are now available at a lower level for more primitive-based layouts.
EXAMPLE USAGE:
<Box maxWidth="large">...</Box>
-
Dialog: Fix close button to the corner of the dialog when scrolling (#775)
-
Autosuggest, Dialog: Lighten backdrop opacity from 0.7 to 0.4 (#775)
-
FieldLabel: Add descriptionId prop (#766)
EXAMPLE USAGE:
<FieldLabel htmlFor="id" label="This is a field label" description="Extra info about the field" descriptionId="id-description" />
- TextField, PasswordField, Textarea, Autosuggest, Dropdown, MonthPicker: Add decription to aria-describedby (#766)
-
HiddenVisually: Add support for passing IDs (#757)
This is useful when mapping a
HiddenVisually
component toaria-describedby
EXAMPLE USAGE:
<HiddenVisually id="my-hidden-desciption">Hidden desciption</HiddenVisually>
-
Autosuggest: Add translations prop to enable internationalisation (#757)
-
Autosuggest: Improve screen reader experience (#757)
Add description informing user that suggestions will appear below field. Also, notify users about how many suggestions are available, and about automatic selections.
-
TextField, PasswordField, Textarea, Dropdown: Add support for multiple field descriptions (#757)
Previously, if a custom
aria-describedby
prop was passed, it would take precedence over themessage
prop, which also usesaria-describedby
. Both descriptions can now be applied at the same time.
- MenuRenderer, OverflowMenu: Fix circular dependency issue (#761)
-
Add MenuItemDivider component (#751)
You can now place visual separators between groups of menu items when using OverflowMenu/MenuRenderer.
EXAMPLE USAGE
<OverflowMenu label="Options"> <MenuItem onClick={() => {}}>Button</MenuItem> <MenuItemLink href="#">Link</MenuItemLink> <MenuItemDivider /> <MenuItem onClick={() => {}}>Another button</MenuItem> </OverflowMenu>
-
Add MenuItemCheckbox component (#751)
You can now render checkboxes within OverflowMenu/MenuRenderer elements.
EXAMPLE USAGE
<OverflowMenu label="Checklist"> <MenuItemCheckbox checked={true} onChange={() => {}}> Checkbox 1 </MenuItemCheckbox> <MenuItemCheckbox checked={false} onChange={() => {}}> Checkbox 2 </MenuItemCheckbox> <MenuItemCheckbox checked={false} onChange={() => {}}> Checkbox 3 </MenuItemCheckbox> </OverflowMenu>
-
Loader: Add support for
aria-label
(#752)Provides a mechanism for consumers to better communicate to assistive technologies what is happening.
EXAMPLE USAGE:
<Loader aria-label="Loading search results" />
- Autosuggest: Update to ARIA 1.2 combobox spec (#754)
-
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.
-
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
ContentBlock
s inside of flex containers would not grow to their definedmax-width
.
-
Badge: Allow custom title text (#738)
EXAMPLE USAGE
<Badge tone="positive" title="3 new jobs"> 3 </Badge>
-
Improved server rendering of Tabs (#737)
Previously,
Tab
andTabPanel
components only showed their content and active states after the first render, which meant server rendering was not ideal. Active Tabs and TabPanel content can now be server rendered. Uncontrolled usages of Tabs should just work.For controlled Tabs using the
selectedItem
prop, you now need to pass theitem
prop (already onTab
) toTabPanel
as well.<TabsProvider id="id" selectedItem="second"> <Tabs label="Test tabs"> <Tab item="first">The first tab</Tab> <Tab item="second">The second tab</Tab> <Tab item="third">The third tab</Tab> </Tabs> <TabPanels> - <TabPanel> + <TabPanel item="first"> <Placeholder height={200} label="Panel 1" /> </TabPanel> - <TabPanel> + <TabPanel item="second"> <Placeholder height={200} label="Panel 2" /> </TabPanel> - <TabPanel> + <TabPanel item="third"> <Placeholder height={200} label="Panel 3" /> </TabPanel> </TabPanels> </TabsProvider>
-
ContentBlock: Add support for xsmall & small widths (#735)
EXAMPLE USAGE
<ContentBlock width="small">...</ContentBlock>
-
OverflowMenu, MenuRenderer: Assert that all child nodes are valid menu items (#731)
In order to maintain accessibility, we now throw assertion errors in development if any child node within an OverflowMenu or MenuRenderer component is not a MenuItem/MenuItemLink.
- Loader: Fix rendering issues due to browser rounding errors (#728)
-
Box: Added
zIndex
prop (#726)The following z-index palette is now available on
Box
:Local stacking
0
1
2
Global stacking
"dropdownBackdrop"
"dropdown"
"sticky"
"modalBackdrop"
"modal"
"notification"
EXAMPLE USAGE
<Box position="fixed" zIndex="sticky"> ... </Box>
-
TabPanels: Add
renderInactivePanels
prop (#722)By default, the children of
TabPanel
components are only rendered when they are selected. However, in cases where you want to preserve local component state when switching tabs, this behaviour is undesirable. SettingrenderInactivePanels
will cause theTabPanel
children to be rendered even when visually hidden.Note: This is not a visual change, the panels will still be hidden from the user.
e.g.
<TabsProvider selectedItem={0}> <Tabs> <Tab>First</Tab> <Tab>Second</Tab> </Tabs> <TabPanels renderInactivePanels> <TabPanel> <Text>Tab 1</Text> </TabPanel> <TabPanel> {/* This TabPanel is hidden but still in the DOM */} <Text>Tab 2</Text> </TabPanel> </TabPanels> </TabsProvider>
-
Added support for refs on Link (#725)
Forwarding refs is necessary for certain accessibility patterns (e.g. managing focus states), but the
Link
component wasn't doing this correctly.Please note that, if you're passing a custom
linkComponent
implementation to BraidProvider, you'll need to ensure that you're using the newmakeLinkComponent
helper function to forward refs, otherwise any attempt to pass a ref toLink
will throw an error.MIGRATION GUIDE
-import { BraidProvider, LinkComponent } from 'braid-design-system'; +import { BraidProvider, makeLinkComponent } from 'braid-design-system'; -const CustomLink: LinkComponent = ({ href, ...restProps }) => +const CustomLink = makeLinkComponent({ href, ...restProps }, ref) => href[0] === '/' ? ( - <ReactRouterLink to={href} {...restProps} /> + <ReactRouterLink to={href} {...restProps} ref={ref} /> ) : ( - <a href={href} {...restProps} /> + <a href={href} {...restProps} ref={ref} /> ); export const App = () => ( <BraidProvider linkComponent={CustomLink} {...rest}> ... </BraidProvider> );
-
Link: Fixed types for
className
prop to support the full classnames API (#725)You can now pass arrays and objects to the
className
prop onLink
without type errors.For example:
<Link href="#" className={[ 'someClass', ['anotherClass', 'yetAnotherClass'], { someConditionalClass: someBoolean }, ]} > ... </Link>
-
Added MenuItemLink component (#725)
You can now render semantic links within menu components, e.g. OverflowMenu, MenuRenderer
For example:
<OverflowMenu label="Options"> <MenuItem onClick={() => {}}>Button</MenuItem> <MenuItemLink href="...">Link</MenuItemLink> </OverflowMenu>
Note that links are rendered internally using Link. If you want to customise the rendering of these links, you need to provide a custom
linkComponent
implementation to BraidProvider.
- Change SEEK Business formAccent token to match Seek ANZ (#718)
- List, BulletList: Limit width to 100% of parent (#715)
-
Add
List
component (#710)List
serves as a replacement for theBulletList
andBullet
components which adds the following improvements:- Support for numbers and alpha characters as bullets
- Support for custom start positions in number/alpha lists
- Rich content support, e.g. list items with multiple paragraphs, nested lists, etc.
Note: The
BulletList
andBullet
components have been marked as deprecated and will be removed in an upcoming major release.MIGRATION GUIDE
If you want to migrate from
BulletList
toList
, you can simply replaceBulletList
withList
, andBullet
withText
:-<BulletList> - <Bullet>...</Bullet> - <Bullet>...</Bullet> - <Bullet>...</Bullet> -</BulletList> +<List> + <Text>...</Text> + <Text>...</Text> + <Text>...</Text> +</List>
-
TextLink, TextLinkButton, TextLinkRenderer: Default
weight
prop to"regular"
when nested inside secondary text (#714)As of v28.13.0,
TextLink
components that were nested inside secondary text would be"weak"
by default, i.e. the same tone as the surrounding text and underlined. In practice, this turned out to be somewhat unpredictable behaviour for consumers. We've now reverted this to the previous behaviour of being"regular"
weight by default, i.e. blue and medium font weight.Note that, if needed, you can still use the weaker link treatment within secondary text via an explicit prop override:
<Text tone="secondary"> The TextLink in this sentence is{' '} <TextLink href="..." weight="weak"> weak. </TextLink> </Text>
- AccordionItem: Prevent Safari from clipping label text (#712)
- Throw meaningful error when using 'BraidProvider' in unit tests (#707)
-
Improved trimming of white space around text (#696)
Migrated from our custom Basekick implementation to 🛶 Capsize to more accurately trim the white space around text. This will have subtle white space changes throughout the UI, but will largely just be improvements to the balance of space around text.
BREAKING CHANGES
Heading/Text: Removed LEGACY_SPACE
The
_LEGACY_SPACE_
prop was provided to support consumers migrating tov14
when the white space cropping and layout components were originally introduced. This has now been removed to allow us to further improve on our approach.Migrating off this prop will require consumers to perform the following steps:
- Remove the usage of
_LEGACY_SPACE_
on a component - Conduct a visual review of the impact (component will appear closer to neighbouring elements)
- Use existing layout components, e.g.
Stack
, to define/control the reintroduction of the desired space.
Any issues, please reach out to the team as we are happy to help support consumers in migrating.
Theme Tokens: Text and Heading definitions
There have been strutural theme changes for
heading
andtext
definitions to support the defining ofcapHeight
in the system. Previously a definition containedsize
that was the specified font size inclusive of surrounding white space.A definition now has
capHeight
which is representative of the visual height, supporting improved alignment with other elements like, icons etc.{ text: { standard: { mobile: { - size: 16, + capHeight: 11.43, rows: 6 } } } }
This is not likely to affect consumers, unless these theme values are used explicitly in custom treat files.
Theme Tokens: Descender and Cap Height scales
Instead of the calculated values of
capHeightScale
anddecenderHeightScale
, a theme now acceptsfontMetrics
—a structure that represents the metadata from the font itself.-const capHeight = 24 * theme.typography.capHeightScale; +const capHeight = 24 * (theme.typography.fontMetrics.capHeight / theme.typography.fontMetrics.unitsPerEm);
-const descender = 24 * theme.typography.decenderHeightScale; +const descender = 24 * (Math.abs(theme.typography.fontMetrics.descent) / theme.typography.fontMetrics.unitsPerEm);
- Remove the usage of
- Fix type error in Textarea formatRanges (#706)
-
Add Notification icon (#702)
-
Add useBreakpoint (#700)
useBreakpoint
will return the breakpoint the browser viewport currently falls within (mobile, tablet or desktop). As this can only be calculated in the browser, the value may also be null. Window resizing is supported.Note: Avoid use of this hook where possible. Responsive properties and media queries are a better option in most cases.
-
TextLink, TextLinkButton: Add
weight
prop, addweak
weight variant (#697)You can now render links that are underlined while inheriting the tone and weight of its surrounding text.
EXAMPLE USAGE
<Text> This sentence contains a{' '} <TextLink href="..." weight="weak"> weak TextLink. </TextLink> </Text>
-
seekBusiness
theme: Inherit from newapac
theme rather than the deprecatedseekAnz
theme (#694)Just like the migration from
seekAnz
toapac
, the visual changes are as follows:- The body background has changed from
#eeeeee
to#f5f6f8
. - All grey colours now have a hint of blue.
- Buttons and form fields have decreased in height from
48px
to44px
. - Border radiuses have increased from
2px
to4px
.
It's possible that your application has custom design elements that depend on these older values in order to look correct. It's also possible that your application is part of a broader user journey that makes use of these older design standards. As a result, a design review is highly recommended.
- The body background has changed from
- Inline: Prevent overlapping of preceding interactive components (#692)
-
TextLinkButton: Pass click event object to
onClick
handler (#688)The
onClick
handler was previously called without any arguments. We now pass the click event object through as expected.
-
Button: Add
aria-controls
andaria-expanded
props (#686) -
Add
Disclosure
component (#686)This component serves as a replacement for
ToggleContent
from SEEK Style Guide.SEEK STYLE GUIDE MIGRATION GUIDE
ToggleContent
has been renamed toDisclosure
.- The
onShowMore
prop has been renamed toonToggle
. - The spacing around the button has changed to follow Braid's layout guidelines. Design review is recommeded.
-<ToggleContent onShowMore={(expanded) => { ... }} {...rest}> +<Disclosure onToggle={(expanded) => { ... }} {...rest}>
-
TextLinkButton: Add
aria-controls
,aria-describedby
andaria-expanded
props (#686)
-
Add
TextLinkButton
component (#683)Allows you to render a semantic button that looks like a
TextLink
.This component renders a native
span
element with an ARIA role ofbutton
so that, unlike a standard button element, text can wrap across multiple lines.
- Add IconLanguage (#680)
-
Introduce
apac
theme (#676)The
seekAnz
theme has always been held back by the need to maintain visual consistency with SEEK Style Guide.In order to provide a path forwards, this release introduces a new
apac
theme, giving teams the opportunity to adopt newer design standards while still providing theseekAnz
theme as a backwards compatibility layer.Consumers of the
seekAnz
theme are under no immediate pressure to migrate and both themes will be provided for the forseeable future. For now, this theme is aimed at those teams that are explicitly wanting to adopt newer design standards.The visual changes to
seekAnz
are as follows:- The body background has changed from
#eeeeee
to#f5f6f8
. - All grey colours now have a hint of blue.
- Buttons and form fields have decreased in height from 48px to 44px.
- Border radiuses have increased from 2px to 4px.
It's possible that your application has custom design elements that depend on these older values in order to look correct. It's also possible that your application is part of a broader user journey that makes use of these older design standards. As a result, a design review is highly recommended.
This release also signifies that the
seekUnifiedBeta
theme is coming out of beta. Any references to this theme should be replaced withapac
. As withseekAnz
, both themes will be provided for the timebeing to give you an opportunity to migrate.EXAMPLE USAGE
import apac from 'braid-design-system/themes/apac'; <BraidProvider theme={apac}>
<BraidLoadableProvider themeName="apac">
- The body background has changed from
-
Box: Add
body
background (#677)You can now use the theme's body background on arbitrary elements within the page.
EXAMPLE USAGE
<Box background="body">...</Box>
-
MonthPicker: Support custom month and year labels (#672)
To support internationalisation, you can now pass the following props to
MonthPicker
:- monthLabel (
string
) - yearLabel (
string
) - monthNames (
string[]
)
- monthLabel (
-
Expose docs theme (#670)
In order to support internal documentation sites that leverage Braid, we're now exposing a
docs
theme.import docsTheme from 'braid-design-system/themes/docs';
-
Add Tabs component (#666)
Follows the WAI Aria Tabs Pattern.
EXAMPLE USAGE:
<TabsProvider id="id"> <Stack space="medium"> <Tabs label="Label"> <Tab>The first tab</Tab> <Tab>The second tab</Tab> <Tab badge={<Badge tone="positive">New</Badge>}>The third tab</Tab> </Tabs> <TabPanels> <TabPanel>...</TabPanel> <TabPanel>...</TabPanel> <TabPanel>...</TabPanel> </TabPanels> </Stack> </TabsProvider>
-
Autosuggest: Fix suggestion double tap bug on iOS (#668)
Tapping a suggestion on iOS triggers the hover state rather than a selection, forcing users to tap a second time to select the suggestion.
This is due to the way that iOS simulates mouse events in a touch environment. If the document is updated during a
mouseover
,mouseenter
ormousemove
event, the subsequentclick
event is never fired. While it may seem counterintuitive, this ensures that touch users are able to see hover effects that make changes to the page.To fix this, we now trigger our suggestion hover logic on
touchstart
so that the document doesn't change during mouse events, which then allows theclick
event to fire uninterrupted.
-
Fix CSS ordering issue in production mode (#664)
Files within the top-level
themes
directory were not correctly marked as side effects which meant that, when importing frombraid-design-system/themes/*
, the CSS order could differ between development and production.
-
useToast: Add deduplication of toasts (#662)
Passing
key
when creating new toasts will now remove existing Toasts on screen with the samekey
before adding the new Toast. This is useful when a toast is created as part of a repeatable process that happens frequently.const showToast = useToast(); showToast({ message: 'There can only be one of me', tone: 'positive', key: 'deduped', });
-
Inline: Add support for semantic list elements (#654)
As already featured on
Stack
, when rendering<Inline component="ul|ol">
, its children will be rendered asli
elements.
-
Hide icons from screen readers that have no title (#656)
Icons are mostly used for decorative purposes and as such are now hidden from screen readers unless providing a
title
. In this case, an Icon is identified as an image.
-
Alert, Notice: Support rich content (#647)
BREAKING CHANGE
Since
Alert
andNotice
no longer render aText
component for you, you'll need to ensure that you're providing an enclosingText
element as a direct child.Alert:
<Alert tone="positive"> - Success! + <Text>Success!</Text> </Alert>
Notice:
<Notice tone="positive"> - Success! + <Text>Success!</Text> </Notice>
WHY?
The Alert and Notice components were originally designed to render a single paragraph of text, but in practice we've found that there's a lot of demand for richer content, e.g. multiple paragraphs, bullet lists, etc.
In order to support this level of flexibility,
Alert
andNotice
no longer render an enclosingText
component for you. While this means you'll need a bit more boilerplate in simple cases, it also means you now have much more fine-grained control over the layout.For example, if you wanted to render an
Alert
using bothText
andBulletList
with"medium"
space between them:<Alert tone="positive"> <Stack space="medium"> <Text>The quick brown fox jumps over the lazy dog.</Text> <BulletList space="small"> <Bullet>Bullet 1</Bullet> <Bullet>Bullet 2</Bullet> </BulletList> </Stack> </Alert>
This same pattern applies to
Notice
:<Notice tone="positive"> <Stack space="medium"> <Text>The quick brown fox jumps over the lazy dog.</Text> <BulletList space="small"> <Bullet>Bullet 1</Bullet> <Bullet>Bullet 2</Bullet> </BulletList> </Stack> </Notice>
-
MonthPicker: Fix internal
<Hidden screen>
deprecation warning (#650)The
MonthPicker
component was mistakenly using<Hidden screen>
to provide labels to screen readers rather than the newHiddenVisually
component. As a result, deprecation warnings were being logged in the console during development.
-
Use
assert
for runtime assertions during development (#624)Please ensure you are on sku v10.3.0 or higher so that these assertions are removed in production. This ensures that these checks don't have a negative performance impact on users.
The main driver for this change is to ensure that runtime design validation occurs within the Braid Playroom.
Playroom is built in production mode to maximise performance, but this means that our custom development-time validation code isn't being executed. As a result, it's becoming increasingly common for prototypes to contain invalid code that only throws an error when transposed into a proper development environment. This change ensures that invalid designs are caught as early as possible.
-
Improve field border contrast ratio (#638)
To improve accessibility, field borders have been darkened for the following themes:
seekAnz
seekBusiness
seekUnifiedBeta
catho
(based on referencing Quantum)
Since this is a noticeable visual change that may introduce inconsistincies with custom design elements, design review is recommended.
-
Toggle: Hide border on dark backgrounds (#638)
In order to reduce visual noise, similar to other fields, we now hide the border on
Toggle
elements when rendered on dark backgrounds. -
Dropdown: Lighten chevron when disabled (#638)
The visual prominence of the chevron icon is now lower when
disabled
is set totrue
. -
Autosuggest: Apply darker background when disabled (#638)
When disabled,
Autosuggest
elements didn't have the same dark background as other disabled fields. This has now been fixed.
-
Add
HiddenVisually
component (#643)You can now easily provide content to assistive technologies while hiding it from the screen.
<Text> This content is available to everyone. <HiddenVisually> This content is only available to screen readers. </HiddenVisually> </Text>
-
Hidden: Infer
inline
prop when nested inside Text or Heading (#643)Currently, if you want to hide content using the
Hidden
component in an inline context (e.g. hiding part of a sentence), you need to remember to set theinline
boolean prop.Since most usages of this feature are within text, we now infer this for you automatically within the context of a
Text
orHeading
component.MIGRATION GUIDE
This change is not strictly required, but you can now clean up your code like this:
-<Text>The end of this sentence is... <Hidden inline below="tablet">hidden on mobile.</Hidden> +<Text>The end of this sentence is... <Hidden below="tablet">hidden on mobile.</Hidden>
-
MonthPicker: Preserve touchable height on iOS (#641)
Fix for the native variant of
MonthPicker
having a reduced height on iOS when no value is provided.
-
Stack: Add support for Hidden stack items (#632)
You can now responsively hide stack items using the
Hidden
component while maintaining the correct spacing between all visible elements.For example, if you wanted to hide a stack item on mobile:
<Stack space="small"> <Text>...</Text> <Hidden below="tablet"> <Text>...</Text> </Hidden> <Text>...</Text> </Stack>
-
seekAnz, seekBusiness, seekUnifiedBeta: Change critical colour to red (#634)
As part of the colour uplift work, this updates the
critical
colour in theseekAnz
(and subsequentlyseekBusiness
andseekUnifiedBeta
) theme from pink to red. This brings the theme into line with our colour usage guide documented under Tones on the website.BREAKING CHANGE While not technically a breaking change, you may want to review usage of the
critical
tone in your application, particularly in custom scenarios, for example:<Box background="critical">...</Box>
or
<Box background="criticalLight">...</Box>
<Icon tone="critical">...</Icon>
or
<Text tone="critical">...</Text>
-
Stack, Inline, Tiles: Flatten fragments when provided as direct children (#626)
The following patterns should now work as you might have previously expected:
<Stack space="small"> <React.Fragment> <Text>...</Text> <Text>...</Text> </React.Fragment> <Text>...</Text> </Stack>
<Inline space="small"> <React.Fragment> <Badge>...</Badge> <Badge>...</Badge> </React.Fragment> <Badge>...</Badge> </Inline>
<Tiles space="small" columns={3}> <React.Fragment> <Card>...</Card> <Card>...</Card> </React.Fragment> <Card>...</Card> </Tiles>
BREAKING CHANGE
While highly unlikely, if you were using a fragment to group unspaced sibling nodes within a
Stack
,Inline
orTiles
element, you'll need to replace it with aBox
, for example:<Stack space="small"> ... - <React.Fragment> + <Box> <Box>...</Box> <Box>...</Box> - <React.Fragment> + </Box> ... </Stack>
<Inline space="small"> ... - <React.Fragment> + <Box> <Box>...</Box> <Box>...</Box> - <React.Fragment> + </Box> ... </Inline>
<Tiles space="small" columns={3}> ... - <React.Fragment> + <Box> <Box>...</Box> <Box>...</Box> - <React.Fragment> + </Box> ... </Tiles>
-
TextField, Autosuggest, PasswordField: Improved support for field buttons with browser extensions. (#625)
The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.
Affects the following components:
- PasswordField: visibility toggle button
- TextField: clear button
- Autosuggest: clear button
-
Textarea: Fix border radius on dark backgrounds (#625)
When rendering a
Textarea
on a background other than white, the field background extended out beyond the field's border radius. -
TextField, Autosuggest, PasswordField: Prevent field buttons firing on right click (#625)
Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.
Affects the following components:
- PasswordField: visibility toggle button
- TextField: clear button
- Autosuggest: clear button
-
Add zero opacity to Box (#621)
Provide zero opacity on
Box
as an optimisation.Example usage:
<Box opacity={0}>...</Box>
-
Add PasswordField component (#620)
Provides a password field complete with visibility toggle to switch between a masked and unmasked field value.
-
Autosuggest: Support suggestion descriptions (#613)
You can now provide a
description
as part of each suggestion item, e.g.:<Autosuggest suggestions={[ { text: 'Apples', value: 123, description: 'Juicy and delicious', }, ]} {...rest} />
- Autosuggest: Don't select suggestions onBlur when using automaticSelection and suggestions are closed (#609)
-
AccordionItem: Support
onToggle
prop withoutexpanded
to allow tracking in uncontrolled mode (#605)For example:
<AccordionItem id="id" label="Label" onToggle={expanded => trackSomething(expanded)} > ... </AccordionItem>
- Autosuggest: When using the
automaticSelection
prop, we now prevent automatic selection from ocurring if the input value hasn't changed since focusing the field (#601)
-
Inline: Add
collapseBelow
andreverse
props. (#593)Similar to Columns, you can now responsively collapse an
Inline
into a vertical stack on mobile with thecollapseBelow
prop.For example, if you want items to stack vertically below tablet:
<Inline space="small" collapseBelow="tablet"> ... </Inline>
Also similar to
Columns
, you can now reverse the order of items horizontally. This is particularly useful when combined withalign="right"
.For example, if you're rendering buttons and you want your primary action on the right on desktop, but at the top on mobile:
<Inline space="small" collapseBelow="tablet" align="right" reverse> <Button>Primary action</Button> <Button weight="weak">Secondary action</Button> </Inline>
-
Columns: Add
align
prop (#593)When collapsing columns into a vertical stack on smaller screens, you can now control the alignment.
For example, if you want your columns to be horizontally centred on mobile:
<Columns space="small" collapseBelow="tablet" align="center"> <Column>...<Column> <Column>...<Column> <Column>...<Column> </Columns>
As a side effect, this also means that you can control the alignment of columns when the total width doesn't reach 100%.
For example:
<Columns space="small" align="center"> <Column width="1/3">...<Column> <Column width="1/3">...<Column> </Columns>
-
Add TextDropdown component (#594)
An inline dropdown that can be used as part of a sentence or as an alternative to
Dropdown
, outside of a more structured form.Inherits its styling from the parent typographic component, and as such must be used nested within either a
Text
orHeading
component.Example usage:
const [jobTitle, setJobTitle] = useState('Developer'); <Text> <TextDropdown id="jobTitle" label="Job Title" value={jobTitle} onChange={setJobTitle} options={['Developer', 'Designer', 'Product Manager']} /> </Text>;
- Hide native focus rings on Box elements during mouse interactions (#589)
-
Theme: Introduce the Catho theme (#550)
Adds support to build product for the Catho market. This theme is an adaption of the Quantum Design System.
-
Add
Accordion
andAccordionItem
components (#587)Example usage:
<Accordion> <AccordionItem id="item_1" label="Accordion item 1"> <Text>Accordion item content</Text> </AccordionItem> <AccordionItem id="item_2" label="Accordion item 2"> <Text>Accordion item content</Text> </AccordionItem> <AccordionItem id="item_3" label="Accordion item 3"> <Text>Accordion item content</Text> </AccordionItem> </Accordion>
Accordions manage their own state internally by default. If you'd like to take control of them yourself, you can pass an
expanded
prop toAccordionItem
as well as anonToggle
callback.const [expanded, setExpanded] = useState(false); <AccordionItem id="id" label="Accordion item" expanded={expanded} onToggle={setExpanded} > <Text>Accordion item content</Text> </AccordionItem>;
-
Box: Add support for
outline="none"
(#587)
-
Drop lodash usage to decrease bundle size. (#585)
This directly affects
MonthPicker
and any components using thedata
prop:- All field components
- OverflowMenu
- MenuRenderer
- Button
-
Add ButtonLink component (#581)
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 thelinkComponent
prop on BraidProvider.Example usage:
<ButtonLink href="#" weight="strong"> Submit </ButtonLink>
-
BraidProvider: Add
linkComponent
prop to customise link rendering. (#574)If you'd like to customise the technical implementation of all
Link
andTextLink
components from Braid, you can now pass a custom component to thelinkComponent
prop onBraidProvider
. For example, if you wanted to ensure that all relative links are React Router links:import React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import { BraidProvider, LinkComponent } from 'braid-design-system'; import wireframe from 'braid-design-system/themes/wireframe'; // First create the custom link implementation: const CustomLink: LinkComponent = ({ href, ...restProps }) => href[0] === '/' ? ( <ReactRouterLink to={href} {...restProps} /> ) : ( <a href={href} {...restProps} /> ); // Then pass it to BraidProvider: export const App = () => ( <BraidProvider theme={wireframe} linkComponent={CustomLink}> ... </BraidProvider> );
In order to make your custom link component available for any type of link (not just usages of
TextLink
), this release introduces a newLink
component which renders an unstyleda
tag by default.BREAKING CHANGES
-
TextLink
now requires anhref
prop. Even though this is unlikely to affect anyone (aTextLink
without anhref
isn't terribly useful), this is still technically a breaking change.However, if you find an instance of
TextLink
that you think shouldn't have anhref
, this is a sign that it's not actually a link and you should use aTextLinkRenderer
instead. Unfortunately, because there's no way for us to know the semantics of your usage ahead of time, we're unable to provide a migration guide, so you'll need to be mindful of how this might impact accessibility. -
The props for
TextLink
now extend React'sAnchorHTMLAttributes<HTMLAnchorElement>
type rather thanAllHTMLAttributes<HTMLAnchorElement>
. While highly unlikely, this may cause type errors if you've passed props toTextLink
that aren't considered to be valid anchor props.
-
-
Themes: Fix OCC theme export (#576)
The
braid-design-system/themes/occ
theme export is now exposed correctly.
- Divider: Rename 'standard' weight to 'regular'. (#572)
-
Divider: Add strong weight variant, e.g.
<Divider weight="strong">
. (#569)Note that this also affects the
dividers
prop on bothStack
andTiles
, e.g.<Stack space="medium" dividers="strong">
. You can still pass a boolean prop if you want to render the default divider styling, e.g.<Stack space="medium" dividers>
, so this change is backwards compatible.
- Update deprecated treat imports (#566)
-
Theme: Introduce the OCC theme (#547)
Adds support to build product for the OCC market. This theme is an adaption of the Atomic Design System.
-
Inline: Support vertical alignment (#562)
Inline
Vertical alignment is now supported via the
alignY
prop, e.g.<Inline space="small" alignY="center">
.This also supports responsive values, e.g.
<Inline space="small" alignY={['center', 'top']}>
-
Box: Add
userSelect="none"
. (#556)Box
You can now set
userSelect
to"none"
directly onBox
.Since the default value of
user-select
in CSS is"auto"
, you can make this value dynamic by conditionally setting it toundefined
, e.g.<Box userSelect={selectable ? undefined : 'none'}
.
-
Textarea: Fix trailing new line highlight issue (#555)
BUG FIXES
Textarea
Fix for
highlightRanges
, where the highlights could get out of sync with the field value, if the value contained trailing new lines.
-
Checkbox & Radio: Only add aria-describedby when a message is provided (#542)
BUG FIXES
Checkbox
&Radio
Both of these inputs were previously always adding the
aria-describedby
attribute, while conditionally rendering themessage
only when provided. This meant that elements without amessage
would be indicating that they are described by an element that does not exist.
-
Tiles: Honour column width for non-breaking content. (#537)
BUG FIXES
Tiles
The column width of a tile was not being honoured when its child elements contained non-wrapping/breaking content.
-
MenuRenderer: Add support for configuring the menu offset from the trigger (#532)
FEATURES
MenuRenderer
Configure the offset distance between the menu trigger and menu using the
offsetSpace
prop. As with all space values in the system, this accepts a responsive prop.<MenuRenderer + offsetSpace="small" trigger={(triggerProps, { open }) => ( <button {...triggerProps}>Menu</button> )} > <MenuItem onClick={...}>Option</MenuItem> </MenuRenderer>
-
Add customisable
MenuRenderer
component (#514)BREAKING CHANGES
- Rename
OverflowMenuItem
toMenuItem
. - Removed
type="link"
fromOverflowMenuItem
due to an accessibility issue with the approach (based on review of consumer usage, it did not seem to be used).
FEATURES
MenuRenderer
Encapsulates all the behaviours of an accessible menu button, allowing consumers to define a custom
trigger
to open the menu. The trigger function receives two arguments:- Props required for accessibility, including mouse/keyboard interactions
- Menu state object containing the
open
state.
<MenuRenderer trigger={(triggerProps, { open }) => ( <button {...triggerProps}>Menu</button> )} > <MenuItem onClick={...}>Option</MenuItem> </MenuRenderer>
MIGRATION GUIDE
OverflowMenuItem
Rename
OverflowMenuItem
toMenuItem
.<OverflowMenu label="Overflow"> - <OverflowMenuItem onClick={...}>Option</OverflowMenuItem> + <MenuItem onClick={...}>Option</MenuItem> </OverflowMenu>
Changing the
type
is no longer supported due to an accessibility issue with the previous implementation. Please get in contact via Slack if you depended on this.<OverflowMenu label="Overflow"> - <OverflowMenuItem type="link" onClick={...}>Option</OverflowMenuItem> + <MenuItem onClick={...}>Option</MenuItem> </OverflowMenu>
- Rename
-
Add BraidTestProvider component. (#529)
This is an alternative to
BraidProvider
for unit test environments. Note that, as the name implies, this should not be used in production code.MIGRATION GUIDE
In your unit tests, you can replace usage of
BraidProvider
withBraidTestProvider
, omitting the theme.-<BraidProvider theme={wireframe}> +<BraidTestProvider>
If for whatever reason your tests are relying on the presence of a specific theme, you can pass the name of the desired theme.
-<BraidProvider theme={seekAnz}> +<BraidTestProvider themeName="seekAnz">
-
Only show focus rings on buttons for keyboard navigation. (#526)
This impacts the following components:
Button
ButtonRenderer
OverflowMenu
Browsers 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 withBraidTestProvider
.-<BraidProvider theme={wireframe}> +<BraidTestProvider>
- 273ed8a: seekUnifiedBeta: Decrease touchable height to 44px
- 9890660: Hide webkit native clear field on search type inputs
- eae3496: Fix release of v23.0.0
-
33139c8: Clone seekAnz theme to seekUnifiedBeta
BREAKING CHANGE
jobsDbRebrand
theme has been removed