GOV.UK Frontend v5.0.0-beta #4389
Replies: 7 comments 34 replies
-
|
I tested upgrading to this preview release for the Ruby implementation of govuk-frontend – see Pull request #456. One thing that wasn't in the draft release notes is the need to change this:
to this:
I was stumped at first as the console error was just saying "SupportError: GOV.UK Frontend is not supported in this browser" in every browser - but I eventually figured it out by reading the frontend docs preview, which does mention it. |
Beta Was this translation helpful? Give feedback.
-
|
Cheers for spotting this @frankieroberto, we'll amend the release notes to make that step more visible, as yeah, without the new snippet no components will initialise. |
Beta Was this translation helpful? Give feedback.
-
|
CHANGELOG's been updated, both in the repo and in the release notes (as well as the main post of this discussion). |
Beta Was this translation helpful? Give feedback.
-
|
@frankieroberto Thanks again for this feedback We've clarified the message in 845fe13 and it made the cut for the |
Beta Was this translation helpful? Give feedback.
-
|
I ran into a problem installing this with Yarn (rather than NPM). When adding a package, Yarn tries to lookup its devDependencies too. There are four namespaces dependencies ( In Yarn 1.22.19 (latest "classic" release) In Yarn 4.0.0 (latest release) This could be resolved by dropping those deps or making them public. There might be other solutions in Yarn's config, but I don't know enough to identify them off-hand and I would imagine you'd want to support it out-of-the-box (which I believe my configuration is). I would also assume that having private dependencies will make it hard for people to fork and contribute to govuk-frontend. |
Beta Was this translation helpful? Give feedback.
-
|
Cheers @gregtyler for letting us know and sorry yarn is failing to install. Looks like it is trying to install the packages from our npm workspaces we use for structuring our repo 🤔 We'll investigate and see how we can organise our dependencies (likely move those to |
Beta Was this translation helpful? Give feedback.
-
|
Massively appreciate this being flagged for us, thank you We've fixed it in #4391 and will add it to the next pre-release Looks like Yarn's |
Beta Was this translation helpful? Give feedback.
-
|
Hi @gregtyler, we've just published a new |
Beta Was this translation helpful? Give feedback.
-
|
It looks like v5 doesn't support calling That's because of it calls function isSupported($scope = document.body) {
return $scope.classList.contains('govuk-frontend-supported');
}If you call this in the At the least, it'd be helpful if it threw an error with a clearer explanation, like "cannot initialise GOV.UK Frontend before body loaded". |
Beta Was this translation helpful? Give feedback.
-
|
("Come back to us when you have a real example" is a totally valid response to this if my speculation is unhelpful!) |
Beta Was this translation helpful? Give feedback.
-
|
No no those are perfect examples! We've mentioned the Cookie banner component a few times internally too for consent from older browsers Yeah, perhaps to emphasise that services can split out
With our GOV.UK visitor numbers showing IE11 at < 0.10% it's a big page load burden to carry that weight 😔 For essential components, we'd recommend teams are familiar with Building a resilient frontend using progressive enhancement. Your text editor example is spot on for this, with basic |
Beta Was this translation helpful? Give feedback.
-
|
Totally with you on progressive enhancement, but it's one of those things I'm aware isn't consistently applied in real services 😞 A lot of this conversation feels like things you can't really fix from GDS, or cover in release notes, but perhaps things that you could help educate on so that users can self-serve their particular situation. So what might help (apologies if this is already a thing and I've missed it) is a blog or GitHub post to outline your strategy around:
That might give people a bit more space to explore how they've architected the JS in general rather than just adding a |
Beta Was this translation helpful? Give feedback.
-
|
This is all good stuff, I've captured it for review 🥇 |
Beta Was this translation helpful? Give feedback.
-
|
As a step towards more clarity, we've shipped an updated error message nudging people towards using |
Beta Was this translation helpful? Give feedback.
-
|
I've run into a problem when testing my Python/Jinja port due to the test fixtures Example: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @andymantell. Sounds about right, this issue was new to some of us! Yeah we keep the data in each fixtures.json file as At least for now the quickest fix is to use the
|
Beta Was this translation helpful? Give feedback.
-
I've run into the same problem in the .NET library; I was relying on the |
Beta Was this translation helpful? Give feedback.
-
|
Hi @gunndabad, We're still generating the JSON files with the usual fields (and more) Can you double check you've applied the - govuk-frontend/govuk/components/character-count/fixtures.json
+ govuk-frontend/dist/govuk/components/character-count/fixtures.json |
Beta Was this translation helpful? Give feedback.
-
|
@colinrotherham do I have to run some kind of build process to get those now? I'm not seeing any JSON files at https://github.com/alphagov/govuk-frontend/tree/v5.0.0-beta.0/dist. For 4.x I was referencing |
Beta Was this translation helpful? Give feedback.
-
|
@gunndabad Ah I understand now Ideally look into the └── package
├── govuk
├── govuk-esm
├── govuk-prototype-kit
├── package.json
└── README.mdAs a quick fix though, it's good to explain that our GitHub repo has been organised into separate packages E.g. Compare "package" above with "packages" below: └── packages
└── govuk-frontend
├── src
│ ├── govuk
│ └── govuk-prototype-kit
├── dist
│ ├── govuk
│ └── govuk-prototype-kit
├── package.json
└── README.mdSo yes, you can actually build the JSON yourself if needed (but 100% unofficially) npm install
# Build packages/govuk-frontend/src → dist
npm run build --workspace govuk-frontendUnlike the |
Beta Was this translation helpful? Give feedback.
-
|
Can I also ask; are the symlinks at |
Beta Was this translation helpful? Give feedback.
-
|
Ah I'm glad they've (possibly) been helpful for you, but may just be a temporary measure for contributors |
Beta Was this translation helpful? Give feedback.
-
|
They have helped more immediately yes, so thanks for including them! Good to know that they may disappear at some point, so I'll update govuk-frontend-diff (https://github.com/surevine/govuk-frontend-diff/pull/97) to take that into account too. Cheers 👍🏻 |
Beta Was this translation helpful? Give feedback.
-
Favicons and
|
Beta Was this translation helpful? Give feedback.
-
|
Hey Frankie, The main thing that spurred the inclusion of a manifest file in this release was so that Android devices utilised our icons correctly. As Android launchers often come with various icon shapes (circles for Pixel devices, squircles for Samsung devices, etc.), they default to shrinking the favicon down and putting a white box around it to avoid any cropping, which is neither pretty nor great for maintaining the icon's readability. This happens for all Android-based browsers, from my recollection. Providing a manifest file with icon paths and instructions for how they can be used is the only way Android provides us to avoid that outcome. There isn't a There isn't any other user agent that requires the manifest to render the icons correctly, but there's also a little bit of soothsaying involved. The webmanifest standard is looking to potentially be the future of icons for other user agents too: Safari on iOS has supported them for some time (though it still prioritises So, it's sorta important for Android users! Other UAs less so, but it's probably good to roll it out sooner rather than whenever we decide to remove In this circumstance, it sounds like generating the manifest yourself might be the way to go if setting expiry on some other basis (e.g. all files in the icon directory) isn't possible or practical. |
Beta Was this translation helpful? Give feedback.
-
|
Should the release notes mention the HTML changes made to visually hidden text in action links on summary cards in #3961 ? Anyone using Nunjucks components won’t need to make any changes, but those using other frameworks like Scala or React or Python or whatever could be recommended to update their templates? |
Beta Was this translation helpful? Give feedback.
-
|
Cheers Frankie, that's a good spot! We're adding an entry to our release notes 😊 |
Beta Was this translation helpful? Give feedback.
-
5.0.0-beta.2 (Pre-release)
Breaking changes
Update the GOV.UK logo
The GOV.UK logo has been updated to merge the GOV.UK text with the crown graphic. This is to ensure that the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont fail to load. Styles relating to the logo have also been modified.
If you're using the
govukHeaderNunjucks macro you don't need to change anything.Otherwise, to update to the new logo:
<span class="govuk-header__logotype-text">and its content.<span class="govuk-header__logotype">around thesvgelement.svgelement with this updated SVG, ensuring that the class name and attributes are also updated.This change was made in pull request #4449: Implement transitional crown in the Header component (v5.0).
Check your favicons, app icons and OpenGraph image still work
We've changed the names, formats and sizes of icon assets that we distribute in Frontend. You will want to check that the correct files are in place.
The following files have been added to the assets folder:
The following files have been removed from the assets folder:
If you're not using the Nunjucks page template, you will need to replace the list of icons in the template's
headwith the following:You will need to update the file path to match your assets folder if it's not at the default location.
This change was made in pull request #4445: Implement transitional crown favicons (v5.0).
Recommended changes
We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.
Remove the X-UA-Compatible meta tag
Remove the
<meta http-equiv="X-UA-Compatible" content="IE=edge">meta tag from your page template.Internet Explorer versions 8, 9 and 10 included a feature that would try to determine if the page was built for an older version of IE and would silently enable compatibility mode, which would modify the rendering engine's behaviour to match the older version of IE. Setting this meta tag prevented that behaviour.
IE11 deprecated this meta tag and defaulted to always using IE11's renderer when the page has a HTML5 doctype (
<!DOCTYPE html>).As Frontend no longer supports Internet Explorer versions older than 11, this meta tag can now be removed.
This change was made in pull request #4434: Remove X-UA-Compatible meta tag.
Fixes
We’ve made fixes to GOV.UK Frontend in the following pull requests:
<body class="govuk-frontend-supported">is not set5.0.0-beta.1 (Pre-release)
Fixes
We’ve made fixes to GOV.UK Frontend in the following pull requests:
devDependencies5.0.0-beta.0 (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-imageclass. You should only use this class on links containing an image. If it also contains text, continue to usegovuk-linkinstead.You can use these styles in your own code by including the
govuk-focused-boxSass 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-stylestotruein 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-colourSass variable.To change the inverse button's text colour, set the
$govuk-inverse-button-text-colourSass variable.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-frontendon npm.These changes were introduced in:
govuk-frontend.min.csspackage bundleCheck 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:
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-govukfrontendtoolkitcompatibility-modemixin which automatically checked if any of the 3 control variables were set totrueWe’ve additionally removed features that were managed using the above variables. The following features and their corresponding variables have now been removed:
$govuk-use-legacy-palette$govuk-use-legacy-font$govuk-font-family-tabular$govuk-typography-use-remThese changes were introduced in:
Update the HTML for warning text
We've removed the
.govuk-warning-text__assistiveclass and its styles from GOV.UK Frontend. This class is unnecessary, as it duplicates the functionality of the.govuk-visually-hiddenclass already present in Frontend.If you’re not using Nunjucks macros, update your warning text HTML to replace the
govuk-warning-text__assistiveclass with thegovuk-visually-hiddenclass.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/govukwithgovuk-frontend/dist/govukin any JavaScriptrequire()orimportfile paths.For example using
require():For example using
import:If you’re including JavaScript directly
Replace GOV.UK Frontend
all.jswithgovuk-frontend.min.jsand use<script type="module">for ES modules:Next replace
<script>window.GOVUKFrontend.initAll()</script>to import and initialise GOV.UK Frontend using ES modules: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/govukwithgovuk-frontend/dist/govukin any Sass@importpaths.For example:
If you’ve added
node_modules/govuk-frontendas a Sass import path, update it with the/distsuffix:If you’re using Nunjucks
Replace
govuk-frontendwithgovuk-frontend/distin anynunjucks.configure()search paths:These changes were made in the following pull requests:
govuk-frontendvia local packagedistandpackagefrom sourceUpdate the
<script>snippet at the top of your<body>tagPage templates now include a new
govuk-frontend-supportedclass 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:
with:
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:
to:
Check your browser console for component initialisation errors
GOV.UK Frontend JavaScript components now provide errors. The following list shows the type of errors and the situations in which they occur:
SupportError- when GOV.UK Frontend is not supported in the current browserElementError- when component templates have missing or broken HTML elementsConfigError- when component JavaScript configuration does not match our documentationThese errors will be:
initAll()functionTo make sure the components behave as intended, we encourage you to check your browser console and address any errors by updating your markup or configuration.
These changes were introduced in:
SupportErrorwhen instantiating components where GOV.UK Frontend is not supportedElementErrorwhen the module is not of the expected typeConfigErrorwhen component configs are invalidMissingElementErrorand use it within the Skip LinkElementErrorwhen "Exit this page" button is missingElementErrorwhen the menu of the header is missing but a toggle is presentElementError(not found) if checkboxes or radios have no input itemsElementErrorfor missing elements during Character count instantiationCheck the Details component works as expected
The Details component no longer uses JavaScript, and is no longer polyfilled in older browsers.
If you are not using our Nunjucks macros, make sure you remove the
data-module="govuk-details"attribute from all<details>elements.If you have extended browser support requirements, check the Details component works as expected in older browsers.
This change was introduced in pull request #3766: Remove JavaScript from Details component.
Check the ‘Disabled buttons’ work as expected
The
disabledattribute on ‘Disabled buttons’ created using our Nunjucks macros no longer includes a value.If you are using
$button.getAttribute('disabled')to check for the disabled attribute in JavaScript, this will now return an empty string. This might cause unexpected behaviour if you are relying on the return value being the string 'disabled' or being truthy.Instead, we recommend checking for the
disabledattribute using$button.hasAttribute('disabled')or the$button.disabledIDL attribute.This change was introduced in pull request #2830: Set the boolean disabled attribute consistently in the button component.
Check the mobile menu button in the Header component works as expected
We've removed some styles from the
.govuk-header__menu-buttonclass. These styles were included on the mobile menu button to avoid introducing a breaking change in GOV.UK Frontend v4.3.0.If you're not using Nunjucks macros, and have not done so already, add the
hiddenattribute to the button's HTML to ensure it continues working as expected.You do not need to make any changes if using the Nunjucks macro.
When working correctly, the button should only show on narrow screens when JavaScript is available. It should be hidden on wider screens or if JavaScript is unavailable.
This change was introduced in pull request #3596: Remove redundant display style from .govuk-header__menu-button.
Check the Selects work as expected
The
govukSelectmacro will no longer include an empty value attribute for options that do not have a value set.This means that the value of the select if that option is selected will now be the text content of the option, rather than an empty string.
If you need to maintain the existing behaviour, you can set the value to an empty string.
This change was introduced in pull request #3773: Omit the value attribute from select options with no value.
Check that inverse buttons still look as expected
Inverse button components now use the
$govuk-brand-coloursetting to determine the button's text colour and the button's background tint when hovered or activated. The button will only look different if$govuk-brand-colourhas been changed from the default.You can restore the previous blue colour by setting
$govuk-inverse-button-text-colourbefore importing the button component's Sass.This change was made in pull request #4043: Add ability to customise inverse button colours.
Remove component initialisation
Remove
.init()from individually instantiated components as initialisation now happens automatically:If you initialise the components using
initAll(), you will not need to make any changes.This change was introduced in pull request #4011: Remove component init() methods and initialise in constructor.
Remove Internet Explorer 8 stylesheets, settings and mixins
We no longer support Internet Explorer 8 (IE8) in GOV.UK Frontend or provide dedicated stylesheets for the browser. Remove any references to these stylesheets from your HTML.
We've removed the
govuk-if-ie8andgovuk-not-ie8mixins, and the$govuk-is-ie8and$govuk-ie8-breakpointsettings, that were deprecated in GOV.UK Frontend v4.6.0.This change was introduced in pull request #3559: Remove IE8-related Sass and CSS build tasks.
Remove the fallback GOV.UK crown logo from your HTML
The header component previously included a fallback version of the GOV.UK crown logo for Internet Explorer 8. As Frontend no longer supports IE8, we’ve removed this fallback.
If you're not using the Nunjucks macros, you'll need to remove this fallback from your HTML code. In your header component:
govuk-header__logotype-crown-fallback-imageimage, starting with<!--[if IE 8]>and ending with<![endif]-->.<!--[if gt IE 8]><!-->and<!--<![endif]-->from around thegovuk-header__logotype-crownSVG, but don't remove the SVG.govuk-logotype-crown.pngfile from your assets folder.You do not need to change any HTML if you're using the supplied Nunjucks macros, but you might still need to remove the
govuk-logotype-crown.pngimage depending on how you are serving the font and image assets.This change was introduced in pull request #3641: Remove fallback GOV.UK logo for IE8.
Removal of Javascript polyfills for Internet Explorer (IE) 8-11
We've removed polyfills for:
DOMTokenList,Element.prototype.classList,Element.prototype.closest,Element.prototype.matches, andEvent- required for IE 11 and belowElement.prototype.dataset- required for IE 10 and belowDate.now,Document,Element,Element.prototype.nextElementSibling,Element.prototype.previousElementSibling,Function.prototype.bind,Object.defineProperty,String.prototype.trimandWindow- required for IE 8GOV.UK Frontend no longer needs these polyfills because Internet Explorer will no longer try to run our JavaScript if you follow our instructions and include it using
<script type="module">.However, because these polyfills create or extend global objects ('polluting the global namespace'), you might have other code in your service unintentionally relying on the inclusion of these polyfills.
If your service has JavaScript that you want to run successfully in Internet Explorer (for example JavaScript for analytics), make sure the JavaScript does not rely on the removed polyfills and still executes successfully. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.
These changes were introduced in:
Removal of font family Sass variables
We’ve removed the following Sass variables:
$govuk-font-family-gds-transport$govuk-font-family-nta$govuk-font-family-nta-tabularIf you were using
$govuk-font-family-gds-transportto set the font on an element, we recommend using thegovuk-fontmixin instead.This change was introduced in pull request #3949: Simplify font family settings.
Remove deprecated
.govuk-button--disabledclassWe've removed the
.govuk-button--disabledclass that we deprecated in GOV.UK Frontend v4.6.0.Use the
disabledattribute to mark<button>and<input>elements as being disabled instead.We no longer support link buttons being disabled or using disabled styles.
This change was introduced in pull request #3557: Remove deprecated
.govuk-button--disabledclass.Remove deprecated
.govuk-!-margin-staticand.govuk-!-padding-static classesWe've removed the override classes starting with
.govuk-!-margin-staticand.govuk-!-padding-static, which were deprecated in GOV.UK Frontend v4.3.1.Use the classes starting with
.govuk-!-static-marginand.govuk-!-static-paddinginstead.This change was introduced in pull request #3593: Remove deprecated static spacing classes.
Remove deprecated
.govuk-header__link--service-nameclassWe've removed the
.govuk-header__link--service-nameclass which we deprecated in GOV.UK Frontend v4.2.0.Use the .govuk-header__service-name class instead.
This change was introduced in pull request #3594: Remove deprecated
.govuk-header__link--service-nameclass.Remove deprecated
.govuk-header__navigation--no-service-nameclassWe've removed the
.govuk-header__navigation--no-service-nameclass which we deprecated in GOV.UK Frontend v4.3.0.We no longer supply a dedicated class for headers with navigation but no service name. If you still need this feature, you can reproduce it in your own code using the
govuk-spacingSass mixin.This change was introduced in pull request #3595: Remove deprecated
.govuk-header__navigation--no-service-nameclass.Suggested changes
Update the Pagination component's default
aria-labelWe’ve updated the default value of the Pagination component's
aria-labelto be more descriptive of the contents of the region. If you’re using the component's default label, you might wish to update it to the new default of 'Pagination'.You do not need to change anything if you're using the
govukPaginationNunjucks macro.This change was introduced in pull request #3899: Update default
aria-labelin Pagination component.Update the Exit this Page button's default text
We’ve updated the default text of the Exit this Page button. It now includes visually-hidden text to clarify that the button is a safety tool and not a generic method of leaving the current page.
If you are using the component's default text, you might wish to update it to the new value:
<span class="govuk-visually-hidden">Emergency</span> Exit this page.You do not need to change anything if you're using the
govukExitThisPageNunjucks macro.This change was introduced in pull request #3989: Update default Exit This Page button text.
Add the
relattribute to the Exit this Page button and secondary linkUpdate the Exit this Page button and secondary link to include a new attribute and value:
rel="nofollow noreferrer".Adding this attribute does 2 things:
This fixes a potential risk where the external website could detect that a user had visited from a GOV.UK page and play that information back to the user, which could risk a user's personal safety in some contexts.
You do not need to change the Exit this Page button if you're using the
govukExitThisPageNunjucks macro. You will still have to update the secondary link manually.This change was introduced in pull request #4054: Add
relattribute to the Exit this Page button. Thanks to @gregtyler for reporting this issue.Fixes
We’ve made fixes to GOV.UK Frontend in the following pull requests:
typedefault()values whennull,falseor""is providedThis discussion was created from the release GOV.UK Frontend v5.0.0-beta.0.
Beta Was this translation helpful? Give feedback.
All reactions