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:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
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:
<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" />
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.