Skip to content

GOV.UK Frontend v5.0.0-beta.0

Pre-release
Pre-release
Compare
Choose a tag to compare
@romaricpascal romaricpascal released this 26 Oct 16:35
· 2020 commits to main since this release
v5.0.0-beta.0
68e91a4

New features

Added a new Task list component

We’ve added a new component which creates lists of tasks that users need to complete.

Each task in the list can have a title, status, link and an optional hint. When a link is added, the whole row is clickable.

This change was made in pull request #2261: Task list component..

Added focus style for links containing non-text content

We've added a new focus style for use with non-text content, such as links containing images and focusable elements that are not form controls. This new style paints a visible yellow and black outline around the entire element, ensuring the focus style is visible in all situations.

For links containing images, we've added the govuk-link-image class. You should only use this class on links containing an image. If it also contains text, continue to use govuk-link instead.

<a class="govuk-link-image" href="#">
  <img src="..." alt="...">
</a>

You can use these styles in your own code by including the govuk-focused-box Sass mixin.

This change was made in pull request #3819: Add linked image focus style.

New link styles are now enabled by default

In GOV.UK Frontend v3.12.0 we introduced new link styles which are now enabled by default. They have:

underlines that are consistently thinner and a bit further away from the link text
a clearer hover state, where the underline gets thicker to make the link stand out to users

The new link styles are now enabled by default. If you are setting $govuk-new-link-styles to true in your Sass you can now remove this.

This change was made in:

Customise inverse button colours

For non-GOV.UK branded websites, you can now change the colours of inverse buttons - buttons intended for use on dark backgrounds.

To change the inverse button's background colour, set the $govuk-inverse-button-background-colour Sass variable.

To change the inverse button's text colour, set the $govuk-inverse-button-text-colour Sass variable.

@import "node_modules/govuk-frontend/govuk/base";

$govuk-inverse-button-background-colour: govuk-colour("yellow");
$govuk-inverse-button-text-colour: govuk-colour("black");
@import "node_modules/govuk-frontend/govuk/components/button/index";

This change was made in pull request #4043: Add ability to customise inverse button colours.

Precompiled CSS and JavaScript

The precompiled CSS and JavaScript files found in our GitHub releases are now also published to govuk-frontend on npm.

These changes were introduced in:

Check your tags align with design changes to the Tag component

We’ve changed the design of the tag component to improve accessibility and readability.

Text within the tag is no longer bold and uppercase with extra letter spacing. It’s now regular 19px text with the first letter of a word capitalised and the rest of the content lowercase. Due to this, there might be changes to the width of existing tags.

The colours have also changed to make them more distinguishable from buttons.

Check your service is using the correct capitalisation in the contents of tags and tags within phase banners.

This change was made in:

Breaking changes

You must make the following changes when you migrate to this release, or your service might break.

"Compatibility mode" features are no longer supported

GOV.UK Frontend no longer supports compatibility with our old frameworks:

  • GOV.UK Elements
  • GOV.UK Template
  • GOV.UK Frontend Toolkit.

You can no longer incrementally add GOV.UK Frontend to an existing service using one of these previous frameworks. We have removed the following Sass variables and one mixin which controlled compatibility mode:

  • $govuk-compatibility-govukelements
  • $govuk-compatibility-govuktemplate
  • $govuk-compatibility-govukfrontendtoolkit
  • the compatibility-mode mixin which automatically checked if any of the 3 control variables were set to true

We’ve additionally removed features that were managed using the above variables. The following features and their corresponding variables have now been removed:

  • access to the legacy colour palette using $govuk-use-legacy-palette
  • access to the legacy font using $govuk-use-legacy-font
  • use of legacy tabular fonts using $govuk-font-family-tabular
  • the ability to not use rem font sizes using $govuk-typography-use-rem

These changes were introduced in:

Update the HTML for warning text

We've removed the .govuk-warning-text__assistive class and its styles from GOV.UK Frontend. This class is unnecessary, as it duplicates the functionality of the .govuk-visually-hidden class already present in Frontend.

If you’re not using Nunjucks macros, update your warning text HTML to replace the govuk-warning-text__assistive class with the govuk-visually-hidden class.

This change was introduced in pull request #3569: Remove unnecessary class from Warning Text component.

Update package file paths

In preparation for additional build targets, we've moved our package files into a directory called dist.

If you’re using Node.js and other bundlers

Replace govuk-frontend/govuk with govuk-frontend/dist/govuk in any JavaScript require() or import file paths.

For example using require():

const Button = require('govuk-frontend/dist/govuk/components/button/button')

For example using import:

import Button from 'govuk-frontend/dist/govuk/components/button/button.mjs'

If you’re including JavaScript directly

Replace GOV.UK Frontend all.js with govuk-frontend.min.js and use <script type="module"> for ES modules:

<script type="module" src="{path-to-javascript}/govuk-frontend.min.js"></script>

Next replace <script>window.GOVUKFrontend.initAll()</script> to import and initialise GOV.UK Frontend using ES modules:

<script type="module">
  import { initAll } from '{path-to-javascript}/govuk-frontend.min.js'
  initAll()
</script>

If you import JavaScript using a different method, you might need to make some changes.

Refer to the detailed guidance on importing JavaScript.

If you’re using Sass

Replace govuk-frontend/govuk with govuk-frontend/dist/govuk in any Sass @import paths.

For example:

@import "node_modules/govuk-frontend/dist/govuk/all";

If you’ve added node_modules/govuk-frontend as a Sass import path, update it with the /dist suffix:

loadPaths: [
  'node_modules/govuk-frontend/dist'
]

If you’re using Nunjucks

Replace govuk-frontend with govuk-frontend/dist in any nunjucks.configure() search paths:

nunjucks.configure([
  'node_modules/govuk-frontend/dist'
])

These changes were made in the following pull requests:

Update the <script> snippet at the top of your <body> tag

Page templates now include a new govuk-frontend-supported class on the <body> tag when GOV.UK Frontend JavaScript components are fully supported.

If you are not using our Nunjucks page template, replace the existing snippet:

<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>

with:

<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>

Update the hash used by your Content Security Policy

If your Content Security Policy uses a hash to let the snippet above run, you'll need to update it from:

sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=

to:

sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=

Check your browser console for component initialisation errors

GOV.UK Frontend JavaScript components now provide errors. The following list shows the type of errors and the situations in which they occur:

  • SupportError - when GOV.UK Frontend is not supported in the current browser
  • ElementError - when component templates have missing or broken HTML elements
  • ConfigError - when component JavaScript configuration does not match our documentation

These errors will be:

To make sure the components behave as intended, we encourage you to check your browser console and address any errors by updating your markup or configuration.

These changes were introduced in:

Check the Details component works as expected

The Details component no longer uses JavaScript, and is no longer polyfilled in older browsers.

If you are not using our Nunjucks macros, make sure you remove the data-module="govuk-details" attribute from all <details> elements.

If you have extended browser support requirements, check the Details component works as expected in older browsers.

This change was introduced in pull request #3766: Remove JavaScript from Details component.

Check the ‘Disabled buttons’ work as expected

The disabled attribute on ‘Disabled buttons’ created using our Nunjucks macros no longer includes a value.

If you are using $button.getAttribute('disabled') to check for the disabled attribute in JavaScript, this will now return an empty string. This might cause unexpected behaviour if you are relying on the return value being the string 'disabled' or being truthy.

Instead, we recommend checking for the disabled attribute using $button.hasAttribute('disabled') or the $button.disabled IDL attribute.

This change was introduced in pull request #2830: Set the boolean disabled attribute consistently in the button component.

Check the mobile menu button in the Header component works as expected

We've removed some styles from the .govuk-header__menu-button class. These styles were included on the mobile menu button to avoid introducing a breaking change in GOV.UK Frontend v4.3.0.

If you're not using Nunjucks macros, and have not done so already, add the hidden attribute to the button's HTML to ensure it continues working as expected.

You do not need to make any changes if using the Nunjucks macro.

When working correctly, the button should only show on narrow screens when JavaScript is available. It should be hidden on wider screens or if JavaScript is unavailable.

This change was introduced in pull request #3596: Remove redundant display style from .govuk-header__menu-button.

Check the Selects work as expected

The govukSelect macro will no longer include an empty value attribute for options that do not have a value set.

This means that the value of the select if that option is selected will now be the text content of the option, rather than an empty string.

If you need to maintain the existing behaviour, you can set the value to an empty string.

This change was introduced in pull request #3773: Omit the value attribute from select options with no value.

Check that inverse buttons still look as expected

Inverse button components now use the $govuk-brand-colour setting to determine the button's text colour and the button's background tint when hovered or activated. The button will only look different if $govuk-brand-colour has been changed from the default.

You can restore the previous blue colour by setting $govuk-inverse-button-text-colour before importing the button component's Sass.

@import "node_modules/govuk-frontend/govuk/base";

$govuk-inverse-button-text-colour: govuk-colour("blue");
@import "node_modules/govuk-frontend/govuk/components/button/index";

This change was made in pull request #4043: Add ability to customise inverse button colours.

Remove component initialisation

Remove .init() from individually instantiated components as initialisation now happens automatically:

new Radios($radio).init()
new Radios($radio)

If you initialise the components using initAll(), you will not need to make any changes.

This change was introduced in pull request #4011: Remove component init() methods and initialise in constructor.

Remove Internet Explorer 8 stylesheets, settings and mixins

We no longer support Internet Explorer 8 (IE8) in GOV.UK Frontend or provide dedicated stylesheets for the browser. Remove any references to these stylesheets from your HTML.

We've removed the govuk-if-ie8 and govuk-not-ie8 mixins, and the $govuk-is-ie8 and $govuk-ie8-breakpoint settings, that were deprecated in GOV.UK Frontend v4.6.0.

This change was introduced in pull request #3559: Remove IE8-related Sass and CSS build tasks.

Remove the fallback GOV.UK crown logo from your HTML

The header component previously included a fallback version of the GOV.UK crown logo for Internet Explorer 8. As Frontend no longer supports IE8, we’ve removed this fallback.

If you're not using the Nunjucks macros, you'll need to remove this fallback from your HTML code. In your header component:

  1. Remove the block of HTML containing the govuk-header__logotype-crown-fallback-image image, starting with <!--[if IE 8]> and ending with <![endif]-->.
  2. Remove <!--[if gt IE 8]><!--> and <!--<![endif]--> from around the govuk-header__logotype-crown SVG, but don't remove the SVG.
  3. Delete the govuk-logotype-crown.png file from your assets folder.

You do not need to change any HTML if you're using the supplied Nunjucks macros, but you might still need to remove the govuk-logotype-crown.png image depending on how you are serving the font and image assets.

This change was introduced in [pull request #3641: Remove fallback GOV.UK logo for IE8](#3641.

Removal of Javascript polyfills for Internet Explorer (IE) 8-11

We've removed polyfills for:

  • DOMTokenList, Element.prototype.classList, Element.prototype.closest, Element.prototype.matches, and Event - required for IE 11 and below
  • Element.prototype.dataset - required for IE 10 and below
  • Date.now, Document, Element, Element.prototype.nextElementSibling, Element.prototype.previousElementSibling, Function.prototype.bind, Object.defineProperty, String.prototype.trim and Window - required for IE 8

GOV.UK Frontend no longer needs these polyfills because Internet Explorer will no longer try to run our JavaScript if you follow our instructions and include it using <script type="module">.

However, because these polyfills create or extend global objects ('polluting the global namespace'), you might have other code in your service unintentionally relying on the inclusion of these polyfills.

If your service has JavaScript that you want to run successfully in Internet Explorer (for example JavaScript for analytics), make sure the JavaScript does not rely on the removed polyfills and still executes successfully. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.

These changes were introduced in:

Removal of font family Sass variables

We’ve removed the following Sass variables:

  • $govuk-font-family-gds-transport
  • $govuk-font-family-nta
  • $govuk-font-family-nta-tabular

If you were using $govuk-font-family-gds-transport to set the font on an element, we recommend using the govuk-font mixin instead.

This change was introduced in pull request #3949: Simplify font family settings.

Remove deprecated .govuk-button--disabled class

We've removed the .govuk-button--disabled class that we deprecated in GOV.UK Frontend v4.6.0.

Use the disabled attribute to mark <button> and <input> elements as being disabled instead.

We no longer support link buttons being disabled or using disabled styles.

This change was introduced in pull request #3557: Remove deprecated .govuk-button--disabled class.

Remove deprecated .govuk-!-margin-static and .govuk-!-padding-static classes

We've removed the override classes starting with .govuk-!-margin-static and .govuk-!-padding-static, which were deprecated in GOV.UK Frontend v4.3.1.

Use the classes starting with .govuk-!-static-margin and .govuk-!-static-padding instead.

This change was introduced in pull request #3593: Remove deprecated static spacing classes.

Remove deprecated .govuk-header__link--service-name class

We've removed the .govuk-header__link--service-name class which we deprecated in GOV.UK Frontend v4.2.0.
Use the .govuk-header__service-name class instead.

This change was introduced in pull request #3594: Remove deprecated .govuk-header__link--service-name class.

Remove deprecated .govuk-header__navigation--no-service-name class

We've removed the .govuk-header__navigation--no-service-name class which we deprecated in GOV.UK Frontend v4.3.0.

We no longer supply a dedicated class for headers with navigation but no service name. If you still need this feature, you can reproduce it in your own code using the govuk-spacing Sass mixin.

.govuk-header__navigation {
  padding-top: govuk-spacing(7);
}

This change was introduced in pull request #3595: Remove deprecated .govuk-header__navigation--no-service-name class.

Suggested changes

Update the Pagination component's default aria-label

We’ve updated the default value of the Pagination component's aria-label to be more descriptive of the contents of the region. If you’re using the component's default label, you might wish to update it to the new default of 'Pagination'.

You do not need to change anything if you're using the govukPagination Nunjucks macro.

This change was introduced in pull request #3899: Update default aria-label in Pagination component.

Update the Exit this Page button's default text

We’ve updated the default text of the Exit this Page button. It now includes visually-hidden text to clarify that the button is a safety tool and not a generic method of leaving the current page.

If you are using the component's default text, you might wish to update it to the new value: <span class="govuk-visually-hidden">Emergency</span> Exit this page.

You do not need to change anything if you're using the govukExitThisPage Nunjucks macro.

This change was introduced in pull request #3989: Update default Exit This Page button text.

Add the rel attribute to the Exit this Page button and secondary link

Update the Exit this Page button and secondary link to include a new attribute and value: rel="nofollow noreferrer".

Adding this attribute does 2 things:

  1. It instructs search engines that your service does not endorse the external website for the purposes of determining search engine rankings.
  2. It instructs web browsers to not send information about your service to the external website.

This fixes a potential risk where the external website could detect that a user had visited from a GOV.UK page and play that information back to the user, which could risk a user's personal safety in some contexts.

You do not need to change the Exit this Page button if you're using the govukExitThisPage Nunjucks macro. You will still have to update the secondary link manually.

This change was introduced in pull request #4054: Add rel attribute to the Exit this Page button. Thanks to @gregtyler for reporting this issue.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

Contributors

gregtyler
Assets 3
Loading
41 Join discussion