Ensure content is left aligned by default
Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.
Validate accessible field labels in development
Introduce development-time validation for the label prop on form fields to guard against blank values and guide towards the alternative labelling options that are available.
This validation helps ensure that all fields are accessible to screen readers and other assistive technologies.
RadioItem: Improve checked visual affordance when disabled
Improve the visual affordance of the checked state when disabled across all themes and colour modes.
Standardise disabled & critical state across form fields
Improves the consistency of form fields when combining both disabled and critical tone, which includes:
critical bordersmessage and not reserving space for it unless explicitly providing the reserveMessageSpace prop.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.
Refine the Checkbox, Radio, Toggle & MenuItemCheckbox size
Refines the size of the inline field elements including the RadioItem, Checkbox, Toggle and MenuItemCheckbox components.
Primarily impacts consumers of the seekJobs theme, seeing a reduction across all sizes.
Improve internal form field spacing
Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.
This change impacts the Stack spacing between label and description, the form field itself and the message slots.
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.
RadioGroup: Ensure reserveMessageSpace prevents layout shift correctly
Consider the reserveMessageSpace prop as well as message when conditionally applying internal padding between radio list and field message.
Hide field borders in dark containers
Reduce visual noise when a form field is displayed in a dark container by hiding the default border. As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.
RadioItem, Checkbox: Fix stacking context behaviour
A RadioItem and Checkbox previously created a new stacking context with an elevated z-index applied on hover, resulting in their labels overlaying other elements in an unpredictable ways — most noticable when toggling nested content.
For example, toggling nested content containing an Autosuggest, would see the list of suggestions list would be overlayed by the next RadioItem on hover.
To fix this, the z-index is no longer elevated on hover, and additionally the nested content container applies an elevated index when the field is checked.
Checkbox, RadioItem: Fix alignment with updated Badge layout
Improve layout to work with updated Badge layout which is no longer driven by line height.
RadioItem, Toggle: Use formAccent border when selected
Switch to using the formAccent border colour, rather than the field border color, when in the selected state (e.g. checked for RadioItem, on for Toggle).
Show description on form fields when no label provided
Previously, a FieldLabel without a label would return nothing. However, now that form fields can opt for indirect or hidden labels (via aria-label or aria-labelledby), the description should still be shown if provided.
Note: The secondaryLabel and tertiaryLabel remain conditional based on the presence of a label. This is due to their location in the layout being anchored off the label.
EXAMPLE USAGE:
<FieldLabel description="Description now visible without label" />
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" />
RadioGroup: Remove surrounding white space with no visual label
Removes additional white space applied above the RadioItems when no visible label is provided, i.e. when labelling via aria-label or aria-labelledby.
RadioItem: Add disabled support
Provide support for disabling individual RadioItems within a RadioGroup.
EXAMPLE USAGE:
<RadioGroup> <RadioItem label="One" value="1" /> <RadioItem label="Two" value="2" /> <RadioItem label="Three" value="3" disabled={true} /> </RadioGroup>
Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup: Dim the field value and label when field is disabled
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).
Display formAccent outline on form elements when focused
Checkbox, RadioGroup, Radio: Use atoms for label cursor styles
Since the disabled state of a checkbox can only be changed via JavaScript, cursor styles can be toggled via Box props rather than generating additional CSS.
While this is an improvement in and of itself, this change is being made to work around a third-party testing bug where our use of :disabled in a complex CSS selector is causing an exception to be thrown.
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
Checkbox,RadioGroup,Toggle: Add size support to Checkbox, RadioGroup & Toggle
Adds support for adjusting the size of a Checkbox, the RadioItems within a RadioGroup or a Toggle. 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" />
Checkbox,RadioGroup,Radio: Fix element type passed to onChange event
Fixes a bug where the onChange event previously received the change event for a form element rather than an input element.
RadioGroup,RadioItem: Add RadioGroup & RadioItem components
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>