Apr 26, 2023
  • 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.

Apr 6, 2023
  • 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" />
Mar 9, 2023
  • 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"
    />
Nov 9, 2022
  • 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" />
Apr 8, 2022
  • Autosuggest, PasswordField, TextField, useToast: Add id to internal close/clear buttons

Oct 18, 2021
  • Autosuggest, Dropdown, MonthPicker, PasswordField, TextField, Textarea: Hide placeholder text when field is disabled

Sep 30, 2021
  • 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).

Aug 20, 2021
  • Display formAccent outline on form elements when focused

Aug 10, 2021
  • 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" />
Nov 30, 2020
  • PasswordField: Ensure disabled is handled correctly

    Fixes a bug where the disabled prop was hiding the visibility toggle but leaving the field enabled.

Oct 19, 2020
  • TextField,Dropdown,PasswordField,MonthPicker,Textarea: Apply aria-describedby to form elements only when needed

    Only apply aria-describedby to form elements when needed, e.g. either a message, description, or an explicit aria-describedby is passed.

Sep 17, 2020
  • TextField, PasswordField, Textarea, Autosuggest, Dropdown, MonthPicker: Add decription to aria-describedby

Sep 16, 2020
  • TextField, PasswordField, Textarea, Dropdown: Add support for multiple field descriptions

    Previously, if a custom aria-describedby prop was passed, it would take precedence over the message prop, which also uses aria-describedby. Both descriptions can now be applied at the same time.

May 11, 2020
  • 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:

    • PasswordField: visibility toggle button
    • TextField: clear button
    • Autosuggest: clear button
  • 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:

    • PasswordField: visibility toggle button
    • TextField: clear button
    • Autosuggest: clear button
May 7, 2020
  • Add PasswordField component

    Provides a password field complete with visibility toggle to switch between a masked and unmasked field value.