GOV.UK Frontend release v2.4.0

Contributions from the community include:

• Allowing extra form group classes on all form components - massive thanks to @colinrotherham

Changelog

🆕 New features:

Scroll to label or legend when linked from error summary

When users click links in the error summary, the corresponding label or legend will now be moved to the top of the viewport, rather than the input. This means that the context for the input remains on-screen.

(PR #1056)

Label or legend are announced for NVDA users when navigating to an input from
the error summary

(PR #1056)

Allow form group classes on date, file upload, input, select and textarea

All remaining form groups should allow additional classes, like with radios and checkboxes

(PR #1059)

🔧 Fixes:

Remove implicit dependency on Element for classList

(PR #1063)

Single field with error should have 'aria-describeby' attribute

Although we discourage using checkboxes without fieldsets, this fix ensures that if there are no fieldset then the aria-describeby will still be usable by screenreaders by adding the element ids to the checkbox input elements 'aria-describeby' attribute.

(PR #1054)

GOV.UK Frontend release v2.3.0

2.3.0 (Feature release)

Contributions from the community include:

• Allowing attributes to be added to table component cells - thanks to @jonheslop
• Add important parameter to visually hidden sass mixin - thanks to @David-Way
• Internal fix - thanks to @richardTowers

Changelog

🆕 New features:

Add important parameter to visually hidden sass mixins

Optional parameter added to govuk-visually-hidden and govuk-visually-hidden-focusable mixins (defaults to true)

(PR #1037)

Add support for attributes on table cells

Can now use the familiar attrubutes: {} pattern to add various
attributes such as id or data-attr to cells within tables

(PR #1045)

Allow form group classes on radios and checkboxes

We now provide a way to add classes to the radio and checkbox form-group wrapper

(PR #1043)

🔧 Fixes:

Fix anchor links in tabs component panels

(PR #1031)

Fix IE8 support in builds in the dist/ folder

(PR #1035)

GOV.UK Frontend release v2.2.0

2.2.0 (Feature release)

Contributions from the community include:

• New character count component - thanks to @alex-ju (and @edwardhorsford for the original work)
• Fix to radios component divider ('or') not being set to the correct colour - thanks to @kevindew
• Accessibility improvement for link buttons so that they behave the same as buttons when accidentally dragged - thanks to @quis

Changelog

🆕 New features

Allow classes on table header and row cells

Optional classes attribute can now be used on table header and row cell item
in the Nunjucks macro

(PR #1015)

Add character count component

(PR #959)

🔧 Fixes

Apply max-width to the <select> element

The <select> element's width is governed by the widths of its <option>'s.

When the text in the options grows large, the element can grow to > 100% of the width of its container and break the layout.

(PR #1013)

Prevent product name in header from wrapping

Currently the product name in the header wraps when the space shrinks which doesn't look great.

Adding display: inline-table prevents that so that the product name as a whole drops to a new line when space is shrunk.

(PR #1007)

Set text colour for radios divider

(PR 1023)

Stop links styled as button from being dragged

Moving the mouse over a link while its button is depressed causes the
browser’s dragging behaviour to trigger (and prevents the click
event from firing). This is contrary to how actual <button> elements
work. This pull request makes the behaviour of links styled as buttons
consistent with that of buttons.

(PR #1020)

GOV.UK Frontend release v2.1.0

2.1.0 (Feature release)

Highlights for the 2.1.0 release include

• fixing flash of unstyled content in tabs component
• allowing attributes to be added to child items in Nunjucks macros in header, footer, breadcrumbs, tabs and error-summary components
• publishing component options (arguments) as JSON file for each component

Changelog

🆕 New features

Allow additional 'meta' content in the footer

You can now pass additional 'meta' content (as meta.html or meta.text) which will appear below any meta links, above the OGL license. This is ideal for, for example, the 'Built by Department Name' colophon.

(PR #990)

Allow attributes to be added to some child items in header, footer, breadcrumbs, tabs and error-summary components

You can now pass additional attributes to links in header, footer, breadcrumbs, tabs and error-summary components

(PR #993)

Fix issue with conditional form content and inline form controls

When inline variant of form controls is used with conditional content, we force it to display block.
This is to avoid breaking and confusing styling as it is a combination we don't recommend.

(PR #970)

Add component options (arguments) as macro-options.json to package

We want to be able to expose these options to GOV.UK Design System. This change includes them as yaml in src/components and adds a build step to transform them to JSON and copy them to package/components. It also adds a test to check if the copied files are valid JSON and contain expected attributes.

(PR #998)

🔧 Fixes

Fix mobile menu button submitting parent forms

The menu <button> didn’t have an explicit type set, which meant that it
defaulted to type=“submit”.

This meant that if the header was inside a form (as it is in the Design System examples, but we can imagine other scenarios where this would be the case) clicking the menu button would submit the form.

In most cases this would also cause the page to reload, which closes the menu.

(PR #994)

Fix flash of unstyled content in tabs component

(PR #1000)

Add 48px favicon

Microsoft recommends including at least a 48x48px favicon.

(PR #986)

Update browsersList in package.json to reflect our supported browsers

browsersList is used by PostCSS in our current build to determine which browser prefixes or rules to generate for the built CSS files. This PR adds rules to specify that the browsers in our browser matrix should always be prefixed for. Additionally, any browser with more than 0.1% of the global market share is prefixed for.

In terms of changes to our built CSS, this means that -webkit-box-sizing and -webkit-box-shadow prefixes will be removed - neither of these prefixes are required by desktop Safari 5.1 or later so this seems a fairly safe change to make.

(PR #1002)

GOV.UK Frontend release v2.0.0

2.0.0 (Breaking release)

⚠️ Changes in this release could break your project, please check the changelog notes to see if you need to update anything in your application. ⚠️

Highlights for the 2.0.0 release include improvements to accessibility in all components with:

• End-users can now specify the font-size in their browser GOV.UK Frontend will scale proportionally (PR #981)

• Links and focusable elements no longer have poor contrast when focusing them. (PR #982)

Both of these changes we hope will help users with vision impairments use services.

We have also turned off compatibility mode by default in this release, if you use GOV.UK Template, GOV.UK Elements or GOV.UK Frontend Toolkit with GOV.UK Frontend you should re-enable this, see the notes for more information.

For the full list of breaking changes see the changelog notes below.

Thanks to @malcolmhire, @malydok and @fofr for helping us ship this release.

Things to look out for

“Why do my buttons have blue text?”

We have additional styles in GOV.UK Frontend that defend against overly specific CSS selectors in deprecated projects such as GOV.UK Elements, these are now opt-in by enabling compatibility mode - see the notes for more information.

“Why are all my components tiny or really big?”

Since components now use relative units for sizing their text they can appear the wrong size if the root html element has set the font-size to something unconventional, this is the case with GOV.UK Template, see the notes for more information.

Changelog

💥 Breaking changes

Set panel component's title heading level to 1 as default

We think the panel title should be the h1 in the majority of cases, so we made
it the default.

If you have need to change the Panel component heading to something other than
h1, you can do so by specifying headingLevel: <number> in the Nunjucks
macro.

(PR #967)

Remove deprecated govuk-visually-hidden-focussable class name

In 1.1 release we added a new, correctly spelt
govuk-visually-hidden-focusable CSS class and marked the old one as
deprecated.

To migrate you need to change govuk-visually-hidden-focussable to
govuk-visually-hidden-focusable in your codebase.

(PR #968)

Remove name-based width logic from date-input component

In 1.1 release
we removed styling which made the year field 4 characters wide, but was
coupled to the field's name.

However, to avoid making this a breaking release, we added logic to
automatically add the width classes based on the name.

We are now removing this behaviour. Instead, users need pass explicit classes
for each field in the items object for the desired width of the input field.

If you are not passing items at all, you will get the default items which include these classes.

If you are using the Nunjucks macro, you need to provide a width class for
each item, for example:

{{ govukDateInput({
"id": "dob",
"name": "dob",
"fieldset": {
    "legend": {
    "text": "What is your date of birth?"
    }
},
"items": [
    {
    "name": "day",
    "classes": "govuk-input--width-2"
    },
    {
    "name": "month",
    "classes": "govuk-input--width-2"
    },
    {
    "name": "year",
    "classes": "govuk-input--width-4"
    }
]
}) }}

If you are using plain HTML, you need to manually add a width-based class, such
as govuk-input--width-2 or govuk-input--width-4 to the input fields.

(PR #969)

Rename name argument of date-input component to namePrefix.

This is better reflective of the purpose of the argument, which is to prefix the name attribute of items. This is consistent with other components which use the name idPrefix to explain similar functionality.

If your project currently uses this optional argument with the date-input macro, you need to rename all instances of it to namePrefix (NB: this argument shouldn't be confused with the items.{}.name attribute which hasn't changed.)

(PR #984)

Turn off compatibility mode by default for GOV.UK Elements, GOV.UK Template, GOV.UK Frontend Toolkit

You do not need to make any changes if you do not use these projects alongside GOV.UK Frontend.

To migrate include the SCSS variables that correspond with the projects you depend on before importing GOV.UK Frontend styles into your app:

// application.scss
$govuk-compatibility-govukfrontendtoolkit: true;
$govuk-compatibility-govuktemplate: true;
$govuk-compatibility-govukelements: true;
@import "govuk-frontend/all";

(PR #981)

Turn on relative typography (rem) by default

This allows for end-users to adjust GOV.UK Frontend components by setting their font size in their browser.

If you are using GOV.UK Frontend on with no other frameworks this should not break your project.

If you need to change this setting for compatibility with GOV.UK Elements, GOV.UK Template, GOV.UK Frontend Toolkit consider enabling compatibility mode.

Otherwise, set $govuk-typography-use-rem to false before importing GOV.UK Frontend styles into your app:

// application.scss
$govuk-typography-use-rem: false;
@import "govuk-frontend/all";

(PR #981)

Remove anchor styling in govuk-lists

This was an undocumented feature of lists.

To migrate we recommend using adding .govuk-link class to any anchors within a govuk-list.

If you would like to replicate this functionality without adding a class you can also enable global styles (Note: global styles are enabled by default in the GOV.UK Prototype Kit)

(PR #985)

Remove the width declaration from the <select> component

The <select> component’s width will now be defined by it’s content. This addresses some accessibility issues with the select being 100% wide by default. If you want to style your select to be 100% wide we have added a new override class .govuk-!-width-full to allow this.

(PR #960)

Use text colour on focus for better contrast

Updates the focus styles of links in GOV.UK Frontend so they pass WCAG contrast requirements.

(PR #982)

🆕 New features

Add a new width override class .govuk-!-width-full

You can now override elements that have an undefined or smaller percentage width to be 100% width of their container.

(PR #960)

Allow attributes on select items

You can now provide attributes on select items
attributes: { 'data-attribute': 'value' }

(PR #977)

🔧 Fixes

Textareas can now only be resized vertically, to prevent them being resized

outside of their container bounds. Additionally, they now have a minimum
height to prevent them being resized smaller than a text input.

(PR #976)

Defend tables against GOV.UK Elements code

(PR #983)

GOV.UK Frontend release v1.3.0

This is a feature release, where we've added new functionality and fix a couple of small issue

Thanks to @colinrotherham you can now specify attributes on radio and checkbox items.
We have fixed the spacing between legends and hints, removed whitespaces in the template and dotted outline of the button in Firefox, adjusted spacing in the tag and panel component as well as changed date input component's inputs from float to inline-block.

For more details see the changelog below.

Changelog

🆕 New features:

• Allow attributes on checkboxes/radios

  You can now provide attributes on checkbox and radio items
  attributes: { 'data-attribute': 'value' }

  (PR #942)

🔧 Fixes:

• Fix incorrect panel title bottom margin with optional text

  Margin is only added when panel text is provided

  (PR #936)

• Remove template whitespace

  Remove leading whitespace before the doctype in the page template.
  Some older browser will be forced into 'quirks mode' if there is whitespace before the doctype.

  (PR #949)

• Remove additional dotted outline from focussed buttons in Firefox

  This was already the intended behaviour, but a minor typo (: rather than ::)
  meant that it wasn't being applied.

  (PR #951)

• Update date input component to use display: inline-block
  (PR #938)

• Change spacing relationship on default and small legends and hints
  (PR #940)

• Adjust tag component padding to compensate for font spacing
  (PR #955)

GOV.UK Frontend release v1.2.0

This is a feature release, where we've added some new functionality and there are no breaking changes.

In both radios and checkboxes macros you can now provide specify optional hints and optional label classes to each item. Additionally, you can provide a text divider between radio items.

OpenGraph image meta tag path is now independently customisable if needed and we've added stylistic tweaks to the logo when users have overridden colours in their browser.

There have also been some fixes to the conditional revealing content to address fix flash of unstyled content as well as replacing 'js-hidden' class with a new modifier class in tabs component's javascript file.

For more details see the changelog below.

Changelog

🆕 New features:

• Allow for optional divider between radio items

  You can now provide a divider item (e.g "or") to separate items
  (PR #849)

• Allow og:image meta tag url to be set independently
  Image url for the opengraph image needs to be absolute and
  can now be overwritten by setting the assetUrl variable.
  (PR #847)

• Only underline the logo in the header on underline when users have overridden
  colours in their browser, rather than it appearing underlined all the time
  (PR #926)

• Allow for optional hint for each radio and checkbox item

  You can now pass a hint object (or add in html) to each radio
  and checkbox item to display the hint
  (PR #846)

• Allow additional classes to be added to the radio and checkbox items

  You can now provide label: { classes: 'extra-class' } to each item.

  (PR #880)

🔧 Fixes:

• Replace conflicting js-hidden class used within the tabs component with a new modifier class.
  Because this class is defined and used within the JavaScript, no markup changes are required.
  (PR #916)

• Use get-function when calling a Sass function as passing a string to `call()``
  is deprecated and will be illegal in Sass 4.0
  (PR #919)

• Fix flash of unstyled content with conditional reveals (Radios and Checkboxes)

  If the conditional reveal JavaScript is slow to execute it can result in showing the user their contents briefly which can be jarring.

  (PR #885)

GOV.UK Frontend release v1.1.1

This release contains bug fixes to the details, tabs and date-input components.

In particular there is a bug fix for the details component that could cause accessibility issues.

Changelog

🔧 Fixes:

• Update details behaviour to remove margin-bottom for all elements
  (PR #900)

• Update internal padding of tab content in the tabs component
  (PR #886)

• Fixes an issue where clicking the revealed content in browsers that do not
  support the native details element causes the details element to collapse.
  (PR #912)

• Fixes an issue where clicking the revealed content within a details element
  toggles the aria-expanded attribute on the summary element and the aria-hidden
  attribute on the content element, causing them to get out of sync with the
  visible state of the component.
  (PR #912)

• Fixes an issue where it's not possible to make any field that does not have
  the name ‘year’ use any other width than 2 characters
  (PR #908)

• Fix undefined class displaying in date input
  (PR #913)

GOV.UK Frontend release v1.1.0

This release is a feature release, which means that it introduces new features, but there are no breaking changes.

Things to be aware of

This release includes support for defining font sizes with 'rem', which is disabled by default. This will allow the text in your services to scale appropriately when end-users change the font size in their browser. We intend to enable this by default in a future breaking release.

We have updated the panel component so that the heading level can be customised. The default remains an h2, but we will change the default to h1 in a future breaking release. If the panel title is also the title of the page, you should update your use of this component now to use an h1 – if you're using the macro, you can do this by passing headingLevel: 1.

We have fixed a typo in the govuk-visually-hidden-focussable class name. The misspelt classname is still available, but we will remove it in a future breaking release. You may want to replace any instances of govuk-visually-hidden-focussable in your code with govuk-visually-hidden-focusable now to make it easier to upgrade in the future.

We have also removed component examples (for example button.njk) that were used internally and published to npm, please use the 'yaml' component files instead.

Finally thanks to @bevanloon for fixing an issue in the footer component!

Change log

🆕 New features:

• Add govuk-visually-hidden-focusable class

  Adds .govuk-visually-hidden-focusable and deprecates .govuk-visually-hidden-focussable in order to fix the typo in the class name. Please consider updating your code as the next major release will remove the deprecated class.

  (PR #859)

• Allow panel component title heading to be customisable.

  You can now specify a heading level by providing
  headingLevel: <number> parameter. Default is 2.
  (PR #853)

• Update date input component

  Allow the name and id attributes to be passed individually for each input item.

  Rely on classes instead of item names to set the width of input items.

  Add default (day, month, year) date input items if no items are being specified

  (PR #857)

• The typography scale can now be converted from pixels to rem automatically,
  with pixels also being provided as a fallback for older browsers.

  This feature is disabled by default - in order to use it you will need to set
  $govuk-typography-use-rem: true and ensure that $govuk-root-font-size is
  set to the effective size of your root (html) element. For new projects, this
  should be the default of 16px so you don't have to do anything. For projects
  that use alphagov/govuk_template this should be 10px.

  The intention is to enable this by default in the next major version:
  #868

  (PR #858)

🔧 Fixes:

• Remove mistakenly applied 5px bottom margin from radio and checkbox
  labels.
  (PR #883)

• Apply display:block to .govuk-main-wrapper

  In IE11 main element is set to display:inline so padding
  and margins aren't applied.
  (PR #863))

• Line-heights are now converted from pixels to relative 'unit-less' values
  in order to prevent issues when resizing text in the browser.
  (PR #837 and
  PR #848)

• Add bottom margin to Tabs component
  All components (or outer layer components) have a bottom margin
  applied to them so spacing feels automatic.
  (PR #841)

• Update Crown copyright link
  Update the Crown copyright link on the National Archives so
  we don't send users on an unnecessary redirect.
  (PR #824)

• Fixes radio and checkbox labels extending full width of page
  (PR #821)

• Prevent the exclamation mark in the warning text component from being
  selectable, which also excludes it when it is copied as part of a wider body
  of text
  (PR #856)

• Add customised colours handling for warning text

  By adding a border to this component, when a user customises their colour settings
  they will still see a circle even if the background is removed.
  (PR #852)

• Fixes a bug where the phase banner incorrectly uses a font-size of 19px when
  global styles are enabled
  (PR #877)

• Add outlines to Radios and Checkboxes for customised colour users

  Now when a user customises their colours,
  they should see a focus state on both Radios and Checkboxes.
  (PR #854)

• Add outline to tag for customised colour users

  Now when a user customises their colours,
  the tag component still keeps it's meaning.
  (PR #855)

• Define size of table in px rather than em

  This brings the styling of tables inline with rest of GOV.UK Frontend which no longer uses em for measurements.

  This change very slightly increases the padding of table cells on mobile viewport as the use of em meant the font size set in the table was used to calculate padding. padding-top and padding-bottom of cells increase by 1.5px respectively which very slightly increases the height of the table on mobile.

  In the unlikely case that your UI has a dependency on tables being a certain fixed height of mobile viewport, this change might affect you.

  (PR #845)

• Fix header component's reliance on markup whitespace

  We have had issues where the header component can render incorrectly if the markup contains whitespace,
  for example if it has been pretty printed.

  This changes the header component to use float based columns similar to how the grid system works.

  (PR #884)

🏠 Internal:

• Fix Design System url in package READMEs and review app
  (PR #812)

• Update back-link example to show default usage doesn't need
  text parameter
  (PR #819)

• Lowercase component names
  (PR #822)

• Tidy up some package.json fields to help contributors and users
  (PR #827)

• Fix failing Heroku app with Node 10.5.0
  Revert to pinning node version in package json
  (PR #833)

• Format YAML and Nunjucks consistently
  (PR #830)

GOV.UK Frontend release v1.0.0

This is our first stable release. 🙌 🎉

The v1.0.0 release includes a new tabs component, contributed by @adamsilver and @trevorsaint. And some improvements to defaults in the back link and header components (thanks @web-bert).

Our releases up until now have contained mostly breaking changes, with v1.0.0 we intend to only make breaking changes where absolutely necessary to make it easier to upgrade.

We'll be announcing the GOV.UK Design System tomorrow, so if you want to start sharing GOV.UK Frontend and the Design System, please wait until then! 😄

1.0.0

🆕 New features:

• Add tabs component – thanks to @adamsilver and @trevorsaint for contributing
  (PR #776)

• Add default text for back-link component – thanks to @web-bert
  (PR #793)

• Add default container class to the header component
  (PR #807)

🔧 Fixes:

• Reduce margin-bottom on the hint when following a default or small label
  This reduces the margin-bottom of the hint by 5px after a default
  <label> or <label class="govuk-label--s">.
  (PR #806)

🏠 Internal:

• Remove instructions to login with npm, which is no longer required
  (PR #795)

• Update docs with the assistive technology we support (PR #800)

• Update docs about installing fonts (PR #802)

• Update browser support matrix
  Remove Windows Phone
  Update IE 8-10 to functional and IE 11 to compliant
  (PR #803

• Add notice about the use of html arguments in Nunjucks macros for production
  (PR #785)

• Add CHANGELOG_TEMPLATE to make changelogs easier for new contributors
  (PR #798)

• Update package README
  (PR #804)