Upgrade Guide

This page documents all breaking changes or code deprecations between versions with examples on how to update them.

v13.2.2

Deprecated

All remaining .uomcontent [role='navigation']#globalsitemap css has been removed as it is no longer in use

Removed unnecessary .page-local-history css as it's only injected and styled in the Page Header

v13.2.0

Deprecation notice

The Section component has been deprecated and will be removed in a later version. It has been replaced with the Content Block

Before:

<section class="section">
  <div class="section__inner">...</div>
</section>

After:

<section class="content-block">
  <div class="content-block__inner">...</div>
</section>

v13.1.0

Sidebar Tabs now use <nav> instead of <ul>

Before:

<ul class="sidebar-tabs__list" role="tablist">
  <li>
    <a
      aria-controls="tab-sidebar-right-1"
      aria-selected="true"
      class="sidebar-tabs__tab"
      href="#tab-sidebar-right-1"
      role="tab"
    >
      Tab 1
    </a>
  </li>
</ul>

After:

<nav class="sidebar-tabs__list" role="tablist">
  <a
    aria-controls="tab-sidebar-right-1"
    aria-selected="true"
    class="sidebar-tabs__tab"
    href="#tab-sidebar-right-1"
    role="tab"
  >
</nav>

Deprecated

The following css has been removed as the <header> element was removed in a previous version

  • .uomcontent .page-header.fixed:not(.floating) header
  • .uomcontent .page-header header

Removed .uomcontent #uom-login.modal__dialog as it was not being used in the cms

v13.0.0

Breaking change

The 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

Before:

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

After:

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

Deprecation notice

The 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

Before:

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

After:

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

The 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

Before:

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

After:

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

v12.4.0

Deprecated

The class headerless has been removed and is no longer required. The codebase has been adjusted to allow the same functionality without the need for <div class="headerless"></div> in the markup. You can safely remove usage of this class in your codebase.

Remove:

<div class="headerless"></div>

v11.5.0

Updated Mega menu wrapper to a header

Before:

<div class="uom-megamenu">
  <div data-um-mega-menu="..."></div>
</div>

After:

<header class="uom-megamenu">
  <div data-um-mega-menu="..."></div>
</header>

v11.4.0

Deprecated

Timetable component has been removed and no longer works. If you were using it on your website you can now remove any references to it.

Classes marked for deprecation in v11.1.0 has been removed:

  • Global - .noborder, .invisible, .hide-text, .youtube5container, .youtube5placeholder, .contrib, .quarter, .margin-rule, .tilt-before, .tilt-after, .with-tilt-sibling, .showie
  • Accordion - .accordion__noanim
  • Button - .button-fill
  • Enquiry - .enquiry-form__thanks
  • Filtered listings - .filtered-listing-item--green, .filtered-listing-item--bronze, .filtered-listing-item--silver, .filtered-listing-item--blue, .filtered-listing-item--yellow
  • Form - .align-checkbox, .newsletter-box
  • Header - .bottom-align-inverted, .no-filter, .filter-blue, .filter-green, .filter-yellow, .filter-head, .stage, .fixed-bg, .embed-video-button, .video-loop
  • Listings - .listing--crop-height
  • Nav - .col-3, .sitemap-trigger
  • Search - .search-autocomplete
  • Timeline - .has-accordion
  • Typography - .timetable, .main-title, .line

v11.3.0

Deprecated

The class .linkgroup-title marked for deprecation in v11.1.0 has been removed.

v11.1.0

Breaking change

The recommended id has been changed: main ➡️ main-content. You should update your website and use main-content from now on.

<div role="main" id="main-content">...</div>

Deprecated

Maps component has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<div class="map-canvas">...</div>

Custom .highlight class for h1 has been removed.

<h1 class="highlight">...</h1>

v11.0.0

Breaking change

<div role="main">...</div> now requires an id. We recommend main-content as the Mega menu uses it.

View the Document Structure code example on Getting Started

<div role="main" id="main-content">...</div>

Deprecated

Classes marked for deprecation in v7.0.0 have been removed.

  • .soundcloud-cover and .soundcloud
  • .video .video--21-9 and .half .video
  • .diamond-mask and .staff-listing-detailed--diamond
  • .inset-left and .inset-right

Other deprecated classes have been removed.

  • .headerless
  • .gmap__canvas

Removed no-js from <html> tag.

Before:

<html lang="en" class="no-js">

After:

<html lang="en">

We now recommended you use the integration build for gen4.

Before:

<link href="https://dds-gen4.web.unimelb.edu.au/latest/latest/client.css" rel="stylesheet"  />
<script src="https://dds-gen4.web.unimelb.edu.au/latest/latest/client.js" async=""></script>

After:

<link href="https://dds-gen4.web.unimelb.edu.au/latest/integration/client.css" rel="stylesheet"  />
<script src="https://dds-gen4.web.unimelb.edu.au/latest/integration/client.js" async=""></script>

v10.1.0

Survey prompt has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<link rel="stylesheet" href=".../prompt.css" />
<script id="uom-prompt-script" src=".../prompt.js"></script>
<script id="uom-prompt-template" type="text/template">...</script>

Announcement component has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<div class="page-announcement">
  <a class="page-announcement__message" href="...">...</a>
  <button class="page-announcement__close" type="button">...</button>
</div>

Forms micro-library has been removed and no longer works. If you were using it on your website you can now remove any references to it.

<link rel="stylesheet" href=".../forms.css" />
<script src=".../forms.js"></script>

v9.2.0

Required node version has been updated from v12.0.0 ➡️ v12.22.0.

v9.0.0

Required node version has been updated from v8.16.0 ➡️ v12.0.0.

v8.6.0

Dropped support for IE9, IE10, and IE11 🎉

Deprecated

.ie9, .ie10, .ie11 classes have been removed. You can safely remove any custom classes targeting those browsers

v8.5.0

Deprecated

The generic .grey class has been removed.

<h1 class="grey" src="..." />
<p class="grey" src="..." />

Removed --col-primary-light-grey css variabled as it is not used in Gen2. Please update any usage of this variable in any custom css you may have.

v8.1.6

Pathfinder headings now use <h3> instead of <strong> tag to meet WCAG guidelines. The <strong> tag will be deprecated in a future release.

v8.1.5

Required node version has been updated from v6.9.3 ➡️ v8.16.0

v8.1.0

Deprecated

The following image classes have been removed:

<img class="desaturate" src="..." />
<img class="semi-desaturate" src="..." />

v7.0.0

Deprecated

Features marked for deprecation in v6.0 have now been removed.

  • .listing
  • .feature-listing and .feature-listing-3
  • paragraph elements inside .navigation-block-listing items
  • .navigation-block-listing.stacked, .navigation-block-listing > ul.wide, and .navigation-block-listing > ul.narrow
  • .top-unit

Profile headers and People search results

Using an img element inside profile headers and people search results is now deprecated. This does not affect profile header min. Please use a div with a background image instead:

Before:

<img class="profile-header__photo" src="..." alt="" width="..." height="..."
<img class="person__photo" src="..." alt="" width="..." height="..."

After:

<div class="profile-header__photo" style="background-image: url(...);"></div>
<div class="person__photo" style="background-image: url(...);"></div>

Lists

Class ticked-list can no longer be used on a parent of the list element; it must be used on the list element itself:

No longer supported:

<div class="ticked-list"><ul> ... </ul></div>

Correct:

<ul class="ticked-list">...</ul>

Steps lists and accordions

Lists used inside steps lists and accordions must now be direct children of the root list items.

This is fine

<ol class="steps">
  <li>
    <h2>Headline</h2>
    <ul>
      <li>Item</li>
    </ul>
  </li>
</ol>

This is not fine

<ol class="steps">
  <li>
    <h2>Headline</h2>
    <div>
      <ul>
        <li>Item</li>
      </ul>
    </div>
  </li>
</ol>

Document structure

The document structure no longer includes HTML5shiv for IE8 and lower. Please update your site's main layout file, as well as any stand-alone pages:

Remove

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

Turbolinks

The design system no longer listens for Turbolinks events page:load and page:restore. Instead, you should listen for them and call the new API methods yourself:

document.addEventListener('page:load', window.uom.applyInjection);
document.addEventListener('page:load', window.uom.initAllComponents);
document.addEventListener('page:restore', window.uom.applyInjection);
document.addEventListener('page:restore', window.uom.initAllComponents);

JS API

The following JavaScript APIs have changed:

  • window.UOMloadInjection ➡️ window.uom.applyInjection
  • window.UOMloadComponents ➡️ window.uom.initAllComponents
  • window.UOMbind & window.UOMbindIcons ➡️ window.uom.initComponent
  • window.cssesc ➡️ window.uom.vendor.cssesc
  • window.loadScript & window.loadStylesheeet ➡️ window.uom.utils.loadScript & window.uom.utils.loadStylesheeet

v6.0.0

Alerts

Alerts are now called notices. The type of the notice must now be specified with a separate class

Before:

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

After:

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

Tabs

The tabbed-course class is now deprecated. It was just an alias for tabbed-nav, so you can use this class instead to implement full-width tabs.

Before:

<div class="tabbed-course" data-tabbed="" id="nav"></div>

After:

<div class="tabbed-nav" data-tabbed="" id="nav"></div>

Local Navigation

The local navigation markup has changed: the root element with id=sitemap must no longer have class no-js.

Before:

<div id="sitemap" class="no-js" role="navigation"></div>

After:

<div id="sitemap" role="navigation"></div>

People

Diamond staff listing now requires an extra class:

<ul class="staff-listing-detailed staff-listing-detailed--diamond">...</ul>

Tables

Sortable tables are no longer automatically sorted on page load. You can opt-in to this behaviour by adding the data-sort-initial attribute to the heading cell of the column you wish to sort.

<th data-sort-initial="" scope="col">...</th>

window.loadScript()

window.loadScript() now returns a promise instead of accepting a callback

Before:


window.loadScript('https://some.url', function () {
  // success callback
});

After:

window.loadScript('https://some.url')
  .then(function () {
    // success callback
  })
  .catch(function () {
    // failure callback
  });