Releases · alphagov/govuk-frontend

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:

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

Assets 3

07 Oct 12:20

NickColley

v3.3.0

c473c7e

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

Closes #1600

Assets 3

11 Sep 10:56

NickColley

v3.2.0

3ef1d76

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

Assets 3

02 Sep 15:32

NickColley

v3.1.0

c5e2232

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

Assets 3

29 Jul 12:46

m-green

v3.0.0

899264c

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.

Update file paths.
Update and add data-module attributes.
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

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/"
])

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

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

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:

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:

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:

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

Assets 3

14 Jun 11:18

hannalaakso

v2.13.0

99077a0

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)

Assets 3

28 May 14:06

NickColley

v2.12.0

92bccf9

GOV.UK Frontend release v2.12.0

This release includes some new Nunjucks features and bug fixes.

Thanks to Colin Rotherham, Thomas Leese and gunjam for their help with this release.

Changelog

🆕 New features:

Support custom attributes on summary list action links

You can now use the attributes macro option to add additional HTML attributes to summary list action links.

(PR #1372)
Support aria-describedby on all form fields

All form fields now support an initial aria-describedby value, populated before the optional hint and error message IDs are appended.

Useful when fields are described by errors or hints on parent fieldsets.

(PR #1347)

🔧 Fixes:

Update colour for MHCLG

Fixes the brand colour for MHCLG to their correct corporate "green" brand.

(PR #1319)
Remove deprecated @else-if statement, replace with @else if

(PR #1333)
Prevent the fallback PNG image for the crown in the header from being
downloaded unnecessarily in Internet Explorer and Edge.

(PR #1337)

Assets 3

25 Apr 12:48

aliuk2012

v2.11.0

8370f97

GOV.UK Frontend release v2.11.0

Changelog

🆕 New features:

Add new secondary and warning button variants

(PR #1207)
Add new govuk-shade and govuk-tint functions for creating shades and tints of
colours.

(PR #1207)
Add support for custom row classes on the summary list component (including support for some rows without action links)

(PR #1259)
Ensure fieldset never exceeds max-width

This fix ensures that both WebKit/Blink and Firefox are prevented from expanding their fieldset widths to the content's minimum size.

This was preventing max-width: 100% from being applied to select menus inside a fieldset.

See discussion in "Reset your fieldset" and raised by issue #1264

(PR #1269)

🔧 Fixes:

Add various fixes to the summary list component:
1. Fixes the 1px row height change when borders are removed
  Padding is now adjusted by 1px instead
2. Fixes the text alignment when the actions column isn't added
  So the key column always stays at 30% width
(PR #1259)

Assets 3

12 Apr 08:18

aliuk2012

v2.10.0

e746a6f

GOV.UK Frontend v2.10.0

Changelog

🆕 New features:

Add smaller versions of radio buttons and checkboxes

Thanks to @owenm6 for their help and support on this one.

(PR #1125)

🔧 Fixes:

Prevent duplicate checkbox aria-describedby

Addresses an edge case where a checkbox with a hint (but without a fieldset) is output with duplicate aria-describeby attributes. Fixes issue #1248.

Thanks to @colinrotherham for fixing this issue.

(PR #1265)

Assets 3

Releases: alphagov/govuk-frontend

GOV.UK Frontend v3.5.0

New features

Add classes to the character count component's count message

Fixes

GOV.UK Frontend v3.4.0

New features

Add classes to the page wrapper

Set a custom width for wrappers

Add attributes to the <body> element of a page

Fixes

GOV.UK Frontend v3.3.0

New features

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

Add new override class to hide elements

Visual updates to the warning text component

Fixes

GOV.UK Frontend release v3.2.0

New features

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

Fixes

GOV.UK Frontend release v3.1.0

Changelog

New features

Add attributes to the fieldset on the date input component

Add ARIA role to the fieldset component

Add inputmode to the input component

Fixes

GOV.UK Frontend release v3.0.0

Breaking changes

Update file paths, attributes and class names

If you’re using Sass

If you’re using Javascript

Update file paths

Update and add data-module attributes

Update CSS class names

If you’re using Nunjucks

Update asset paths

Migrate to the new accessible focus states

Update colours

Check the new version of the font

Update links from error summary components to radios and checkboxes

GOV.UK Frontend release v2.13.0

Changelog

🆕 New features

🔧 Fixes

GOV.UK Frontend release v2.12.0

Changelog

GOV.UK Frontend release v2.11.0

Changelog

🆕 New features:

🔧 Fixes:

GOV.UK Frontend v2.10.0

Changelog

🆕 New features:

🔧 Fixes:

Add attributes to the `<body>` element of a page

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