Skip to main content

V13 Releases

v13.3.0

24/09/2025

Components

Icons

  • 9 new default Core and NRMA Help icons added in all 3 weights.
  • 11 new and 1 updated default and NRMA Help Product icons.

InputFormat

  • Prevents input that starts with a dot and ensures correct handling of values.value in the onChange event, improving input validation and reliability.

ProgressLoader

  • Added accessible name to the Progress Loader.

Documentation

  • Removed Babel config that is no longer needed for Docusaurus.

Build Configuration

Dependencies

  • Updates the paths for the @iag/chroma-react-ui.icon dependency in the drawer and modal components' package.json files. This ensures correct dependency resolution and prevents potential issues related to missing or incorrect icon imports.

Figma

  • ProgressLoader (Inline) bugfix: 25% value updated to have correct border radius on progress bar.

Components

Icons

  • 9 new default Core and NRMA Help icons added in all 3 weights.
  • 11 new and 1 updated default and NRMA Help Product icons

v13.2.0

27/08/2025

Brand

IAG

  • Updated Favicons.

Components

Accordion

  • Updated <Accordion /> component inverse variant icon on hover to pull global token.

Button

  • Icon Button min-width added to ensure border-radius is properly applied.

Drawer

  • disablePortal prop added.
  • Converted the <Modal /> from @mui/joy to @mui/material.

Notification Counter

  • New component added to the library.

Tab

  • Updated import paths for better clarity and maintainability.
  • Added support for text value for the initial prop as well as a string number to select a Tab on render.

Toggle

  • Removed the defaultChecked prop from the <Toggle /> component as this should be a controlled component.

Documentation

  • Docusaurus updated to 3.8.1
  • Updated Figma links in Component pages
  • Corrected link to Github repo on homepage.
  • Updated documentation for the Logo component examples and usage guidelines. The changes improve developer understanding of when and how to use different Logo variants.

  • Fixed the broken links to Brand Colours and System Colours in the Using Tailwind Classes Alert on the Start Developing page.

  • Updated copy on the Start Designing page.

v13.1.1

30/07/2025

New <Toggle /> component was missing from the chroma-components package dependencies object causing the component to be unavailable when installing into an app. This has now been corrected with this patch release.

v13.1.1

30/07/2025

New <Toggle /> component was missing from the chroma-components package dependencies object causing the component to be unavailable when installing into an app. This has now been corrected with this patch release.

v13.1.0

30/07/2025

Brand

New Zealand Seniors

  • New brand added to the library.

OneChoice

  • New brand added to the library.

Components

Toggle

  • New component added to the library.

Tab

  • Added new token definitions for tab icon colors to ensure all states (default, hover, focus, selected, inverse) are customisable.

Progress Indicator

  • Added support for customizing the font family of step indicators.
  • Simplified the Link component's variant logic in link.tsx by reducing redundant style mappings and introducing a new .link-button class for button link variants.

  • Added hover styles for .link-button in link.module.css to ensure consistent behavior (removes visible link underline in the Button Link variant).

Accordion

  • Updated hover styling to match the text for Icons added to an Accordion item

Documentation

  • Fixed a bug in the Typography page which was causing a color reference for headline elements

  • Changed the brand prop in logo examples to use "iag" instead of "nrma" for consistency.

Build Configuration

  • Updated the step from "Check for Alpha Release" to "Check for Alpha or RC Release," and expanded the condition to include -rc. in addition to alpha when determining if the workflow should stop. The corresponding log message was also updated to reflect this change.

Code scanning fixes

  • Fixed various code scanning issues reported by GitHub.

v13.0.0

09/07/2025

Brand

Mighty Ape

  • New brand added to the library.

View brand documentation

.

Heritage Bank

  • New Logo only brand added to the library.

View brand documentation

.

Monochroma

  • Updated secondary colour to be accessible with white.

View brand documentation

.

NRMA Help

  • Progress Loader - border removed, backdrop colour updated and inline variant updated with different label position.

  • Progress Indicator - Step sizes reduced, numbers removed, active step border added and mobile label position updated.

  • Icons - Core and Product Icons updated.
  • Background colour added to Progress Loader and Progress Indicator docs examples.

View brand documentation

Components

Drawer, Modal, Tooltip

  • Updated class name attribute to include theme name where necessary for correct token scoping

Icons

  • 32 new icons added to Core Icon set
  • 50 new icons added to Product Icon set

Input Group

  • Accessibility fix, moved the id prop to the correct place to allow the FormGroup to create the correct association between the <label for> attribute and the <Input id>
  • New brands added.
    • heritage-bank
    • mighty-ape

Progress Indicator

  • Added ability to show final step as checked

Progress Loader

  • New inline variant
  • backdrop token added for brand styling.
  • Updated Usage documentation.

Tab

  • New Tab component using the MUI Tab component. Component has a new API and is not backwards compatible with the old component.

  • Removed Block variant on mobile in place of new Scrolling variant.

See our Tab migration guide for more information on how to migrate from the old Tab component to the new one.

Documentation

  • Update <Spinner /> example page with a live region update for Accessibility.
  • Added Tab migration guide.
  • Old Tab component added to the deprecated section in the docs with information on how to continue to use the old version although this is not recommended.
  • Updated <Button> usage guidelines
  • Updated Accessibility page with general recommendations to follow when developing your application.
  • Fixed <Alert> validation example with correct id attributes.
  • Refactored SVGs page to allow assets to render for local and dev environments.
  • Added new Outage Mitigation Guide to Guides section.

Build Configuration

Dependencies

  • Consolidated @mui joy and material package versions so that multiple versions are not included in the library.

  • @mui material packages updated to v7.

Code scanning fixes

  • Added DOMPurify.sanitize() function to brand selector in the docs
  • redirectUrl now constructed using new URL() to ensure it is constructed safely and cannot be exploited by malicious input.

Figma only

  • Body Bold font weights for Chroma and NZI updated from 700 to 600.
  • Deprecated Mode added.
  • Theme dropdown organised into alphabetical order.
  • Checkbox Outline Bugfix: Selected border colour updated from default to selected token and border radius token updated to pull theme tokens instead of global tokens for ASB, Bendigo Bank, Lumley, NAC and State.

  • Radio Outline Bugfix: Border radius token updated to pull theme tokens instead of global tokens for for ASB, Bendigo Bank, Lumley, NAC and State.

  • NAC Bugfix: Input border radius updated to 4px to align with code.