v12.4.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 ✨

  • Tags have been split out into their own component rather than being coupled tightly to Events #510
  • Contact box now has a data-type="alt" modifier allowing the dt and dd elements to share the same line. #508
<div class="contact-box">
  <dl>
    <dt data-type="alt">...</dt>
    <dd>...</dd>
  </dl>
</div>

Deprecation notices ⚠️

  • 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 #517

Remove:

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

Bug fixes 🐛

  • Notices - <p> nested inside of <div> now doesn't add bottom margin #504

Other changes

  • Updated Contact box design #508
  • Removed unknown functions from stylelint rules #515
  • Removed css @supports as we only support evergreen browsers now #516
  • Updated gen4 version from latest ➡️ v1.2.4 #514
  • Improved build process #507 #513
    • Updated webpack from v2.5.1 ➡️ v5.74.0
    • Updated webpack.config.js to transpile all js code.
    • Renamed all .es6 files to .js
    • Refactored from CommonJS module system ➡️ ES Modules where possible.
    • All ES Modules use named exports instead of default export
    • Updated all postcss plugins to the latest version
    • Removed deprecated postcss-cssnext and replaced with postcss-preset-env
    • Removed deprecated extract-text-webpack-plugin and replaced with mini-css-extract-plugin & css-minimizer-webpack-plugin
    • Removed uglify-es-webpack-plugin as webpack v5 now handles that out of the box
    • Removed locale-compare-polyfill & es6-promise polyfills as they are no longer needed
    • Removed browserslist & caniuse-db from package.json as they should be updated using npx update-browserslist-db@latest
  • Removed usage of color, shade, color-mod, and alpha as were never made official and were removed in postcss-preset-env
  • Created e2e tests to test component functionality, enabling removal of some unit tests #509
  • data-test="..." has now been hidden in the documentation source code viewer as they're not required when implementing in CMS etc #509
  • Tidied up Grid documentation examples #511
  • It is now easier for non-developers to update documentation pages by using markdown instead of html #504
  • Some improvements have been added to the importing of a component with component.html #504
    • You can now hide the source code viewer by using showCode="false"
    • You can show the grid on a component that uses Grid by using showGrid="true
    • For components that don't have a max-width set you can use container="true" to emulate that functionality