Toggle

Migrate from custom focus ring visibility to native :focus-visible behaviour.

Previously Braid would change the presentation of focus ring outlines based on the user input, i.e. mouse or keyboard, to prevent showing focus rings on click. With the updated Browser Support Policy, we can now leverage the native :focus-visible pseudo class instead.

Change id prop from required to optional, allowing simplified usage.

Remove the uuid dependency which was previously used to generate fallback IDs in Playroom.

EXAMPLE USAGE:

Ensure content is left aligned by default

Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.

Toggle: Enable bleedY by default, and deprecate bleedY prop.

Deprecate the bleedY prop on Toggle component, and enable bleedY by default. Consumers should remove use of the bleedY prop, and if previously not setting bleedY to true, should update their layout accordingly.

MIGRATION GUIDE:

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.

Toggle: Add togglePosition prop

Introduces the togglePosition prop, enabling the toggle to either be leading or trailing its label text.

EXAMPLE USAGE:

Toggle: Add bleedY prop

Introduces the bleedY prop, enabling vertical bleed for the Toggle component. This removes excess vertical space created by the Toggle input.

EXAMPLE USAGE:

MIGRATION GUIDE:

Vertical bleed will become standard for the Toggle component in a future version. Please use the bleedY prop with a value of true and update your layout accordingly.

Toggle: Improve label text vertical alignment at small size

Toggle: Remove tick icon & fix antialias haze when selected

Simplying the selected state design by removing the tick icon from the toggle thumb.

Also fixes the antialias haze that appears around the thumb when selected.

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.

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, 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).

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:

Toggle: Add ref support

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

Box, Tag, Toggle: Make borderRadius="full" always circular

Fixes circular border radius bug where non-square elements would result in an ellipse.

Add support for data attribute maps on all components.

EXAMPLE USAGE:

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:

Toggle: Fix layout issue when label text wraps to multiple lines

Toggle: Ensure there is a minimum amount of space between the label and the toggle when using justified alignment

Toggle: Hide border on dark backgrounds

In order to reduce visual noise, similar to other fields, we now hide the border on Toggle elements when rendered on dark backgrounds.