Before you upgrade, please take note of any breaking changes and deprecation notices which may affect your site. View the Upgrade Guide to see examples of how to address breaking changes.

New features ✨

  • Preview Banner can now be previewed in the Design System by using ?preview= or clicking on the link in the Demonstration section #823
  • created --fw-medium css var to set font-weight: 500 #829
  • created form css vars #832
    • --col-form-select-dropdown-hover
    • --col-form-select-alt-dropdown-hover
    • --col-form-select-clear-dropdown
    • --col-form-select-clear-dropdown-hover
    • --col-form-select-dropdown-disabled

Bug fixes 🐛

  • updated warning and danger Notice background colours to pass a11y requirements #828
  • <table> nested inside .mobile-wrap are now 100% width on mobiles #833
  • Site Links containing both an icon and text have the correct spacing between them #834

Other changes

  • updated typography-level-3 mixin and .text-level-3 class to use --fw-medium #829
  • Selects now use the chevron-down icon #832
  • Select dropdown hover state now uses --col-blue-light-100 #832
  • tidied up Select disabled state css #832
  • removed trailing comma after Parkville in the Global Footer #825
  • updated gen4 to v2.0.2 #830
  • installed js-cookie package to easily read cookies from the browser #823
  • updated Preview Banner message from Design System Preview ➡️ Previewing #823
  • split out snapshot tests from test:e2e to allow the ci server to run more tests in parallel #824
  • created test:e2e:all to run all e2e tests #824
yarn test:e2e:all
  • created GREP_INVERT param to filter out specific tests to run inside docker #824
  • created playwright script to run e2e tests (except snapshots) outside of docker #824
yarn playwright
  • test:e2e:a11y now only run a11y tests #824
  • created e2e tests to ensure the Preview Banner works with both ?preview and cookies #823

Documentation updates

  • added Preview Banner to mega menu #823
  • created netlify redirect from /examples/preview-banner ➡️ /components/preview-banner #823