v6.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 💥

<!-- BEFORE -->
<p class="alert-success">Success!</p>

<!-- AFTER -->
<p class="notice notice--success">Success!</p>

New features ✨

Bug fixes 🐛

Advanced breaking changes 💥

If you're an advanced user and have written your own CSS overrides or used the design system's JS APIs, please review the following additional breaking changes:

  • Browser styles are now normalised with normalize.css, and button, input, optgroup, select, and textarea elements inherit their font-size, font-family and line-height from their parent. This fixes a few consistency issues across browsers and implementations, especially with buttons (which can be implemented with <button>, <input> and <a>). If you wrote your own CSS overrides, you may be able to clean them up a little by removing declarations already covered by normalize.css. https://github.com/unimelb/unimelb-design-system/pull/763
  • Elements with class or attribute hidden are now forcibly hidden with display: none !important;. Although this should not break anything, it may uncover bugs where the hidden class or attribute was being set by mistake. Any overrides meant to work around this issue can now be removed (see PR https://github.com/unimelb/unimelb-design-system/pull/797 for examples).
  • window.loadScript() now returns a promise instead of accepting a callback: https://github.com/unimelb/unimelb-design-system/pull/762
// BEFORE
window.loadScript('https://some.url', function () {
  // success callback
});

// AFTER
window.loadScript('https://some.url')
  .then(function () {
    // success callback
  })
  .catch(function () {
    // failure callback (script failed to load or an exception occurred in the success callback)
  });
  • The design system now polyfills ES6 Promises with es6-promise, a strict implementation of the specification. If you're using the same polyfill on your site, you can now remove it. If you are using a more powerful Promise library, you should consider updating your code to work without it. https://github.com/unimelb/unimelb-design-system/pull/762
  • icon-over elements are no longer injected when binding icons, so you can safely remove any styles targeting them https://github.com/unimelb/unimelb-design-system/pull/795
  • The injected markup (as opposed to the initial, documented markup) for the local navigation has changed significantly. Some elements have changed and the CSS now refers to a number of new HTML classes that are dynamically added with JS. If you've hacked around the local nav with JS or written CSS overrides, make sure to update your code.

Other changes