Autosuggest: Ensure content is left aligned
Applies left alignment to Autosuggest dropdown content to ensure consistent alignment, even when inside centered layout containers.
Autosuggest: Remove deprecated message syntax from suggestions prop
Remove the deprecated message syntax from the suggestions prop in favour of the noSuggestionsMessage prop.
<Autosuggest ... - suggestions={{ message: 'No results found' }} + suggestions={[]} + noSuggestionsMessage="No results found" />
Autosuggest: Update suggestion group heading design
Updating the design of the suggestion group headings, moving from formAccent to secondary tone, from all caps to provided casing, and from xsmall to small size.
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.
Autosuggest: Improve handling of suggestionHighlight prop when set to remaining
Fixes a bug in Autosuggest when using suggestionHighlight prop set to remaining.
If the input contained multiple words, the highlighted portion would be appended to the end of matching suggestions.
Autosuggest: Optimise automatic scrolling to selected suggestion by using native browser methods.
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.Ensure no space above field with undefined label
Fixes an issue where passing undefined as the label to a form field would result in an unwanted space above the field.
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.
Autosuggest: Add suggestionHighlight prop
Introduces the suggestionHighlight prop, which uses the input value to automatically highlight either the matching or remaining portion of each suggestion.
EXAMPLE USAGE:
<Autosuggest suggestionHighlight="matching">
Move secondary ButtonIcon tone to icons
Following the deprecation of the secondary tone of ButtonIcon, this updates all internal usages to apply the secondary tone directly to the icon.
Ensure all paths through AutoSuggest state updates are handled.
Adopt small sized ButtonIcon for field actions
Switch over to small (previously standard) sized ButtonIcon for field actions such as clear field, or toggle password visibility.
Autosuggest: Fix aria-label and aria-labelledby features
Fixes an issue where the aria-label and aria-labelledby props provided by a consumer were being overidden internally by the Autosuggest component.
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.
Add support for caution tone to form fields
Provide support for applying a caution tone to form fields.
Specifying this tone will show the IconCaution alongside the provided message.
EXAMPLE USAGE:
<TextField tone="caution" message="Caution message" />
Improve consistency of border radius usage across components
Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.
Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.
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" />
Autosuggest: Add configurable message for no suggestions
Provides consumers a way to give the user more context when no suggestions are available. The noSuggestionsMessage prop accepts a simple message by providing a single piece of text. Alternatively, a more structured prompt can be shown by providing an object containing title and description.
This message is only displayed when there are no available suggestions provided.
EXAMPLE USAGE: For the simple case:
<Autosuggest ... suggestions={[]} noSuggestionsMessage="No results found" />
Or, for more a structured prompt:
<Autosuggest ... suggestions={[]} noSuggestionsMessage={{ title: "No results found", description: "Try searching for something else", }} />
MIGRATION GUIDE:
In addition, the old mechanism allowing consumers to pass an object to suggestions containing a message has been deprecated. This will continue to work for now but will be removed in a future release.
It is recommended to migrate to the noSuggestionsMessage prop.
<Autosuggest ... - suggestions={{ message: 'No results found' }} + noSuggestionsMessage="No results found" />
Autosuggest, PasswordField, TextField, useToast: Add id to internal close/clear buttons
Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon
Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.
Autosuggest, TextField: Add clearLabel prop
To support translations, the clear button in the field can now be customised using the clearLabel prop.
EXAMPLE USAGE:
<Autosuggest clearLabel="Clear" // ... />
Autosuggest: Scroll list into view
The suggestions list will now be scrolled into view (on tablet and above) if it extends beyond the bottom of the window. This prevents suggestions (particularly those loaded asynchronously) from being obscured by the edge of the window.
Alert, Autosuggest, Tag, TextField: Use neutral tone button style for clear action
Autosuggest, Dropdown, MonthPicker, PasswordField, TextField, Textarea: Hide placeholder text when field is disabled
Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup: Dim the field value and label when field is disabled
Autosuggest, TextField: Hide clear button 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
Autosuggest, Dropdown, MonthPicker, PasswordField, Textarea, TextField: Add aria-label & aria-labelledby support
In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.
EXAMPLE USAGE:
// Standard field label <TextField label="My field" /> // Hidden field label <TextField aria-label="My field" /> // Labelled by another element <Heading id="title">Title</Heading> <TextField aria-labelledby="title" />
Autosuggest: Fix missing/invalid group headings in some cases
Autosuggest: Ensure input occupies the full width of its container
Autosuggest: Fix bug where async suggestions may not be visible
This fixes a bug where suggestions wouldn't become visible if the suggestions prop was initially empty and then populated asynchronously, only becoming visible on the next user interaction, e.g. typing in the field.
Autosuggest: Add support for custom messages when no suggestions are present
If no suggestions are available and you'd like to provide an explanation to the user, you can now pass an object with a messages property to the suggestions prop.
EXAMPLE USAGE
<Autosuggest suggestions={{ message: 'No suggestions available.' }} {...restProps} />
Autosuggest: Add filterSuggestions function, allow suggestions prop to be a function
The logic for filtering suggestions typically lives on the server rather than the client because it’s impractical to send all possible suggestions over the network. However, when prototyping in Playroom or working with smaller datasets, you may want to perform this filtering on the client instead. For this case, we now provide a filterSuggestions function to make this as painless as possible.
To better support this behaviour, you can now pass a function to the suggestions prop. When executed, this function will be passed the current value of the field.
EXAMPLE USAGE
import { Autosuggest, filterSuggestions } from 'braid-design-system'; <Autosuggest suggestions={filterSuggestions([ { text: 'Apples', value: 1 }, { text: 'Bananas', value: 2 } ])} {...restProps} />
Autosuggest: Support custom label text for suggestions
You can now optionally provide different suggestion text from the value that gets inserted into the text field.
EXAMPLE USAGE
<Autosuggest suggestions={[{ text: 'apples', label: 'Add "apples"' }]} {...restProps} />
Autosuggest: Forward ref prop to input element
Autosuggest: Add hideSuggestionsOnSelection prop
Typically we hide the suggestion list when a selection is made, assuming that the field is now populated with the desired value. However, if the surrounding application clears the text field when a selection is made, this clashes with the user expectation that the field has been reverted back to its initial state with suggestions visible. To cater for this, we now allow you to opt out of this behaviour via the hideSuggestionsOnSelection boolean prop.
EXAMPLE USAGE
<Autosuggest hideSuggestionsOnSelection={false} {...rest} />
Autosuggest, Dialog: Lighten backdrop opacity from 0.7 to 0.4
TextField, PasswordField, Textarea, Autosuggest, Dropdown, MonthPicker: Add decription to aria-describedby
Autosuggest: Add translations prop to enable internationalisation
Autosuggest: Improve screen reader experience
Add description informing user that suggestions will appear below field. Also, notify users about how many suggestions are available, and about automatic selections.
Autosuggest: Update to ARIA 1.2 combobox spec
Autosuggest: Fix suggestion double tap bug on iOS
Tapping a suggestion on iOS triggers the hover state rather than a selection, forcing users to tap a second time to select the suggestion.
This is due to the way that iOS simulates mouse events in a touch environment. If the document is updated during a mouseover, mouseenter or mousemove event, the subsequent click event is never fired. While it may seem counterintuitive, this ensures that touch users are able to see hover effects that make changes to the page.
To fix this, we now trigger our suggestion hover logic on touchstart so that the document doesn't change during mouse events, which then allows the click event to fire uninterrupted.
Autosuggest: Apply darker background when disabled
When disabled, Autosuggest elements didn't have the same dark background as other disabled fields. This has now been fixed.
TextField, Autosuggest, PasswordField: Improved support for field buttons with browser extensions.
The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.
Affects the following components:
TextField, Autosuggest, PasswordField: Prevent field buttons firing on right click
Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.
Affects the following components:
Autosuggest: Support suggestion descriptions
You can now provide a description as part of each suggestion item, e.g.:
<Autosuggest suggestions={[ { text: 'Apples', value: 123, description: 'Juicy and delicious', }, ]} {...rest} />
Autosuggest: Don't select suggestions onBlur when using automaticSelection and suggestions are closed
Autosuggest: When using the automaticSelection prop, we now prevent automatic selection from ocurring if the input value hasn't changed since focusing the field
Hide webkit native clear field on search type inputs