v7.0.1

Other changes

• Predeploy fixes #935
• Move mapbox tileset credentials to env #934
• Update global nav links to new study site #933
• Refactor maps component to remove invalid google maps key #932

v7.0

🌐 Documentation site for v7.0

This major release covers 13 issues and 40 pull requests. Highlights include a new figure component and, under the hood, the switch to PostCSS and webpack 2, which cuts down compilation time by about 40%. Before you upgrade, please take note of the following breaking changes and deprecation notices, which may affect your site:

Breaking changes 💥

• Features marked for deprecation in v6.0 have now been removed. This includes the following classes: listing, feature-listing, and some specific uses of navigation-block-listing. See full list in PR #875.

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

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

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

  <!-- NO LONGER SUPPORTED -->
  <div class="ticked-list"><ul> ... </ul></div>
  
  <!-- CORRECT -->
  <ul class="ticked-list">...</ul>

• Lists used inside steps lists and accordions must now be direct children of the root list items. See issue #810 for an example. This restriction allows for significant simplification of, and improvements to, the base list styles as mentioned in the Other changes section below.

• The two privacy links in the subtext of the enquiry component were broken or causing redirects. They have now been updated; please update them as well on your sites. #851 #861

• The recommended layout no longer includes HTML5shiv for IE8 and lower. Please update your site's main layout file, as well as any stand-alone pages (e.g. 404 and 500 error pages). #856

• ⚙️ 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);

• ⚙️ The following JavaScript APIs have changed (see Other changes and #856 for more info):

  • 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.<loadS...>

Deprecation notices ⚠️

The following features are marked for deprecation and will be removed in the next major version of the design system, v8.0:

• Inset and full-width figures: classes inset-left, inset-right and full-width (only when used on a figure element, except inside .half) ➡️ use the new figure component instead #888
• Video and SoundCloud embeds: classesvideo, video--21-9, soundcloud and soundcloud-cover ➡️ use the new embed and figure components instead #882 #888
• Diamond staff listing: classes diamond-mask and staff-listing-detailed--diamond (since v6.0) ➡️ use the normal detailed staff listing instead #884
• Inset timeline: not supported by new figure component (timelines are too wide to be inset on tablet devices) #888

New features ✨

• 🖼 Figure component to streamline the use of images and other self-contained units of content (videos, tables, etc.) on design system pages. The component provides a clean, consistent, and versatile markup solution that covers many scenarios from inset tables to full-width video embeds. #888
• 📹 Embed component to deal with third-party embeds, notably from YouTube, Vimeo and SoundCloud (previously documented on the now defunct Media page). In most cases, embeds should be used inside the new figure component. #769 #882 #888
• 🔍 Sub-links in search results #840 #874
• 🚫 Disabled styles for text input fields (with attribute disabled) #676 #877
• 🎗 Event ribbons to highlight, for instance, booked out events #886 #889

Bug fixes 🐛

• Bottom-margin missing on images in simple listings when used inside section #863 #864
• Lead paragraph missing padding when jumpnav is active #730 #876
• Lists missing bottom padding when used inside steps list #810 #878
• Long caption breaks inset figures #881 #888
• Use span instead of div when injecting icon labels. Icons are most often used like so: <span data-icon="...">, and a div inside a span is not valid HTML. #860
• Injected footer contains broken links and links that lead to redirects #861
• Jumpnav not recalculating page height when opening/closing accordion #879 #891
• Filtered listing asides disappear below listings on mobile #896

Other changes

• ✨ Replace unimelb logo in header, footer and global nav with new version from brand architecture project. This shaves about 80 kB off every design system page. #892
• 💯 Simplify and improve base list styles. All lists, whether nested or used inside accordions and steps lists, should now have clean and consistent spacing styles. See PR #878 for a few before/after screenshots.
• Make 3-column and 2-column simple text listings wider and increase font size of all simple listings #893
• Tweak ligherblue colour to meet accessibility contrast requirement #853 fd36988
• Use strong elements instead of headings in global nav to reduce the amount of information spoken to screen reader users #854
• Use a simple img element for the unimelb SVG logo, improve the alt text for accessibility, and remove the PNG fallback #859
• Improve accuracy of scrolling thresholds when jumpnav and global header transition between static and fixed positioning. Also, improve performance of their scroll and resize handlers with lodash' debounce and throttle utilities. #891
• 🎉 Switch from Sass to PostCSS and use cssnext plugin #866
• 🍺 Switch from npm to yarn. See PR #867 for some example commands.
• 🍻 Upgrade to webpack 2 and improve config #868 #880
• ℹ️ Thoroughly document all design system workflows from development to deployment, including the use of GitHub milestones and the drafting of release notes #855
• ℹ️ Remove designer/content editor pages from web.unimelb and simplify homepage #883
• ⚙️ Switch to babel-preset-env (babel-preset-es2015 is deprecated) #870
• ⚙️ Combine the injection and components webpack targets into a single uom target to avoid having to concatenate them later on with a Rake task #856
• ⚙️ Move all components (including injection components) to the root of the assets folder and remove duplicated code (e.g. modals, icons, etc.) #856
• ⚙️ Clean up and reorganise utility modules (e.g. smoothScrollTo, loadScript, etc.) Also, use lightweight third-party libraries rather than custom code when possible. #856 #869
• ⚙️ Remove debranded target and refactor entry file of remaining targets with ES6 #856
• ⚙️ Make es6 extension optional and add aliases to Webpack config to make importing/requiring files easier #856
• ⚙️ Initialise CreateNameSpace module only once as part of the injection, instead of three times #856
• ⚙️ Refactor component initialisation code (#856):
  • Create ComponentManager module with methods to register and initialise components.
  • Let each component declare:
    • its label (i.e. name) - e.g. Accordion.label = 'Accordion',
    • the selector to use to find occurrences of the component on the page - e.g. IconHelper.selector = '[data-icon]',
    • any JS and CSS dependencies it relies on that need to be loaded asynchronously - e.g. PhotoSwipe and Isotope for ...

v6.0.1

🌐 Documentation site for v6.0.1

This patch release covers 1 issue and 7 pull requests. It resolves a couple of regressions introduced in v6.0, and achieves an important step towards cleaning up the design system's codebase.

Bug fixes 🐛

• 👍 💅 Gallery thumbnail ratios are not computed properly. The ratios are now computed from the value of the data-size attributes rather than from the thumbnails themselves. #841
• 🌀 In-page tab buttons switch to wrong tab panels #842 #843

Other changes

• 🎉 Remove compass and every one of its mixins (rem, adjust-font-size-to, padding-leader, etc.) Set up postcss-cssnext to take care of auto-prefixing and rem fallbacks, amongst other features. #844
• ℹ️ Document process to update legacy injection in README #838
• 📊 Relax version tracking regex to fix tracking on some WordPress sites #839
• Fix references to old notice syntax in docs #845

v6.0

🌐 Documentation site for v6.0

This major release covers a staggering 29 issues and 46 pull requests, a new record! Before you upgrade, please take note of the following breaking changes, which may affect your site:

Breaking changes 💥

• 🎉 IE8 is officially no longer supported. All IE8-related code, including CSS overrides, old ES5 shims and other JS workarounds, has been removed. #751

• ❗️ To avoid confusion, alerts are now called notices to match the title of the documentation page. The type of the notice must now be specified with a separate class (note the double dash): #783 #782

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

• 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. #717 #792

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

• 🔹 Diamond staff listing now requires an extra class: <ul class="staff-listing-detailed staff-listing-detailed--diamond">...</ul>

• ↕️ 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. #809 #811

• ⚠️ Deprecation notice: the following listings are deprecated and will be removed in the next version: default listing (listing), feature listing (2 and 3 columns: feature-listing, feature-listing-3), navigational block listing with text (3 and 4 columns + wide, narrow and stacked: navigation-block-listing, stacked). Use the new simple-listing instead (see New features section below).

• The top-unit class in block listing has been deprecated for a while but was still being used in the example markup. Please check that your markup is in line with the updated example. #831

New features ✨

• Notices no longer have to be paragraphs #782
• Allow showing captions in gallery with class image-gallery__caption #671 #804. The class can be added to:
  • the figcaption element in order to show the same caption in the gallery as in the viewer,
  • a separate paragraph element in order to show a different, shorter caption in the gallery.
• Add variant classes for small and medium-width galleries: image-gallery--small and image-gallery--medium #733 #804
• Brand new listing for logos, with vertical centring, no resizing or cropping of images, and ability to add link and short caption #801 #698 #812
• Tile with yellow strip for exhibition events in block listing - use class exhibition instead of event #771 #806
• Soft, back button with left pointing arrow #815
• Use attribute data-sort-as="text" on sortable table column to use simple text sorting algorithm (e.g. "1", "10", "2") instead of the default natural sorting algorithm (e.g. "1", "2", "10"). #809 #811
• Allow disabling sorting on specific columns in sortable table with attribute data-sort-skip #814
• New simple listing to replace the now-deprecated default, feature and navigational block listings. simple-listing brings more consistent and semantic markup, and resolves a number of image sizing issues with the old listings. #813
• The local navigation markup no longer requires the use of inner containers for nesting--you can simply nest unordered lists without any extra markup. Note that for performance reasons, if your system does allow you to add inner containers, you should keep doing so. #773 #820
• Allow adding a definition list below a search result's heading to display meta information (e.g. year and type for handbook results) #821
• Images in block listing can now be provided as background images with class block-listing__img. #709 #831

Bug fixes 🐛

• Firefox prints only one page and ignores the rest of the document #750 #756
• Lists inside notices don't inherit text colour #781 #782
• Heading not left aligned in short course header when using h1 instead of h2 #784 #788
• Jumpy behaviour when using multiple buttons side by side #200 #789
• Blockquotes mis-aligned inside article #780 #790
• Emphasised text inside half container has display: block #777 #791
• Gmaps overflow viewport on mobile #642 #803
• Length of content affects size of staff listing detailed items #598 #802
• Broken zoom icons when hovering thumbnails in gallery #804
• Janky animation when opening/closing gallery viewer #804
• Gallery looks really bad while loading #804
• Broken masonry layout in gallery on IE9 (all images stacked onto one column) #804
• Navigating back to a gallery page on which the viewer was open does not re-open the viewer #804
• SVG elements injected by the design system are focusable when navigating with the keyboard in IE #669
• Headings in course-progression table are indistinguishable #486 #799
• Unexpected scrolling in single-block-open accordion #533 #800
• Default and feature listings don't deal with images very well. Workarounds have been implemented, including the addition of a helper class listing--crop-height to crop images to a fixed height, but the listings are now deprecated and will be removed in the next version. The new simple listing must be used instead (see New features section above). #702 #709 #747 #806
• Similarly, in block listing, you can now wrap images inside containers with class crop-height to fix image sizing issues, but a better solution has been implemented in the form of background images. #709 #806 #831
• Text in hero listing items is misaligned #747 #806
• Image in all-day event tile in block listing is misaligned #767 #806
• Tiles without links in block listing have same hover state as tiles with links - use class no-anim to remove hover effects #806
• Sorting issues in sortable tables, especially with currency and patterned data (e.g. unit codes). Now using the browser's built-in natural sorting algorithm by default. #809 #811

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. #753 #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 #797 for examples).

• ⚙️ window.loadScript() now returns a promise instead of accepting a callback: #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...

v5.0

🌐 Documentation site for v5.0

This major release covers 13 issues and 31 pull requests. Before you upgrade, please take note of the following breaking changes, which may affect your site:

Breaking changes 💥

• The disabled state/class for pathfinder boxes is now deprecated. A note has been added to suggest a couple of alternatives. #608
• Disabled buttons are now documented and their markup has been formalised. A distinction is now made between a button implemented with an <a>nchor element vs. with a <button> or <input> element. The former requires the disabled class along with the aria-disabled="true" and tabindex="-1" attributes, while the latter simply requires the disabled attribute. #608
• Change window scrolling strategy to use window.scrollTo() and window.[scrollY|pageYOffset] - this will disable smooth scrolling in IE8, in anticipation of deprecating support entirely in the next major release (v6.0). #691
• The .no-js class is now required on the html element: <html class="no-js" lang="en"> #695
• The login modal feature is now deprecated, the login button will no longer respond to the attribute data-modal-target. #694
• Major refactor of the sidebar layout and sidebar tab components, renaming foundation classes to prevent ongoing namespace issues. Please read through the PR notes if you currently use the sidebar layout and/or sidebar tabs! #607 #725 #732 #736
• To avoid any risk of assistive technologies skipping the content of a semantic <aside>, all styling will now be applied to <div class="aside"> instead. #716
• Semantic <blockquote> element has a new style by default, the original style is still available by using class="blockquote-classic" #615 #721
• Deprecate original (5-col) block listing, replace style with the .narrow (4-col) variant #718 #724

New features

• Add the ability to set sort order on sortable table #697 #706
• Add .desaturate class for images (hover removes effect) #332 #712
• New blockquote style that can be inset on the left or right of a block of text #615 #721 #739 #744
• Unstyled radio and checkbox form controls now available #470 #719 #722

Bug fixes

• Use consistent placeholder text and ARIA labels on injected search forms #704
• Properly toggle .no-js class on document root #695
• Reinstate missing vendor prefixes stripped out by default autoprefixer rules #696
• Use consistent colour for input and textarea placeholders #720
• Restore base level padding to ul and ol to correct proportions #703 #723 #726 #727
• Hide 3rd party embeds in modals at page load #745
• Expand bracket list label space to allow for 3 digits #742 #743

Other changes

• Improve flash messages documentation to clarify markup constraints #714 #715
• ✨ Improve focus styles and general accessibility of some components #608 #728 #729
• #️⃣ Improve performance of smoothScrollTo method #691
• Major tidy up of foundation styles, remove redundant code and deprecate IE6/7 features supported in base (this is not a breaking change, as IE6/7 have never been fully supported) #690
• Refactor of modal component markup and styles #694
• Double block listings now have background-size: cover set by default #731
• Upgrade node version to 6.5.0 and npm v3+ (flat tree dependency resolution), compatible with our other node.js projects #741

v4.4

🌐 Documentation site for v4.4

This minor release covers 3 issues and 8 pull requests. This is minor release, a few bug fixes and the addition of some minor features, no breaking changes.

New features

• Add a bracket ol style for legal documents #664
• Add vimeo icon #678 #685
• Use conventional icons to indicate column is sortable in sortable table (up/down) #686

Bugs fixed

• Fix width regression in .lead.left section style #683 #684
• Remove doubled list numbering in accordion, general tidy up of all lists within .steps list style #674 #681
• Fix default ol type styling #687
• Change global search query to q #688

Other changes

• Reduce webpack console output when developing locally #677

v4.3

This minor release covers 10 issues and 19 pull requests. This is minor release, many bug fixes and some reworking behind the scenes, with a few new functions and no breaking changes.

New features

• General styles for nested ol using counter numbering #664
• Added check (tick) without circle icon #661 #665
• Sortable table #668 #548

Bugs fixed

• Display ticked lists correctly inside an accordion #648 #654
• Respect type= attribute on ol to select list style #641 #655
• Constrain link in event detail aside, to trigger ellipsis on long email #640 #658
• Constrain inset (floating) figure to modal width #643 #649
• Reduce selector specificity on .course-select #635 #660
• Solve IE display issue by using fixed height on flex box container in narrow listing #649 #666

Other changes

• Documentation fixes and updates #634 #637 #644 #646 #650 #656 #657 #662 #663
• Test ruby code quality with rubocop, preparing for automation on a build server #652
• Improve URL safety, by allowing IDs that start with a number to be used in the jump nav and tab components #636
• Replace @extend and %placeholder use in precompiled code with @include and @mixin #651 #657 (this is an implementation feature, there should be no visible change in the deployed system)
• API keys have been moved out of the repo using .env, this was necessary as Google Maps is now enforcing the API key requirement #673

v4.2.1

This patch release covers 1 pull request.

Other changes

• Revert behaviour on filtered listing, allow any case querystring to match #633

v4.2

This minor release covers 3 issues and 11 pull requests. This is a bug fix release masquerading as a minor release, one small added feature and no breaking changes.

Bugs fixed

• Add data-required validation to radio button input type. Typically, where radio buttons are used one option is selected as a default, but the validation code should be available to radio buttons as well as checkboxes #567 #628
• Remove default image padding on staff-listing-detailed under a 2-column container, this had been causing an uneven border #627
• Update nested list styles, and add full display to samples #626
• Fix a variable name regression in the Google Maps component that was preventing pins from showing #625
• Allow section filter and tag filters to be independently omitted in Filtered Listing (previously, both were required) #623
• Remove constraining width of news index when wrapped inside a section #619
• Remove unnecessary vendor prefixes in CSS #617
• Fix centring of modals on IE11 and below #616
• Add hard jump to tab position on page load for Firefox, to prevent unexpected scroll to footer on a tabbed page #528 #630

New feature

• Add 21:9 / 2.35:1 / cinemascope aspect for video embeds (this can be done by adding the class video--21-9 along with the standard video class, an example is provided in the documentation) #620 #621

Other changes

• Add a pre-opened accordion example in the documentation #629

v4.1.1

This patch release covers 6 issues and 5 pull requests. This is a bug fix release, no new functionality and no breaking changes.

Bugs fixed

• Replace missing border for pathfinder-4.soft #610 (was overridden by a newer style)
• Trigger a redraw call when transitioning tabs to allow 3rd party code (google maps, isotope) to fire properly #611 #564 #208
• Truncate to ellipsis for extra long details in the left-side panel of event details #559

Other changes

• Improve new search box style (match transparent background, layer on top of version indicator on web.unimelb) #606 #590
• Documentation updates and tidy up #602