Skip to content

Releases: alphagov/govuk-frontend

GOV.UK Frontend v5.0.0-beta.0

26 Oct 16:35
@romaricpascal romaricpascal
v5.0.0-beta.0
68e91a4
Compare
Choose a tag to compare
GOV.UK Frontend v5.0.0-beta.0 Pre-release
Pre-release

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

Read more

Contributors

gregtyler
Assets 3
41 Join discussion

GOV.UK Frontend v5.0.0-internal.0

24 Oct 13:46
@romaricpascal romaricpascal
v5.0.0-internal.0
a170c2e
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v5.0.0-internal.0 Pre-release
Pre-release

Internal pre-release.

Assets 3

GOV.UK Frontend v4.7.0

06 Jul 13:41
@owenatgov owenatgov
v4.7.0
bf9dbbf
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.7.0

New features

Added the Exit This Page component to help users quickly exit a page or service

You can now choose to use the exit this page component to help users quickly leave a page or service which contains sensitive information.

This was added in pull request #2545: Add exit this page component.

Added inverse modifier for buttons on dark backgrounds

You can now choose to use the govuk-button--inverse class to style buttons on dark backgrounds with a white background colour.

This change was made in pull request #3556: Add inverse button styles.

Added inverse modifier for breadcrumbs on dark backgrounds

You can now choose to use the govuk-breadcrumbs--inverse class to style breadcrumbs on dark backgrounds with white text, links and arrows.

This change was made in pull request #3774: Add inverse breadcrumb and back link modifiers and styles.

Added inverse modifier for back links on dark backgrounds

You can now choose to use the govuk-back-link--inverse class to style back links on dark backgrounds with white links and arrows.

This change was made in pull request #3774: Add inverse breadcrumb and back link modifiers and styles.

Fixes

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

Assets 3

GOV.UK Frontend v4.6.0

20 Apr 13:45
@romaricpascal romaricpascal
v4.6.0
73c9579
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.6.0

New features

Updated the appearance of disabled form controls

We’ve updated the disabled state of Text Input, Textarea, Select and File Upload components so it is consistent across browsers and devices. They’re also now consistent with the existing disabled styles for Buttons, Checkboxes, and Radios.

Disabled form controls appear at 50% opacity and with an alternative cursor appearance when hovered over.

This was added in pull request #3187: Add disabled styles for form controls.

Added a top-level disabled parameter to form controls

We’ve updated the Nunjucks macros for Text Input, Textarea, Select and File Upload components to include a top-level disabled parameter. This will make it easier to enable the disabled state for these controls.

{{ govukInput({
  id: "disabled-input",
  name: "disabled-input",
  value: "Unchangeable value",
  disabled: true
}) }}

Disabled form controls have poor contrast and can confuse some users, so avoid them if possible.

Only use disabled form controls if research shows it makes the user interface easier to understand.

This was added in pull request #3187: Add disabled styles for form controls.

Configure whether the Accordion remembers and restores sessions

By default, when a user leaves a page, the Accordion will remember the layout of expanded and collapsed sections selected by the user. If the user returns to the page, this layout will be restored and override any sections manually set as expanded in code.

You can now disable this functionality by using the rememberExpanded option in the govukAccordion Nunjucks macro.

If you're not using the Nunjucks macro, you can disable it using the data-remember-expanded HTML attribute.

This was added in pull request #3342: Add option to disable sessionState in Accordion.

Added id parameter to Buttons

We’ve updated the Button Nunjucks macro to include an optional id parameter.

{{ govukButton({
  text: "Save and continue",
  id: "continue-button"
}) }}

This was added in pull request #3344: Adding optional ‘id’ attribute to button component.

Thanks to @TomBillingtonUK for this contribution.

Added a modifier for text input styles that accept sequences of digits

We've added a new .govuk-input--extra-letter-spacing class for Text Input. This increases readability of text inputs that receive sequences of digits (like security codes, references or phone numbers).

You can add it through the classes option when using Nunjucks, or directly in the class attribute of the <input> when using HTML.

This was added in pull request #2230: Add extra letter spacing modifier for inputs

Deprecated features

Stop using JavaScript API properties other than the init method

We have deprecated all of the JavaScript properties in the API, except for the init method for each component. We'll make all of the deprecated JavaScript properties private in our next main release.

Please let us know if you're using parts of the API other than the init method by filling in this form. We'll use this information when prioritising future additions to the public API.

This was added in pull request #3499: Deprecate all JavaScript instance properties the except init method.

Stop using the .govuk-button--disabled class on buttons

We have deprecated the .govuk-button--disabled class and will remove it in the next major release.

If a Button uses a <button> or <input> element, use the disabled HTML attribute instead.

You will not need to make any changes if you're using the govukButton Nunjucks macro.

Disabling links that are styled to look like buttons will not be supported by future releases.

This was added in pull request #3326: Deprecate govuk-button--disabled class.

Stop using the deprecated Internet Explorer 8 mixins and settings

The next main release of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when generating IE8 specific stylesheets.

You'll start seeing deprecation warnings if you're:

If you no longer need to support IE8, we recommend you stop generating an IE8 specific stylesheet and remove references to the IE8 mixins from your code.

You can also silence these deprecation warnings by adding ie8 to the $govuk-suppressed-warnings setting, but once we’ve released v5.0 you will need to address them as part of the upgrade process.

Fixes

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

Contributors

baisa and TomBillingtonUK
Assets 3

GOV.UK Frontend v4.5.0

31 Jan 12:20
@owenatgov owenatgov
v4.5.0
d208b01
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.5.0

New features

Use summary cards to visually separate multiple summary lists on a single page

You can now use the summary card. This new variant of the Summary list component can help you:

  • design and build pages with multiple summary lists
  • show visual dividers between summary lists
  • allow users to apply actions to entire lists

This was added in pull request #2931: Add summary card enhancement to summary list.

Search within accordion content on supporting browsers

We've updated the Accordion component to use the new hidden="until-found" attribute value.

This allows the browser's native 'find in page' functionality to search within and automatically open sections of the accordion. Currently, this functionality is only supported by recent versions of Google Chrome, Microsoft Edge and Samsung Internet.

This was added in pull requests:

Source maps for precompiled files

You can now use source maps to help identify errors and console messages from GOV.UK Frontend precompiled files.

This was added in pull request #3023: Add source maps to compiled JavaScript and CSS.

Fixes

We've fixed errors in IE8 caused by updates to our precompiled JavaScript. The issue prevented some polyfills from running, but was limited to the release-v4.4.1.zip and release-v4.4.0.zip assets on GitHub releases:

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

Contributors

JoPintoPaul and MalcolmVonMoJ
Assets 3

GOV.UK Frontend v4.4.1

16 Dec 10:39
@36degrees 36degrees
v4.4.1
f31e6f8
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.4.1

Fixes

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

Assets 3

GOV.UK Frontend v4.4.0

14 Nov 14:23
@romaricpascal romaricpascal
v4.4.0
65bf0ac
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.4.0

New features

Change the Button component's background and text colour

For non-GOV.UK branded websites, you can now change the Button component background and text colour.

To change the Button component background colour, set the $govuk-button-background-colour Sass variable.

To change the Button component text colour, set the $govuk-button-text-colour Sass variable.

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

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

This was added in pull request #2752: Change the Button component background and text colour. Thanks to @NickColley for this contribution.

Localise the navigation menu toggle button

When using the header Nunjucks macro, you can now translate the text of the mobile navigation menu toggle button by using the menuButtonText parameter.

You should avoid lengthy values for the menuButtonText parameter. If the text is too long it can overflow and cause visual issues.

This was added in pull request #2720: Add parameter to localise mobile menu toggle button.

Localise the character count's textarea description/fallback text

When using the character count Nunjucks macro, you can now translate the description of textarea by using the textareaDescriptionText option.

This text is announced by screen readers when the character count input is focused. It's also displayed visually as a fallback if JavaScript is not available.

This was added in pull request #2742: Add ability to customise character count fallback text, and the option renamed to textareaDescriptionText in pull request #2915.

Localise the character count's counter message

You can now translate the text shown by the character count component to inform users of:

  • when they have reached the maximum number of characters or words
  • the number of characters or words over or under the allowed maximum

The Nunjucks macro accepts new options so you can customise each message. You can:

  • Use charactersAtLimitText or wordsAtLimitText to provide the text that shows when users have reached the limit.
  • Use charactersUnderLimitText or wordsUnderLimitText to provide the text that shows when users are under the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
  • Use charactersOverLimitText or wordsOverLimitText to provide the text that shows when users are over the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.

You'll find guidance about the plural forms in our documentation about localising GOV.UK Frontend. The component will replace %{count} with the number of characters over or under the limit.

If you're not using Nunjucks macros, you can use data-* attributes to provide these translations. Within the attribute value, any quotation marks or other characters reserved by HTML needs to be converted into their HTML entity equivalents.

You can:

  • use data-i18n.characters-at-limit or data-i18n.words-at-limit for when users are at the limit
  • configure the text that informs the end user they are under the character or word limit, by using data-i18n.characters-under-limit.{other,many,few,two,one,zero} or data-i18n.words-under-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale
  • configure the text that informs the end user they are over the character or word limit, by using data-i18n.characters-over-limit.{other,many,few,two,one,zero} or data-i18n.words-over-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale

You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See our guidance on localising GOV.UK Frontend for how to do this.

This was added in the following pull requests:

Localise the character count's input description for assistive technologies

When configuring the character count's limit in JavaScript, you can customise the description provided to assistive technologies when users focus the input (so it indicates the overall limit of characters or words).

Depending on the plural form required by your locale, you can pass the description in the HTML using the data-i18n.textarea-description.{other,many,few,two,one,zero} attribute on the element to provide the text to set as the description.

You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See our guidance on localising GOV.UK Frontend for how to do this.

This was added in pull request #2915.

Localise the accordion's toggle buttons

You can now translate the text of the accordion component's show and hide toggle buttons.

When using the Nunjucks macro, you can use the new showSectionText and hideSectionText parameters to customise the text of the 'show' and 'hide' toggles in each section.

You can also use showAllSectionsText and hideAllSectionsText parameters to customise the text of the toggle at the top of the accordion.

If you're not using the Nunjucks macro, you can customise these using data-* attributes. Within the attribute value, any quotation marks or other characters reserved by HTML needs to be converted into their HTML entity equivalents.

  • data-i18n.show-section
  • data-i18n.show-section-aria-label
  • data-i18n.hide-section
  • data-i18n.hide-section-aria-label
  • data-i18n.show-all-sections
  • data-i18n.hide-all-sections

You can also change this text for all instances of the Accordion using a JavaScript configuration object. See our guidance on localising GOV.UK Frontend for how to do this.

This was added in pull requests:

Suppress deprecation warnings

You can now suppress warnings from deprecations within GOV.UK Frontend by updating the $govuk-suppressed-warnings map in Sass. Every deprecation warning will now include a warning "key" which you can use in the following code, placed at the root of your sass project:

$govuk-suppressed-warnings: (
  deprecated-feature
);

This was added in #2911 Add warning suppression functionality

Configure components in JavaScript

JavaScript components can get the same configuration options in 2 ways - through data attributes, as before, and now when creating an instance. These components are:

  • the Button component, for its preventDoubleClick option (matching data-prevent-double-click)
  • the CharacterCount component, for its maxlength, maxwords and threshold options (matching data-maxlength, data-maxwords and data-threshold, respectively)
  • the ErrorSummary component, for its disableAutoFocus option (matching data-disable-auto-focus)
  • the NotificationBanner component, for its disableAutoFocus option (matching data-disable-auto-focus)

You can leave out these configuration options when using the Nunjucks macro and provide configuration when:

  • creating a component, in a configuration object as second argument
  • initialising components in bulk using initAll

For example:

// Creating a single instance
var button = document.querySelector('[data-module="button"]')
new GOVUKFrontend.Button(button, {preventDoubleClick: true})

// Or initialising components in bulk
GOVUKFrontend.initAll({
  button: {
    preventDoubleClick: true
  }
  // Or, for the other components,
  // characterCount: {/* options */},
  // errorSummary: {/* options */},
  // notificationBanner: {/* options */}
})

You can find more information about component configuration in GOV.UK Frontend documentation.

This was added in pull requests specific for each components:

Read more

Contributors

NickColley
Assets 3

GOV.UK Frontend v4.3.1

18 Aug 14:25
@36degrees 36degrees
v4.3.1
1cc0a07
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.3.1

Recommended changes

Replace deprecated govuk-!-margin-static and govuk-!-padding-static classes

We've fixed an error in the naming convention of the static spacing override classes we'd introduced in v4.3.0. These classes should start with govuk-!-static, and we've now deprecated the incorrect classes.

If you're using the static spacing margin override classes, replace any classes starting with govuk-!-margin-static with govuk-!-static-margin. For example: govuk-!-margin-static-2 would become govuk-!-static-margin-2.

If you're using the static spacing padding override classes, replace any classes starting with govuk-!-padding-static with govuk-!-static-padding. For example: govuk-!-padding-static-2 would become govuk-!-static-padding-2.

We've deprecated the govuk-!-margin-static and govuk-!-padding-static classes, and will remove them in a future major release.

This change was introduced in pull request #2770: Fix ordering of properties in static spacing override classes. Thanks to @garrystewart for reporting this issue.

Fixes

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

Contributors

garrystewart
Assets 3

GOV.UK Frontend v4.3.0

09 Aug 10:24
@querkmachine querkmachine
v4.3.0
e319f83
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.3.0

New features

Customise the Open Graph image URL without duplicate meta tags

You can now customise the Open Graph image URL included in the head by setting the opengraphImageUrl Nunjucks option.

Also, the default Open Graph image URL meta tag will now only be included if you set the either opengraphImageUrl or assetUrl.

This was added in pull request #2673: Allow Open Graph image URL to be customised.

Localise the content licence and copyright statements

When using the footer Nunjucks macro, you can now translate the text of the Open Government Licence (OGL) and Crown copyright statements using the contentLicence and copyright parameters.

Visit The National Archives' documentation on OGL and Crown copyright for information on what you need to include in these statements.

This was added in pull request #2702: Allow localisation of content licence and copyright notices in Footer.

Pass HTML directly into compatible components

If using the Nunjucks macros, you can now pass HTML content directly into compatible components using the Nunjucks call syntax. If HTML is provided through the call syntax, the nunjucks macro will ignore the HTML and text options.

Components updated to support this syntax are:

  • Details
  • Error summary (mapped to descriptionHtml parameter)
  • Inset text
  • Notification banner
  • Panel

This was added in pull request #2734: Update various components to be callable.

Use new override classes to apply static spacing

You can now use static spacing override classes to apply spacing from the static spacing scale to elements of your design.

The new classes start with: govuk-!-static- followed by either margin- or padding-, and then a spacing unit number.

To apply spacing in a single direction, include left-, right-, top-, or bottom- just before the spacing unit.

For example:

  • govuk-!-static-margin-9 will apply a 60px margin to all sides of the element at all screen sizes
  • govuk-!-static-padding-right-5 will apply 25px of padding to the right side of the element at all screen sizes
  • govuk-!-static-margin-0 will remove all margins at all screen sizes

This was added in pull request #2672: Add static spacing override classes. Thanks to @patrickpatrickpatrick for this contribution.

Deprecated features

Remove deprecated govuk-header__navigation--no-service-name class in the header

We've deprecated the govuk-header__navigation--no-service-name class, and will remove it in a future major release.

This was added in pull request #2694: Deprecate .govuk-header__navigation--no-service-name.

Recommended changes

We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

Add hidden to the mobile menu button in the header component

If you're not using the Nunjucks macros, add the hidden attribute to the mobile menu button in the header component. The mobile menu button is govuk-header__menu-button.

We've changed the header's mobile menu functionality to use the hidden attribute instead of using CSS to show/hide the mobile menu. Adding hidden to the mobile menu button by default will make sure that it does not display for users when javascript does not load.

This was added in pull request 2727: Make use of hidden in header navigation functionality. Thanks to @NickColley and @kr8n3r for their contributions.

Fixes

In pull request 2678: Replace ex units with ems for input lengths, we changed how we define input lengths in our CSS. Browsers might now display these inputs as being slightly wider than before. The difference is usually fewer than 3 pixels.

We’ve also made fixes in the following pull requests:

Contributors

edwardhorsford, NickColley, and 3 other contributors
Assets 3

GOV.UK Frontend v4.2.0

27 Jun 12:21
@domoscargin domoscargin
v4.2.0
28c6c0d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
GOV.UK Frontend v4.2.0

New features

Help users navigate through pages with pagination

You can now use pagination to help users navigate forwards and backwards through a series of pages. For example, in search results or guidance that's divided into multiple website pages.

This was added in pull request #2610: Add pagination component.

Check checkboxes by using the values Nunjucks option

When using the govukCheckboxes Nunjucks macro, you can now use the values option to determine which checkboxes should already be checked when the page loads.

For example, values: ['red', 'blue'] would check any checkboxes that have a value of 'red' or 'blue'.

You can use this option instead of setting the boolean checked option on each individual checkbox.

This change was introduced in pull request #2616: Allow selecting options by passing current values.

Check a radio button by using the value Nunjucks option

When using the govukRadios Nunjucks macro, you can now use the value option to determine which radio should already be checked when the page loads.

For example, value: 'red' would check the radio that has a value of 'red'.

You can use this option instead of setting the boolean checked option on each individual radio.

This change was introduced in pull request #2616: Allow selecting options by passing current values.

Select an option in a select by using the value Nunjucks option

When using the govukSelect Nunjucks macro, you can now use the value option to determine which option should already be selected when the page loads.

For example, value: 'red' would select the option that has a value of 'red'.

You can use this option instead of setting the boolean selected option on each individual option.

This change was introduced in pull request #2616: Allow selecting options by passing current values.

Recommended changes

Replace deprecated govuk-header__link--service-name class in the header

If you're not using the Nunjucks macros in the header, replace any instances of the class govuk-header__link--service-name with govuk-header__service-name.

We've deprecated the govuk-header__link--service-name class, and will remove it in a future major release.

This change was introduced in pull request #2617: Do not make the service name in the header a link if no serviceUrl is provided.

File extensions added for JavaScript ES Module imports

We have updated our component ES module JavaScript to include missing file extensions not provided in release 4.1.0. If you have received an error similar to the following, for example when running or building your application, this fix should resolve the issue.

Cannot find module '../node_modules/govuk-frontend/govuk-esm/common' imported from ../node_modules/govuk-frontend/govuk-esm/all.mjs

You should not need to make any changes if you are successfully importing our JavaScript as ES modules with version 4.1.0, but there still might be config you can remove. For example, removing fullySpecified: false from your Webpack config file.

This change was introduced in pull request #2658: Add missing mandatory file extensions for ESM JavaScript. Thanks to @colinrotherham and @tvararu for reporting issues and suggesting and testing fixes.

Fixes

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

Contributors

HughePaul, colinrotherham, and 3 other contributors
Assets 3