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 ✨

<a class="accordion__title" href="...">...</a>
  • you can now remove the inner padding of an Accordion by using the accordion--tight class #911
<ul class="accordion accordion--tight">...</ul>
  • you can now choose the background class to use when importing stories. For instance bg="primary" will add the bg-primary class #905
include component src="..." bg="primary"
  • snapshot tests can now compare each component individually instead of capturing the whole page by using checkSnapshot() #909
    • it tests that there is at least one component on the page
    • it tests that each component has a unique name - this is derived from passing name="" when you import the component
    • you can pass in a custom selector to use for the snapshot - this is useful for capturing snapshots of components not injected by the component importer #909
await checkSnapshot('data-test=modal');

Bug fixes 🐛

  • fixed an issue where e2e tests failed to start due to more than one version existing in the dist folder #907
  • svgs nested inside Stats & rankings are now restricted to 65% width on mobile and 85% width on desktop viewports #913
  • removed bottom border from last Page navigation item #911

Other changes

  • links that contain no href property remain unstyled #915
  • updated default Accordion design #911
  • removed custom accordion overrides #911
  • reintroduced the versioned folder so production mode can reference it when serving assets #904
  • updated netlify.toml cors setting to allow * #904
  • eleventy now correctly watches for changes to the dist folder #903
  • tidied up component importer code #905
    • removed need for containerRatio prop
    • removed Example: and Source Code: text
    • tided up css
  • removed trimOutputLeft & trimOutputRight from .eleventy.js #905
  • split grid and component css from assets/docs/helpers/index.css into assets/docs/grid/index.css & assets/docs/component-importer/index.css #905
  • reduced the height of Grid columns when data-show-grid is used #905
  • combined all e2e tests into one workflow job to speed up and reduce github actions minutes usage #898 #908
  • updated yarn test:e2e to run all tests #898
  • removed yarn test:e2e:all #898
  • test artifacts are now available for download when a test fails on the ci server #910
  • removed some sempahore related CI settings in playwright.config.js #910
  • components on all child pages now use checkSnapshot() #909
  • created new e2e snapshot tests
  • migrated jumpnav and page-header tests to their respective component test file #909
  • migrated snapshots from pages ➡️ snapshots folder #909

Documentation updates