Standardise icon slot spacing
Normalise the space between the icon slot and component content across the system.
Move badge slot inside label
Relocate the badge slot inside the label slot enabling the Badge to sit alongside the last word in wrapping lines of text.
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.
Accordion, AccordionItem: Add weight support
Add support for customising the weight of AccordionItems.
This can be either at an Accordion level or on a standalone AccordionItem based on design requirements.
Note, in order to maintain visual consistency, the weight prop can only be specified on an AccordionItem when outside of an Accordion.
EXAMPLE USAGE:
<Accordion weight="strong"> <AccordionItem /> ... </Accordion>
or
<AccordionItem weight="strong" />
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" />
Removes custom icon sizing and layout in favour of new typography icon sizes and layout.
AccordionItem: Add icon support
Provides a designed slot for adding an icon to an AccordionItem
EXAMPLE USAGE:
<AccordionItem icon={<IconPromote />} {...} />
AccordionItem: Add badge support
The AccordionItem now has support for the badge prop.
EXAMPLE USAGE:
<AccordionItem label="Label" badge={<Badge>New</Badge>} > ... </AccordionItem>
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' }
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
Accordion, AccordionItem: Allow customisation of size, tone, space and dividers.
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>
AccordionItem: Prevent Safari from clipping label text
AccordionItem: Support onToggle prop without expanded to allow tracking in uncontrolled mode
For example:
<AccordionItem id="id" label="Label" onToggle={expanded => trackSomething(expanded)} > ... </AccordionItem>
Add Accordion and AccordionItem components
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 to AccordionItem as well as an onToggle callback.
const [expanded, setExpanded] = useState(false); <AccordionItem id="id" label="Accordion item" expanded={expanded} onToggle={setExpanded} > <Text>Accordion item content</Text> </AccordionItem>;