Ensure content is left aligned by default
Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.
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.
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" />
FieldLabel: Dim label when disabled
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
FieldLabel: Add descriptionId prop
EXAMPLE USAGE:
<FieldLabel htmlFor="id" label="This is a field label" description="Extra info about the field" descriptionId="id-description" />