GOV.UK Frontend v3.8.0

New features

The secondary text colour is now darker

$govuk-secondary-text-colour and govuk-colour("dark-grey") are now darker so users can more clearly read hint text that uses the colour.

The colour now has a contrast ratio of 7:1 against a white background, and helps hint text meet the WCAG 2.1 (AAA) accessibility standard.

This was added in pull request #1827: Make dark grey darker.

Error styling for field border thickness is now the same with and without an error

The error styling for the:

• text input, select and textarea components no longer makes the border thicker
• file upload component no longer includes a border around the file upload input

This means it’s easier for users to tell the difference between a field with an error and a field that's focused.

When an error message is about several fields, make sure you're clear which field has the error. You must not rely on users being able to tell which field has the error styling.

This was added in pull request #1870: Reduce border width of form inputs in the error state.

Set spellcheck with a new option

You can now turn spellcheck on or off in the input, textarea and character count components using the new spellcheck option instead of the attributes option.

For example:

{{ govukInput({
    spellcheck: true
}) }}

This was added in pull requests:

• #1859: Add spellcheck option
• #1869: Add missing spellcheck param to character count

Deprecated features

$govuk-border-width-form-element-error

From GOV.UK Frontend v4.0.0, you'll no longer be able to reference the $govuk-border-width-form-element-error Sass setting.

Change any references to $govuk-border-width-form-element-error in your Sass code so they reference $govuk-border-width-form-element instead.

This was changed in pull request #1870: Reduce border width of form inputs in the error state.

Fixes

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

• #1838: Correctly camel case SVG attributes in the header and footer
• #1842: Preserve the state of conditional reveals when navigating 'back' in the browser
• #1848: Preserve the state of the character count when navigating 'back' in the browser
• #1855: Hint component can render block-level elements as valid HTML
• #1861: Fix the display of checkboxes when border-box box sizing is applied globally
• #1862: Fix display of warning text icon when border-box box sizing is applied globally #1862
• #1879: Explicitly set outline-offset to remove 1px transparent border in chrome v84

GOV.UK Frontend v3.7.0

New features

Add extra spacing between list items

If a list is hard to read because the items run across multiple lines, you can now add extra spacing between list items using the new govuk-list--spaced class.

This was added in pull request #1775: Add list--spaced modifier. Thanks to @frankieroberto for raising this issue.

Use HTML for navigation items in the header

You can now use HTML for a navigation item in the header component, using the new html option.

This was added in pull request #1819: Add the ability to specify HTML for a navigation item. Thanks to @adamsilver.

Import settings, tools and helpers CSS in one line

You can now import node_modules/govuk-frontend/govuk/base, instead of importing settings, helpers and tools separately.

Sass now compiles faster

GOV.UK Frontend's Sass files now compile to CSS faster, because we've changed the way dependencies work when you import them.

If you already import node_modules/govuk-frontend/govuk/all in your Sass file, you do not need to do anything. Sass will automatically compile faster.

If you import specific parts of GOV.UK Frontend in your Sass file instead, you can now make Sass compile faster by importing base then a component's index file. This will avoid GOV.UK Frontend importing dependencies multiple times.

For example:

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

@import "node_modules/govuk-frontend/govuk/core/all";
@import "node_modules/govuk-frontend/govuk/objects/all";

@import "node_modules/govuk-frontend/govuk/components/button/index";
@import "node_modules/govuk-frontend/govuk/components/footer/index";
@import "node_modules/govuk-frontend/govuk/components/header/index";

Find out more about importing CSS.

This was added in pull request #1804: Allow components to be imported without dependencies. Thanks to @kevindew for raising this issue.

Collapse breadcrumb component on mobile

You can now collapse the breadcrumb component on mobile using the new collapseOnMobile option, so it:

• shows only the first and last items
• does not wrap

This was added in pull request #1754: Add collapseOnMobile breadcrumbs flag. Thanks to @vanitabarrett and @miaallers.

Back links are easier to select

The back link component is now:

• bigger, so it's easier to select if you're using a touch screen
• more consistent with the design of the breadcrumb component

This was added in pull request #1753: Make back link arrow consistent with breadcrumb component. Thanks to @vanitabarrett and @miaallers.

Deprecated features

Importing from the core and overrides layers without base

If you import specific files from the core or overrides layers, you’ll now see a deprecation warning when compiling Sass if you do not import node_modules/govuk-frontend/govuk/base first.

To fix the warning, import node_modules/govuk-frontend/govuk/base first. For example:

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

If you do not import node_modules/govuk-frontend/govuk/base first, your service will no longer work from GOV.UK Frontend v4.0.0.

This was added in pull request #1807: Warn if importing core, overrides without dependencies.

Fixes

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

• #1778: Fix accordion underline hover state being removed when hovering plus/minus symbol
• #1765: Import textarea from character count
• #1796: Standardise accordion section headings font size (reduce height of section headings on mobile)

GOV.UK Frontend v3.6.0

New features

Use colours with the tag component

You can now use colour with tags to help distinguish between different tags - or to help draw the user’s attention to a tag if it’s especially important.

This also means you should replace the .govuk-tag--inactive class with the .govuk-tag--grey class. .govuk-tag--inactive is now deprecated, and it will be removed in a future release.

Pull request #1711: Additional Tag modifier classes for different colours.

Hide elements when users print a page

You can now hide elements when users print a page, using the new govuk-!-display-none-print class.

Pull request #1723: Add display override for hiding content when printing.

The iff Sass function is now deprecated

You should no longer use the iff Sass function. The function is now deprecated, and it will be removed in a future release.

Pull request #1742: Deprecate iff function.

Fixes

• Pull request #1724: Fix fallback logo being detected by Google Chrome's image description feature.
• Pull request #1745: Update vendor polyfills to match upstream.
• Pull request #1746: Use generic div element for tabspanel.

GOV.UK Frontend v3.5.0

New features

Add classes to the character count component's count message

If you're using Nunjucks, you can now add classes to the character count component's count message using the countMessage.classes option.

• Pull request #1650: Make Character Count use hint component for message and allow custom classes to be added.

Fixes

• Pull request #1704: Update the date input component to use input type=text inputmode=numeric.
• Pull request #1690: Don't unneccesarily self-close tags.
• Pull request #1678: Fix tabs component throwing JavaScript errors in Internet Explorer 8.
• Pull request #1676: Fix skip link component focus style with global styles enabled.
• Pull request #1672: Ensure footer links look clickable.
• Pull request #1670: Make width-container margins more targetted to avoid specificity issues.
• Pull request #1655: Ensure components use public govuk-media-query mixin.
• Pull request #1648: Update checkboxes and radio buttons to include item hint classes on item hint.
• Pull request #1638: Check component item arrays are not empty before outputting markup.

GOV.UK Frontend v3.4.0

New features

Add classes to the page wrapper

If you're using Nunjucks, you can now add classes to the page wrapper using the containerClasses variable.

Pull request #1626: Allow creating custom width containers and using them with template.

Set a custom width for wrappers

If you're using Sass, you can now use the govuk-width-container mixin to create a custom wrapper class with a specific width. You can then add that class to the following wrappers to override the width of the govuk-width-container class:

• page wrapper
• header container
• footer container

To create your custom wrapper class, include the govuk-width-container mixin. Pass in the width in pixels.

For example:

.app-width-container--wide {
  @include govuk-width-container(1200px);
}

If you’re using Nunjucks, you should then add your class using either the:

• containerClasses variable in the page template
• containerClasses option in the header or footer

Use the $govuk-page-width Sass variable instead if all your pages are the same width.

• Pull request #1626: Allow creating custom width containers and using them with template.

Add attributes to the <body> element of a page

You can now add attributes to the <body> element of a page, by using the bodyAttributes variable in the page template.

• Pull request #1623: Allow attributes to be set on template .

Fixes

• Pull request #1594: Refactor handling of count message in character count JavaScript.
• Pull request #1609: Update hex value for secondary text to improve contrast.
• Pull request #1620: Only add underline to back link when href exists .
• Pull request #1631: Fix classes on character count when in error state.

GOV.UK Frontend v3.3.0

This release contains some smaller features and bug fixes that include accessibility improvements.

New features

Allow lang to be set on <title> and <main> of template

You can now set the lang attribute in the title and main of page template.

This will help with scenarios where some of the elements, such as navigation and footer, are in English whereas the title and page content are in a different language.

• Pull request #1576: Allow lang to be set on title and main of template.

Add new override class to hide elements

You can now use the .govuk-!-display-none override class to hide elements.

• Pull request #1586: Add display none override class.

Visual updates to the warning text component

Align ‘Warning text’ icon with first line of the content fixing #1352 Some changes were made to the size and spacing of the icon to help with positioning.

• Pull request #1578: Change position and spacing relationship of warning text icon

Fixes

• Pull request #1574: Make form elements scale correctly when text resized by user.
• Pull request #1584: Fix text resize issue with warning text icon
• Pull request #1570: Prevent inputs ending up off screen or obscured by keyboards when linking from the error summary to inputs within a large fieldset
• Pull request #1585: Explicitly set font weight on warning-text component
• Pull request #1587: Fix height and alignment issue within header in Chrome 76+
• Pull request #1589: Remove role="button" from header button
• Pull request #1595: Do not output conditionally revealed content for radios or checkboxes when it's empty

Closes #1600

GOV.UK Frontend release v3.2.0

This release is another smaller release with some new features and fixes 🐛 🔨

If you're using GOV.UK Frontend with GOV.UK Template, the button component is now readable when it has an active focus state.

Thanks to Emma Lewis for helping with this release.

New features

Add classes to the form group wrapper of the character count component

You can now add classes to the form group wrapper of the character count component.

govukCharacterCount({
  formGroup: {
    classes: 'app-character-count--custom-modifier'
  }
})

• Pull request #1553: Include formGroup on character count and pass through to textarea to allow class to be added to character count form group. Thanks to Emma Lewis.

Fixes

• Pull request #1548: Fix fieldset legend text clipping when using a custom or fallback font.
• Pull request #1559: Stop IE8 from downloading GDS Transport font.
• Pull request #1564: Ensure legacy styles do not override button active state.

GOV.UK Frontend release v3.1.0

This release contains a few improvements and fixes that include accessibility improvements to the details component.

Thanks to @htmlandbacon and @andrew-mcgregor for their help with this release.

Changelog

New features

Add attributes to the fieldset on the date input component

You can now pass attributes to add to the fieldset on the date input component.

Pull request #1541: Allow date input fieldset attributes to be set. Thanks to andrew-mcgregor for raising this.

Add ARIA role to the fieldset component

You can now pass an ARIA role to the fieldset component.

Pull request #1541: Allow date input fieldset attributes to be set.

Add inputmode to the input component

You can now pass inputmode to the input component.

govukInput({
  inputmode: 'email'
})

• Pull request #1527: Add inputmode option to the input component

Fixes

• Pull request #1523: Improve accessibility of details component by polyfilling only where the native element is not available.
• Pull request #1512: Update components to only output items when they are defined.
• Pull request #1538: Simplify button types to avoid unnecessary type attribute.
• Pull request #1542: Only default two thirds/one-third layout when footer has two sections.

GOV.UK Frontend release v3.0.0

In this release, we’ve made some important changes to improve the accessibility of pages built with GOV.UK Frontend. This includes making sure that the styles, components and patterns in GOV.UK Frontend meet level AA of WCAG 2.1.

We recommend you update GOV.UK Frontend with npm.

If you’re updating compiled files, you only need to:

• update and add data-module attributes
• update CSS class names

Contact the GOV.UK Design System team if you need help updating or installing GOV.UK Frontend.

Thanks to @colinrotherham, edwardhorsford, @frankieroberto and @Nooshu for their help with this release.

Breaking changes

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

Update file paths, attributes and class names

To make sure GOV.UK Frontend's files do not conflict with your code, we've moved our package files into a directory called govuk.

If you’re using Sass

Add govuk/ after govuk-frontend/ to @import paths in your Sass file.

For example:

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

If you’ve added node_modules/govuk-frontend as a Sass include path, add govuk/ to your @import paths:

@import "govuk/all";

If you’re using Javascript

You must do the following.

1. Update file paths.
2. Update and add data-module attributes.
3. Update CSS class names.

Update file paths

You must add govuk/ to your import paths.

If you're importing node_modules/govuk-frontend/all.js, change this import path to node_modules/govuk-frontend/govuk/all.js.

If you’re importing a specific path, add govuk/ after govuk-frontend/. For example, if you're importing the button component:

import Button from 'govuk-frontend/govuk/components/button/button'

Update and add data-module attributes

You do not need to do anything if you're using Nunjucks macros and the initAll function.

If you are not using Nunjucks macros, add a govuk- prefix to data-module attribute values. For example:

<div class="govuk-accordion" data-module="govuk-accordion">
...
</div>

The button and details components now also use the data-module attribute for initialisation. If you are not using Nunjucks macros, add:

• data-module="govuk-button" to each <button> HTML tag
• data-module="govuk-details" to each <details> HTML tag

If you're using your own JavaScript code to initialise components, add a govuk- prefix to any selectors that find components using the data-module attribute.

Pull request #1443: Ensure GOV.UK Frontend component selectors cannot conflict when initialised

Update CSS class names

You do not need to do anything if you're using Nunjucks.

If you're using HTML or custom JavaScript, change:

• js-character-count to govuk-js-character-count
• js-header-toggle in the GOV.UK Frontend header component to govuk-js-header-toggle

Pull request #1444: Renames js- css prefix to govuk-js-

If you’re using Nunjucks

1. Change the list of paths in nunjucks.configure so that the only GOV.UK Frontend path is node_modules/govuk-frontend/:

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

2. If you've extended the page template, add govuk/ to the template path:

{% extends "govuk/template.njk" %}

3. Change the import paths in your components so they include govuk/components/. For example:

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

Update asset paths

In the assets path, add govuk/ after govuk-frontend/:

/node_modules/govuk-frontend/govuk/assets

If your code uses Express.js, you must also use the following code in your configuration file:

app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets')))

Pull requests:

• #1458: Namespace nunjucks and components
• #1467: Update the main entry point in package.json

Migrate to the new accessible focus states

The focus state of components now meets the new WCAG 2.1 level AA requirements.

You must update your component’s focus state to make your design consistent with our new focus styles.

If you've extended or created components, you can no longer use the govuk-focusable or govuk-focusable-fill Sass mixins.

If you're using govuk-focusable, you must remove it. There’s no direct replacement, so you must use our Sass variables to make your components consistent with GOV.UK Frontend.

If you're using govuk-focusable-fill, include the govuk-focused-text mixin inside your component's :focus selector. For example:

.app-component:focus {
  @include govuk-focused-text;
}

Pull requests:

• #1309: Update links (and things that look like links) to use the new focus style
• #1312: Update form inputs focus to comply with WCAG 2.1
• #1313: Add new focus style to buttons
• #1321: Update footer links to use new focus style
• #1324: Update accordion to use new WCAG 2.1 compliant focus style
• #1326: Update tabs component to WCAG 2.1 compliant focus style
• #1361: Remove govuk-focusable, govuk-focusable-fill mixins, introduce govuk-focus-text mixin

Update colours

You can now use the following new colour variables that we've added to the colour palette:

• dark-blue
• dark-grey
• mid-grey
• light-grey

5 Sass colour variables no longer exist. Replace the following colour variables if you're using Sass:

Colour variable removed	Suggested replacement
bright-red	red
grey-1	dark-grey
grey-2	mid-grey
grey-3	light-grey
grey-4	light-grey

You should check the contrast ratio of your colours.

If you're not using Sass, change the values of the following colours:

Colour name	Old value	Replace with
purple	#2e358b	#4c2c92
red	#b10e1e	#d4351c
yellow	#ffbf47	#ffdd00
green	#006435	#00703c
grey-2	#bfc1c3	#b1b4b6
grey-3	#dee0e2	#f3f2f1
grey-4	#f8f8f8	#f3f2f1
light-blue	#2b8cc4	#5694ca
blue	#005ea5	#1d70b8
bright-red	#df3034	#d4351c

We've also changed the background of the following components:

• buttons - green instead of a custom green
• confirmation panels - green instead of turquoise
• links in their hover state - dark-blue instead of light-blue

If you're using legacy projects like GOV.UK Elements, you can keep your current colours by turning on compatibility mode.

Read our blog post about why we changed the colour palette.

Pull request #1288: Update colour palette.

Check the new version of the font

The size and baseline of the Design System's font are now more consistent with other fonts. Text now aligns vertically in text boxes without you needing to adjust it.

If you've extended or created components, you should check that your text is still vertically aligned correctly.

If you're using GOV.UK Frontend and GOV.UK Template, you can turn on compatibility mode to keep using the font from GOV.UK Template.

Pull requests:

• #1434: Update font to use v2 of GOV.UK Transport font
• #1441: Removing font style adjustments

Update links from error summary components to radios and checkboxes

If you've linked from an error summary component to the first input in a radios or checkboxes component, the link will no longer work.
...

GOV.UK Frontend release v2.13.0

This release contains features and fixes that make GOV.UK Frontend work better in certain scenarios.

Thanks to Colin Oakley and Paul Massey for their help with this release 🎉

Changelog

🆕 New features

• You can now override the visually hidden 'Support links' text in the footer by setting meta.visuallyHiddenTitle.

  (Pull request #1387)

🔧 Fixes

• Secondary buttons and warning buttons now have the correct background colour when they're disabled.

  (Pull request #1392)

• The crown logo image in the header now:

  • has height and width attributes set
  • aligns better with 'GOV.UK' in IE8

  (Pull request #1419)