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
).
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" />
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.
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.
Radio,Checkbox: Apply aria-describedby only when needed
Only apply aria-describedby when needed, e.g. either a message or description is passed.
Radio,Checkbox: Add description and badge support
Allows a way to provide more detail about a Radio
or Checkbox
item using description
, bringing these fields into line with the rest of the form fields in Braid. Also allows a badge
to be provided to be placed alongside the label
.
EXAMPLE USAGE:
<Radio label="Option" description="This option is your favourite" badge={ <Badge tone="positive" weight="strong"> New </Badge> } />
or
<Checkbox label="Option" description="This option is your favourite" badge={ <Badge tone="positive" weight="strong"> New </Badge> } />
Checkbox & Radio: Only add aria-describedby when a message is provided
BUG FIXES
Checkbox
& Radio
Both of these inputs were previously always adding the aria-describedby
attribute, while conditionally rendering the message
only when provided. This meant that elements without a message
would be indicating that they are described by an element that does not exist.