v14.12.0

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="button button--text" href="#">...</a>
<button class="button button--text" type="button">...</button>
  • you can now set an individual Grid column size with the class .grid__col-[1-12] #926
<div class="grid">
  <div class="grid__col-2"...</div>
  <div class="grid__col-10"...</div>
</div>
  • you can now set an individual Grid column size per breakpoint with the class .grid__col-[xs,sm,md,lg]-[1-12] #926
<div class="grid">
  <div class="grid__col-sm-6"...</div>
  <div class="grid__col-sm-6"...</div>
</div>
  • you can now center the Grid when the number of columns used is less than 12 #941 #944 #946
<div class="grid grid--center">...</div>

.class {
  @mixin grid-center;
}
  • you can now test for visual regressions on pull requests against a pre-defined selection of cms pages #958
    • list of pages are located in /e2e/tests/regression/pages.json
    • snapshots are saved to /e2e/tests/regression/snapshots
    • update the TEST_PREVIEW_ID located in .env to the id of your pull-request. If your .env file doesn't include it you can refer to env.example
`yarn test:snapshots:regression`

Please note: These tests should be run exclusively on your local machine to detect visual regressions before merging your pull request.

Bug fixes 🐛

  • Tertiary Button background colour is now transparent #936
  • updated visual snapshot top calculation to use parseFloat for a more accurate precision #951
  • simplified icon detection inside Notices #952

Deprecation notice⚠️

  • the following classes have been deprecated and will be removed in a later version
    • .grid__cell, .grid__cell--span-x - they have been replaced with the equivalent .grid__col-x #926
    • .with-arrow-left, .button-hero, .button-hero-reverse, .button-hero-inverse, and .button-hero-reverse #935
  • the following classes have been removed
    • .grid--cols-8 - it was only being used by Icons. .grid__col-2 is being used instead #926
    • .with-arrow - all buttons now have an arrow by default #935
  • removed arrow-right and arrow-left mixins #935

Other changes

  • fixed peerDependencies by adding postcss to package.json #955
  • updated Buttons to new VID #935
  • updated Flash Message and Notices to new VID #938
  • updated --col-bg-info to use --col-blue-light-50 #938
  • Global Footer has been updated to use new grid column sizing #926
  • migrated all related flash message code from assets/style-guide/notices/ ➡️ assets/style-guide/flash/ #937
  • updated .stylelintrc to allow 0 units for custom properties #941
  • grid gap increases to 1.5rem on --bp-desktop and up #926
  • grid now resets all margin and padding to 0. This enables all elements that have default margin or padding to work. ie, ul #926
  • removed alternating Grid colours #926
  • grid-2-cols, grid-3-cols, grid-4-cols mixins now include grid mixin #926
  • removed grid__cell from all stories that use grid--cols-x classes #926
  • grid-cols mixin has been renamed to grid-breakpoint-cols #926
@mixin grid-breakpoint-cols xs
  • grid-cell-span-2, grid-cell-span-3, and grid-cell-span-4 mixins have been replaced with grid-cols #926
@mixin grid-cols 2;
@mixin grid-cols 3;
@mixin grid-cols 4;
  • migrated tests from e2e/tests/components/forms.spec.js to e2e/tests/style-guide/forms.spec.js & e2e/tests/layouts/standard.spec.js #945
  • updated playwright to v1.40.1 #949
  • removed elements from snapshot hide list as component snapshots are done per component rather than per page now #953
    • [data-test="jump-navigation"]
    • [data-test="source-code"]

Documentation updates