v13.0.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.

Breaking changes 💥

  • Grid now defaults to a one column grid instead of four. To use a four column grid you will need to add grid--cols-4 #549

Before:

<div class="grid">...</div>

After:

<div class="grid grid--cols-4">...</div>

New features ✨

  • You can now specifiy the number of Grid columns per breakpoint by using the format: grid--cols-[xs,sm,md,lg]-[4,3,2] #549
<div class="grid grid--cols-xs-3 grid--cols-md-2">...</div>

<p class="text-uppercase">...</p>

<div class="embed embed--square">...</div>

Add to <head> of the document

<script src="//dds-gen3.web.unimelb.edu.au/v13.0.0/preview-banner.js" defer></script>

Deprecation notices ⚠️

  • Grid column classes grid-cols-[2,3,4] have been renamed to grid--cols-[2,3,4]. Please update to these new classes as the old ones will be deprecated in a later version #549

Before:

<div class="grid grid-cols-2">...</div>

After:

<div class="grid grid--cols-2">...</div>
  • Embedded media class embed--21_9 is now embed--widescreen. Please update to this new class as the old one will be deprecated in a later version #548

Before:

<div class="embed embed--21_9">...</div>

After:

<div class="embed embed--widescreen">...</div>

Bug fixes 🐛

  • The Cards component relies on all images having the same aspect-ratio - but this is not always possible. By default images are now cropped to a 16:9 ratio. They can also cropped to a 1:1 ratio by using the card__image--square class. #569
<img class="card__image card__image--square" alt="..." src="...">
  • Page Headers containing very long breadcrumbs are now hidden behind the search & menu buttons #563
  • Improvements to the Grid column classes - grid--cols-2, grid--cols-3, and grid--cols-4 #549
    • Adjusted the two, three, and four column grid to change from one ➡️ two columns on --bp-tablet
    • Adjusted the three column grid to change from two ➡️ three columns on --bp-desktop
    • Adjusted the four column grid to change from two ➡️ four columns on --bp-x-desktop
  • Grid now allows for different element types when using .grid--fill-last & .grid--fill-first
    • :first-of-type and :last-of-type only work when the child elements are the same, but won't work if they are different. It has been changed to use :first-child & :last-child #577

Documentation updates

Other changes

  • Updated gen4 version from v1.2.6 ➡️ v1.2.7 #568
  • Updated webpack to allow inlining of css by using ?inline #498
import styles from './index.css?inline';
  • Some minor css changes:
  • Figure now functions the same as .figure--min so you may not need to use it anymore #548
  • Tidied up top alignment of text and image in with-figure components #548
  • Added display: flow-root to .with-figure to remove requirement of .clearfix #548
  • iframe[src*='//www.youtube.com'], iframe[src*='//player.vimeo.com'], and video default settings updated to account for uses outside of Figure and Embedded media #548
  • Removed padding on .center class #544
  • Removed body min-height: 100% from assets/shared/_normalize.css #557
  • documentation related css & js is now transpiled & bundled with webpack #555
  • ace-editor & rgb-hex are now imported locally #555
  • Updated .gitignore, .prettierignore, and .stylelintignore #564
    • Removed .docker folder
    • Updated _site ➡️_site*
  • You can now configure the number of cores to use for e2e tests in .env #586
TEST_WORKERS=4
  • You can now pass a custom port number to docker in .env #553 #586
TEST_PORT=8081
  • Changed e2e visual snapshots test threshold from 0 ➡️ 0.2 as it was causing some tests to fail when nothing had been changed #585
  • Updating gen3 or gen4 versions caused some e2e tests to fail as they were referencing their older versions. They are now being mocked so they always stay the same #553
  • Created e2e tests for Backgrounds documentation page #558
  • e2e snapshots now use body as the selector allowing whole page snapshots #557
  • e2e snapshots tests can now include the header and footer as part of their snapshot #557
await checkPageSnapshot({ header: true, footer: true });
  • Sometimes the node process hung when the tests finished or were cancelled by the developer causing subsequent tests to fail as it couldn't access the existing process. Setting reuseExistingServer: false to always use a new node proecess fixes this #574
  • Added cross-env to playwright.config.js to allow windows machines to run the e2e tests #574
  • Removed util from .eleventy.js as it wasn't being used #498
  • Split Page Header & Preview Banner e2e tests into separate files #584
  • e2e tests now hide video elements as they were causing flaky tests #548