Skip to content

GOV.UK Frontend v5.4.0

Latest
Latest
Compare
Choose a tag to compare
@36degrees 36degrees released this 17 May 10:52
· 62 commits to main since this release
v5.4.0
adfa0ab
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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

This release includes new features to help you include only the components your service uses. Doing this can help reduce the size of the JavaScript and CSS files sent to users, improving their experience.

New features

Create individual components with createAll

We've added a new createAll function that lets you initialise specific components in the same way that initAll does.

The createAll function will:

  • find all elements in the page with the corresponding data-module attribute
  • instantiate a component object for each element
  • catch errors and log them in the console
  • return an array of all the successfully instantiated component objects.
import { createAll, Button, Checkboxes } from 'govuk-frontend'

createAll(Button)
createAll(Checkboxes)

You can also pass a config object and a scope within which to search for elements.

You can find out more about how to use the createAll function in our documentation.

This change was introduced in pull request #4975: Add createAll function to initialise individual components.

Use tabular numbers easily with govuk-!-font-tabular-numbers

We've added a new override class for tabular number styling: govuk-!-font-tabular-numbers.

Using tabular numbers can make it easier for users to read numbers intended for comparison to one another, or for numbers that dynamically update.

It was previously only possible to use tabular numbers by using the govuk-font-tabular-numbers Sass mixin.

This change was introduced in pull request #4973: Add override class for tabular numbers.

Deprecated features

Importing layers using all files

You'll see a warning when compiling your Sass if you import any of our layers using the all file. Importing using the all files is deprecated, and we’ll remove them in the next major release.

Update your import statements to refer to the index file for each layer rather than all:

@import "node_modules/govuk-frontend/dist/govuk/base";
@import "node_modules/govuk-frontend/dist/govuk/core/index";
@import "node_modules/govuk-frontend/dist/govuk/objects/index";
@import "node_modules/govuk-frontend/dist/govuk/components/index";
@import "node_modules/govuk-frontend/dist/govuk/utilities/index";
@import "node_modules/govuk-frontend/dist/govuk/overrides/index";

You do not need /index at the end of each import path if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.

This change was introduced in pull request #4955: Rename all files to index for our Sass entry points.

Fixes

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

Assets 3