Skip to main content

v5 Releases

5.3.0​

Components​

  • New <Tooltip /> component added

  • Bugfix sr-only class for <Link /> component

  • Added size prop to <AutocompleteContainer />

  • Bugfix <FormGroup /> labelHidden prop not setting the sr-only (hidden) class

Brand Tokens​

  • Tooltip component tokens added

  • Added new <ButtonGroup /> tokens to allow for more control over spacing and bottom margins per brand.

Documentation​

  • Updated <Alert /> docs with more information about the role prop.

  • Updated deploy script to force dist-tag.latest to update on stable release

  • Updated latest release <Alert /> messaging and sanitzed query param

  • Added tabs to component documentation to improve content layout

  • Enhanced component documentation to include usage and accessibility information

5.2.0​

Components​

  • CTA Buttons were not using correct focus state tokens. CTA 2 focus outline was incorrectly set to border colour instead of background colour.

  • Added position prop to SkipLinks so that a skip to link can be inserted inline if needed. Eg. the page has a carousel that keyboard users want to skip.

  • Updated Button types interface to extend ButtonHTMLAttributes<HTMLButtonElement> so no errors will be generated when standard button attributes are passed into the component via the rest prop.

  • The id prop in the TabItem was not being destructured and this was causing any id passed in to use the ...rest prop and incorrectly overwrite the tab button id value, which was in turn causing an accessibility issue by breaking the aria-labelledby association from the tab panel.

  • Removed role="button" from the Chroma Button as this is set by default for button elements

  • Updated some component TS Types so that they display in the documentation (eg. inlined size values 1|2|3|4 instead of having separate type for SizeProps). Also improved some prop types descriptions to display in the docs.

  • Removed generation of bit json data for component props table that was created as a fallback, no longer needed as all components live in monorepo now.

  • The brand selection in the Chroma MFE host has been updated to use React state. In this change, a dropdown Select component is introduced for users to choose the brand. Furthermore, this update also includes a revision in the brand-provider component to clean up the appended brand token stylesheet on unmount.

  • Added onShow and onHide callback function props for Tab, Accordion, Alert, Message, Datepicker, Modal and FormGroup.

  • Bugfix Link component color for the :active and :focus states

  • Bugfix for FormGroup component which was rendering the Legend and HelpText in the wrong order.

  • Upgraded Docusaurus to v3

Documentation​

  • Upgraded Docusaurus to v3

  • Moved the logic for the LatestVersion Alert component into a useEffect internally and updated the getVersionQueryParam to allow for prerelease versions.

v5.1.0​

info

In this release, our focus has been on enhancing the documentation and adding some new Typography styles.

The Headline and Subheading tokens have been added to the brand-tokens package and currently the only brand that takes advantage of these is NRMA. Additional brands may be updated to use these tokens in the future. The new Headline and Subheading styles can be seen on the Typography page.

For the documentation we have introduced a new Foundations section to the side navigation, where the Colours section now resides as a subsection. Additionally, a Typography page has been added, alongside other utility styles. Our Getting Started section has seen expansion to encompass Accessibility, Brands and Tokens, with dedicated pages tailored for both Designers and Developers. Guidance on extending Chroma has also been added to our Guides section. Furthermore, we've streamlined the component page URLs, significantly reducing them to a more concise format.

Brand Assets​

  • Added new webfont "Tiempos".

Brand Tokens​

  • Added new typography tokens and classes for headline, headline-compact and subheading.

  • Added new tertiary typography tokens to allow for brands to pass in additional fonts

  • Updated the default h1, h2, h3, h4, h5, h6 line-heights across all brands

  • Updated nrma brand tokens to include a new tertiary font (Tiempos), also heading line-height overrides

For more information view the typography overview page.

Documentation​

  • Updated Typography page with new Headline, Headline Compact and Subheading Typography styles.

  • Added Conditional Alert warning component which shows when the user is not on the current stable version of the docs with a link to the current.

  • Migrated the About Chroma page from the product site to /docs/getting-started/about

  • Migrated the Start Developing from the product site to /docs/getting-started/start-developing

  • Migrated Brands in Chroma page from product site to /docs/getting-started/brands

  • Migrated the Start Designing page from the product site to /docs/getting-started/designing

  • Migrated Accessibility page from the Product site to /docs/getting-started/accessibility

  • Updated links on the Homepage and Getting Started pages to point to the new docs locations

  • Added Colours overview page and moved Colours section to new Foundations category /docs/foundations/colours

  • Migrated the Foundations - Typography page from the product site to a new Foundations section, /docs/foundations/typography

  • Updated Component slugs in the docs to be cleaner urls:

    • Old component url structure: /5.0.1/chroma/docs/chroma/pages/Components/modal/

    • New component url structure:  /5.0.1/chroma/docs/components/modal/

Figma​

  • List icon example added
  • boxShadow styles added to Chroma Component Library as variable styles

  • Header boxShadow linked to Component Library style to enable theme switching.

v5.0.0​

info

v5 is about aligning all the versioning across brand tokens, components and assets to ensure 100% compatibility.

We have consolidated our code repositories into a unified monorepo, a strategic measure aimed at facilitating seamless updates and versioning for the Chroma team.

Every release will now encompass a comprehensive snapshot of the design system code, inclusive of documentation which enables users to reference historical versions of the documentation.

Brand Tokens, Brand Assets, and Components will be assigned a unified version number, reinstating the capability for developers to install components either as a consolidated package or as individual component packages directly from Nexus.

Moving forwrd each release will include a comprehensive list of changes and additions to the design system listed under their respective sections such as Brand Tokens and Components.

Why v5?​

What is the problem v5 will solve?​
info

v5 solves the confusion around versioning and compatibility.

Prior to v5 all components were independently released and versioned which made it difficult to know what versions of the components are compatible with which version of the brand tokens. Even trying to understand what the latest version of components are to use was hard to communicate.

This was creating confusion around versioning and also made it difficult to ensure compatibility for each component release we made.

Pre v5 problem​
// package.json with so many packages and different versions

"devDependencies": {
  "@iag/chroma-react-ui.accordion": "1.0.17",
  "@iag/chroma-react-ui.button": "2.1.3",
  "@iag/chroma-react-ui.form-group": "0.0.9",
  "@iag/chroma-react-ui.input": "2.0.4",
  etc...
}
// application with so many imports

import { Accordion, AccordionItem } from "@iag/chroma-react-ui.accordion";
import { Button } from "@iag/chroma-react-ui.button";
import { FormGroup } from "@iag/chroma-react-ui.form-group";
import { Input } from "@iag/chroma-react-ui.input";
v5 Solution​
// package.json with a single package version

"devDependencies": {
  "@iag/chroma-react-ui.components": "5.0.0",
}
// application with just one import location

import {
  Accordion,
  AccordionItem,
  Button,
  FormGroup,
  Input,
} from "@iag/chroma-react-ui.components";
How does v5 solve this problem​

v5 solves this by aligning all versioning to a set numbering. This means that the v5 releases will use v5 components, v5 tokens and v5 assets. This will reduce confusion around versioning and ensure a more compatible release for applications to use.

v5 Release
------------------
|- v5 components
|- v5 brand tokens
|- v5 assets
|- v5 documentation
|- v5 figma files

Components​

info

No changes have been made to the component api's which means they are backwards compatible with previous versions of bit components.

A bundled package is now available​

All components are now available as part of a single bundled package to make upgrading easier.

npm install @iag/chroma-react-ui.components
Individual components can still be used​

You can also still use each component as a separate package, however we recommend the bundled approach which makes it easy to update and ensure compatibility.

npm install @iag/chroma-react-ui.components.button
What do I need to do in order to start using v5?​
info

There is an install guide available for more information.

For existing applications there are some helpful guides available in order to upgrade to v5.

You will only need to update your current .npmrc registry.

 // Remove this
@iag:registry=https://nexus3.auiag.corp/repos/repository/chroma/
// Add this (if you don't already have it)
registry=https://nexus3.auiag.corp/repos/repository/iag-npm-all/

Documentation​

We have taken the decision to move from Storybook to Docusaurus, a tool that enables us to create a more complete documentation experience. It will allow us to create a more consistent and cohesive experience for our users, as well as provide a more streamlined workflow for our team. Over time this documentation will become the primary source of truth for our design system and remove the confusion of having multiple sites.

Figma​

info

Figma files will be updated to v5 to align with code

Figma assets will be labelled as per the major version. Only the code repositories will update with semantic versioning. In this update Chroma Figma files will be changing their version number from v2 to v5 to align with the latest Code version. They will be the exact same Figma files, with just a name change.

Chroma Figma files always align to the latest Code version. Aligning the version numbers will allow both designers and developers to be clearer on which Chroma assets are compatible and easily identify where updates may be required to align with the latest.

View Chroma Figma files.

(opens in new window)