5.3.1 (Fix release)

To install this version with npm, run npm install govuk-frontend@5.3.1. You can also find more information about how to stay up to date in our documentation.

Fixes

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

• #4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black
• #4919: Use canvas colour for cookie banner over hardcoded grey
• #4899: Remove indents from conditional reveals in radios and checkboxes
• #4935: Fix password input button unexpectedly stretching
• #4936: Fix skip link underline being removed when global styles are enabled
• #4938: Fix attributes option ignoring values passed from the safe filter

5.3.0 (Feature release)

To install this version with npm, run npm install govuk-frontend@5.3.0. You can also find more information about how to stay up to date in our documentation.

New features

Use the Password input component to help users accessibly enter passwords

The Password input component allows users to choose:

• whether their passwords are visible or not
• to enter their passwords in plain text

This helps users use longer and more complex passwords without needing to remember what they've already typed.

This change was introduced in pull request #4442: Create password input component. Thanks to @andysellick for the original contribution.

Recommended changes

Update the HTML for the Character count component

We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

If you're not using Nunjucks macros, then you should:

• move all classes and attributes from the form group <div> to the component wrapper <div>
• remove the opening <div> and closing </div> tags used by the form group
• check the count message is now directly after the <textarea>

The following example shows some HTML and the difference once it’s updated.

HTML before:

<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
    <!-- // Label, hint, error and textarea -->
  </div>
  <!-- // Count message -->
</div>

HTML after:

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <!-- // Label, hint, error, textarea and count message -->
</div>

Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.

This change was introduced in pull request #4566: Use Character count formGroup as module wrapper.

Remove redundant role attributes from elements

We've made minor changes to the HTML of the page template, as well as the header, footer and pagination components.

You can update your HTML to remove the role attribute from some elements. These include the:

• main role on the main element in the template
• banner role on the header element in the Header component
• contentinfo role on the footer element in the Footer component
• navigation role on the nav element in the Pagination component

These roles were present to support legacy browsers, such as older versions of Internet Explorer. GOV.UK Frontend no longer supports these browsers, so you can now remove these roles.

You do not need to change anything if you're using the Nunjucks versions of the page template or these components,

This change was introduced in pull request #4854: Remove redundant role attributes.

Fixes

We've fixed an upstream issue in the cssnano npm package that caused elements with transparency to render incorrectly in Internet Explorer 11. This affected the pre-compiled CSS files in the GOV.UK Frontend npm package and GitHub releases for versions 5.0, 5.1 and 5.2. This was fixed in:

• #1573: feat: add preset and plugin options for browserslist in the cssnano repository
• #4829: Bump the postcss group with 2 updates

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

• #4811: Use KeyboardEvent.key over deprecated KeyboardEvent.keyCode in the Tabs component
• #4812: Use KeyboardEvent.key over deprecated KeyboardEvent.keyCode in the Button component
• #4813: Remove deprecated KeyboardEvent properties from the Exit this Page component
• #4855: Fix mobile product name being misaligned in new type scale

5.2.0 (Feature release)

In this release, we’ve adjusted our responsive type scale, which is available behind a feature flag. The type scale change is to make text easier to read on smaller screens. We’ve also deprecated the useTudorCrown parameter.

To install this version with npm, run npm install govuk-frontend@5.2.0. You can also find more information about how to stay up to date in our documentation.

New features

We've adjusted our responsive type scale

We've made the following adjustments to our responsive type scale:

• point 16 now returns 16px across all screen sizes
• point 19 now returns 19px across all screen sizes
• point 24 remains as 24px on large screens
• point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
• point 27 remains as 27px on large screens
• point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
• point 36 remains as 27px on large screens
• point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px

To enable these changes, set the feature flag variable $govuk-new-typography-scale to true before you import GOV.UK Frontend in your Sass files:

// application.scss
$govuk-new-typography-scale: true;
@import "govuk-frontend/all";

If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments.

You can read more on upgrading your service to the new type scale in our upgrade guide.

This change was introduced in pull request #2421: Adjust the responsive type scale

Insert custom HTML into component form group wrappers

You can now insert custom HTML into form group wrappers for all components with form fields.

govukInput({
  formGroup: {
    beforeInput: {
      html: "example"
    },
    afterInput: {
      html: "example"
    },
  }
})

This change was introduced in pull request #4567: Add beforeInput(s) and beforeInput(s) options to form groups.

Deprecated features

Stop using the useTudorCrown parameter in the Heading component

The rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the useTudorCrown parameter and will remove it in the next major release.

You can now remove the useTudorCrown parameter, along with any other adjustments made to display the Tudor crown logo in your service.

This change was introduced in pull request #4740: Make Tudor Crown logo the default

Fixes

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

• #4768: Fix z-index of inputs in Radios and Checkboxes component
• #4784: Fix LibSass calc() compatibility in Radios and Checkboxes

5.1.0 (Feature release)

To install this version with npm, run npm install govuk-frontend@5.1.0. You can also find more information about how to stay up to date in our documentation.

New features

5.0.0 (Breaking release)

You can find a summary of the main changes to GOV.UK Frontend v5 on the Frontend site. It's important to note our old frameworks (such as GOV.UK Elements) are no longer compatible with this release. It also stops Internet Explorer 11 from running GOV.UK Frontend JavaScript and removes support completely for Internet Explorer 8 to 10.

Your service will not stop working in Internet Explorer 11, but components will look and behave differently without JavaScript. Read more about how we provide support for different browsers.

Service teams should be using a progressive enhancement approach to make sure users can still access any content and complete their tasks.

If you still need to provide support for older versions of Internet Explorer, you should stay on the latest GOV.UK Frontend v4 release.

If you need it, we have a checklist for the changes you might need to make for v5, which you can view or copy (needs a Google account).

Breaking changes

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

Update package file paths for Sass

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

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 building your Sass code through Rails Assets Pipeline or Sprockets, refer to the section 'Update package file paths in Rails Assets Pipeline or Sprockets'.

Refer to the detailed guidance on importing using Sass.

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths for Nunjucks

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

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

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

Refer to the detailed guidance on using Nunjucks.

These changes were made in the following pull requests:

• #3491: Update Review app to import govuk-frontend via local package
• #3498: Remove built dist and package from source

Update package file paths for assets such as images and fonts 

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

If you're serving the assets from the GOV.UK Frontend assets folder (node_modules/govuk-frontend/govuk/assets), update your routing to the new assets path : node_modules/govuk-frontend/dist/govuk/assets.

Refer to the detailed guidance on importing assets.

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths in Rails Assets Pipeline or Sprockets

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

Update the  node_modules/govuk-frontend part of the path to node_modules/govuk-frontend/dist, if you've added the path to GOV.UK Frontend package inside node_modules to:

• Rails Assets Pipeline search path using Rails.application.config.assets.paths
• Sprockets using append_path

These changes were introduced in #3498: Remove built dist and package from source

Update package file paths if including JavaScript directly

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

If you've set up your routing to serve GOV.UK Frontend's all.js file from node_modules, update the path you're serving to node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.

Update any <script> tag with the new path and filename, if necessary. Make sure they have a type="module" attribute. For example:

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

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>

Refer to the detailed guidance on importing JavaScript.

These changes were introduced in #3498: Remove built dist and package from source