Skip to main content

V20 Releases

v20.0.0​

14/06/2026
Release Pull Request(opens in new window)

Brand​

  • Brand tokens updates based on the following Chroma design document: Figma focus audit

Move Bank​

  • Added new Move Bank logo and updated the Partner Brands section and logo-only brands pages.

NAC​

  • Fixed a bug in the primary url value token that was using http instead of https.

Components​

  • Extended TS support for Input attributes in the InputFormat, InputGroup, and InputStepper components.

Datepicker​

  • Added onError callback to handle date selection errors.
  • Public API no longer uses Dayjs or String - Updated DatePickerProps to accept/return vanilla Date only.

SegmentedControl​

  • Updated the name prop to concatenate either the <FormGroup id> or the <SegmentedControl id> with the <SegmentedControl name> to provide a more reliable value for testing. If you use <SegmentedControl /> inside a <FormGroup />, as is usually the case, make sure to add an id to the FormGroup; otherwise, the composed name will include a generated random suffix.

Documentation​

  • Added Primary & Secondary font names to the Typography page.
  • Fixed Supplementary colours in the Badge component documentation.
  • Adjusted example code height for multiple components for better rendering.
  • Updated Button stories with missing examples.
  • Fixed RadioBlock examples that had missing cols prop.
  • Slight increase of Docusaurus content width (1%) to fix examples by adjusting layout to larger breakpoint.
  • Made the 'Logo only brands' section of the <Logo/> component linkable by adding an id to the section header and a hash link for direct linking.
  • Made the 'Partner Brands' page linkable by adding an id to the section header and a hash link for direct linking.
  • Added migration guide for the updated Datepicker API changes.
  • Removed the deprecated Modal and Tab guide pages

Configuration​

  • Upgraded MUI to v9.

Vulnerabilities​

  • @babel/plugin-transform-modules-systemjs generates arbitrary code when compiling malicious input.

Chromatic/Storybook​

  • Storybook installed and configured for the project.
  • Storybook stories created for all components, showcasing their usage and variations.
  • Storybook integrated into the development workflow, allowing for easy testing and documentation of components.
  • Chromatic configured for visual regression testing of Storybook stories, ensuring consistent UI across changes.
  • Added IAG Direct Brands and Partner Brands logos to Storybook for testing.
  • Added Core & Product Icons test pages to Storybook.
  • Removed Badge story that wasn't needed anymore.
  • Set chroma as the only brand to test the brand logo pages against as they are not brand specific.