GOV.UK Frontend v3.10.0

New features

Update users with notification banners

You can now use notification banners to tell users about events that occur elsewhere in your service. For example, when they need to complete tasks.

This was added in pull request #1935: Create notification banner component.

Customise input mode in the date component

You can now change which keyboard type displays for mobile and tablet users. This enables users to enter characters other than numbers when they use the date input. To change the keyboard type, set the inputmode when you use the Nunjucks macro options.

This was added in pull request #1975: Enable custom inputmode for date input component. Thanks to @foaly-nr1 for contributing this issue.

GOV.UK Frontend v3.9.1

Fixes

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

• #1967: Fix navigation links in the header not being announced by screen readers - thanks to @paulrobertlloyd for reporting this issue and to @adamsilver for their help resolving it.

GOV.UK Frontend v3.9.0

New features

Add a prefix or suffix to a text input component

You can now use prefixes and suffixes in the text input component to help users enter things like currencies and measurements.

This was added in pull request #1816: Add input prefix and suffix. Thanks to @simonwhatley and the GOV.UK Coronavirus Services Team.

Test if your HTML matches GOV.UK Frontend

You can now use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.

This was added in pull request #1925: Generate fixtures.json files for components on build:package. Thanks to everyone who fed back on our test fixtures proposal.

Customise navigation in the header component

If you use the header component with navigation, you can now:

• customise the section's aria-label text
• add navigation items without links

Customise aria-label text

You can use the new:

• navigationLabel option to set the aria-label text for the navigation section
• menuButtonLabel option to set the aria-label text for the button that hides or shows the navigation section on mobile

For example:

{{ govukHeader({
    navigationLabel: "Custom navigation section aria-label",
    menuButtonLabel: "Custom menu button aria-label"
}) }}

The default labels are now:

• Navigation menu for navigationLabel
• Show or hide navigation menu for menuButtonLabel

This was added in pull requests:

• #1905: Set navigation and mobile menu labels of the header component with new options
• #1943: Change header menu button label - thanks to @domoscargin for raising this issue

Add navigation items without links

To add a navigation item without a link, use the text or html option to add the item but do not use the href option.

For example:

{{ govukHeader({
    navigation: [
    {
      html: "<form method='post' action='url.com'>
              <input type='submit' class='app-logout-button-style' value='Log out' />
            </form>"
    }
  ]
}) }}

This was added in pull request #1921: Make it possible to exclude link from header navigation item.

Fixes

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

• #1918: Add new brand colour for FCDO - thanks to @deborahchua and @beccapearce for contributing this
• #1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads
• #1947 Add print styles for the panel component

GOV.UK Frontend v3.8.1

Fixes

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

• #1912: Fix character count shrinking as you go over limit

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