Standardise icon slot spacing
Normalise the space between the icon slot and component content across the system.
Tabs: Add size support
Introduces the ability to customise the size of the Tab components in the tab list.
Available sizes are standard (default) and small.
EXAMPLE USAGE:
<Tabs size="small"> <Tab>First tab</Tab> <Tab>Second tab</Tab> <Tab>Third tab</Tab> </Tabs>
Tab: Remove cropping of the icon slot
Previously the icon slot on a Tab was cropped on the left to improve alignment with the active tab indicator.
For most icons in a Tab, this was subtle polish, but for others it had the undesirable side effect of clipping the side of the icon.
Removing the cropping until we have a better solution for trimming whitespace around icons.
Tabs: Improve positioning of the active underline
TabPanel: Align focus outline radius to scale
Increase the radius of the focus outline to better align to the scale. A TabPanel is typically a "large" element containing entire sections of UI, so using the large radius to better align to the radius scale.
Add xxxlarge to the space scale
Extends the range of the space scale to include xxxlarge.
This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
Note, the new value is also available as a responsive property.
EXAMPLE USAGE:
<Stack space="xxxlarge">...</Stack> {/* Or responsively: */} <Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>
import { atoms } from 'braid-design-system/css'; atoms({ paddingY: 'xxxlarge' })
import { vars } from 'braid-design-system/css'; const space = vars.space.xxxlarge;
Tab, Tabs: Updated visual design
The appearance of a Tab has been updated. Changes include:
regular text weightneutral tone instead of underlineminimal divider under Tabs underlines content only, without the horizontal gutterSupport 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" />
Removes custom icon sizing and layout in favour of new typography icon sizes and layout.
Tab: Add icon support
Provides a designed slot for adding an icon to a Tab
EXAMPLE USAGE:
<Tab icon={<IconPromote />}>{...}</Tab>
Add wide breakpoint of 1200px
This adds support for wide to the following touchpoints:
{ mobile: 'small', wide: 'large' }
<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
responsiveStyle function, e.g.export const className = style(responsiveStyle({ wide: '...' }));
breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.{ mobile: 0, tablet: 740, desktop: 940, wide: 1200 }
Support object notation for responsive props
Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.
{ mobile: 'small', tablet: 'medium', desktop: 'large' }
This also means that breakpoints can be skipped.
{ mobile: 'small', desktop: 'large' }
Tabs: Support fragments and null/undefined as children in Tabs and TabPanels
Tabs: Add divider prop, support full and none
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 to full or none.
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>
Tabs: Only scroll tabs when necessary on large screens
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.
Improved server rendering of Tabs
Previously, Tab and TabPanel 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 the item prop (already on Tab) to TabPanel 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>
TabPanels: Add renderInactivePanels prop
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. Setting renderInactivePanels will cause the TabPanel 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>
Add Tabs component
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>