braid-design-system

Minor Changes

• Autosuggest: Add support for custom messages when no suggestions are present (#847)

  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}
  />
  

Patch Changes

• Checkbox: Support inferring of tri-state checked value (#843)

  To simplify the use of tri-state checkboxes, the checked prop now supports resolving the tri-state value from an array of checked values.

  EXAMPLE USAGE:

  <Checkbox
    label="Select all"
    checked={[true, false, false]} // Will resolve to "mixed"
  />
  

• Dropdown: Only show a blank option in the list when the value prop is blank and a placeholder isn't present (#846)

• PasswordField: Ensure disabled is handled correctly (#845)

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

Patch Changes

• Fix type definitions for Stack and scroll components (#841)

Patch Changes

• Toggle: Fix layout issue when label text wraps to multiple lines (#838)

Minor Changes

• Autosuggest: Add filterSuggestions function, allow suggestions prop to be a function (#831)

  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}
  />;
  

Minor Changes

• Checkbox: Add support for mixed state (#822)

  A checkbox can now accept a boolean or mixed as the checked property. When mixed, the checkbox is marked as being in an indeterminate state and announced as mixed to a screen reader.

  EXAMPLE USAGE:

  <Checkbox checked="mixed" onChange={handler} label="Label" />
  

Minor Changes

• Autosuggest: Support custom label text for suggestions (#821)

  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}
  />
  

Minor Changes

• Autosuggest: Forward ref prop to input element (#819)

Patch Changes

• Checkbox,RadioGroup,Radio: Fix element type passed to onChange event (#814)

  Fixes a bug where the onChange event previously received the change event for a form element rather than an input element.

Minor Changes

• List: Add support for icons (#810)

  Provides a way to use an icon for all the items in a list. When using type="icon" you must also provide the icon prop. See example below:

  EXAMPLE USAGE:

  <List type="icon" icon={<IconTick tone="positive" />}>
    <Text>This is a list item.</Text>
    <Text>This is a list item.</Text>
    <Text>This is a list item.</Text>
  </List>
  

Minor Changes

• RadioGroup,RadioItem: Add RadioGroup & RadioItem components (#807)

  The RadioGroup provides an accessible way to group and control a set of RadioItem components. The RadioGroup is responsible for handling the value, tone, message, and disabled state—determining the presentation and selection of the items in the list.

  EXAMPLE USAGE:

  <RadioGroup id="experience" label="Experience" value="" onChange={() => {}}>
    <RadioItem label="Less than one year" value="0" />
    <RadioItem label="1 year" value="1" />
    <RadioItem label="2 years" value="2" />
    <RadioItem label="3+ years " value="3" />
  </RadioGroup>
  

Patch Changes

• Tabs: Only scroll tabs when necessary on large screens (#806)

  Previously, when there were enough tabs to require horizontal scrolling, we would always scroll the active tab to the left-hand side of the scroll container (with a slight offset). This was primarily designed as a mobile interaction, and in practice was found to be a bit unexpected on large screens.

  Instead, when the tabs are scrollable on large screens, we now only scroll the active tab into view if it's partially off-screen or positioned too close to the edge of the scroll container. This ensures that automatic scrolling only occurs when absolutely necessary.

Patch Changes

• Radio,Checkbox: Apply aria-describedby only when needed (#802)

  Only apply aria-describedby when needed, e.g. either a message or description is passed.

• IconVisibility: Simplify visibility icon (#804)

Patch Changes

• TextField,Dropdown,PasswordField,MonthPicker,Textarea: Apply aria-describedby to form elements only when needed (#798)

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

• MonthPicker: Announce semantic grouping of fields and improved translation support. (#798)

  When not on a native device, the MonthPicker uses a fieldset containing two dropdowns. This change ensures that the grouping is announced correctly. From a translations perspective the labels for the dropdowns are no longer a concatenation of the label and monthLabel/yearLabel, supporting translation of the entire phrase.

Minor Changes

• Autosuggest: Add hideSuggestionsOnSelection prop (#792)

  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} />
  

Minor Changes

• List: Add support for Roman numerals (#788)

  EXAMPLE USAGE

  <List type="roman">
    <Text>This is a Roman list item.</Text>
    <Text>This is a Roman list item.</Text>
    <Text>This is a Roman list item.</Text>
  </List>
  

Minor Changes

• Radio,Checkbox: Add description and badge support (#786)

  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>
    }
  />
  

Patch Changes

• Loader, Button, ButtonLink, ButtonRenderer: Improve performance of loading animations (#784)

  Adjust animations properties and values to reduce CPU recalculation overheads.

• Toggle: Ensure there is a minimum amount of space between the label and the toggle when using justified alignment (#782)

Minor Changes

• Add Drawer component (#775)

  You can now open a modal panel on the right-hand side of the screen, following the WAI Aria Dialog (Modal) Pattern.

  See the documentation for more details and interactive examples.

• Box: Add maxWidth prop (#775)

  The sizes from ContentBlock are now available at a lower level for more primitive-based layouts.

  EXAMPLE USAGE:

  <Box maxWidth="large">...</Box>
  

Patch Changes

• Dialog: Fix close button to the corner of the dialog when scrolling (#775)

• Autosuggest, Dialog: Lighten backdrop opacity from 0.7 to 0.4 (#775)

Minor Changes

• FieldLabel: Add descriptionId prop (#766)

  EXAMPLE USAGE:

  <FieldLabel
    htmlFor="id"
    label="This is a field label"
    description="Extra info about the field"
    descriptionId="id-description"
  />
  

Patch Changes

• TextField, PasswordField, Textarea, Autosuggest, Dropdown, MonthPicker: Add decription to aria-describedby (#766)