Upgrade to GovUK Design System v6 by scruti · Pull Request #8692 · DFE-Digital/teaching-vacancies

scruti · 2026-04-01T15:31:27Z

Trello card URL

https://trello.com/c/cX3D9EUE

Changes in this PR:

Upgrades our service to GovUK Design System v6.

GovUK Frontend Upgrades:
- Resolve breaking changes with font sizes.
- Resolve breaking changes with the removal of the "rebrand" folder/references.
- Resolve breaking changes with tag colour replacements.
- Replace deprecated colours.
- Replace deprecated functional CSS classes with govuk-functional-colour calls.
- Replace deprecated CSS variables with $govuk-brand-colour.
- Replace removed govuk-tint and govuk-shadow with the closest new colour palette variants.
Upgraded MoJ frontend library to v9
- Adds compatibility with GovUK Design system v6
Upgraded GovUK Components to v6
- Adds compatibility with GovUK Design system v6
- Aligned the main page hero search section with the new GovUK brand colour.
- Fixed accessibility contrast issue between hero section background and search button colours.
- Mitigated the removal of navigational elements in the GovUK Header component by manually adding the navigational links we need.

Before

Hero search

Header navigation

On mobile

Expanded on mobile

Footer links in black. No colour change when visited

After

Hero search

Header navigation

On mobile

Footer links in blue. Colour changes when visited

This aligns with the GovUK Design System page footer.

I originally thought of some interface change on the footer component, and we needed to adapt the links to keep the previous look/behaviour. But it seems the footer in GovUK Design System also moved to this look:

Checklists:

Data & Schema Changes

If this PR modifies data structures or validations, check the following:

Adds/removes model validations
Adds/removes database fields
Modifies Vacancy enumerables (phases, working patterns, job roles, key stages, etc.)

If any of the above options has changed then the author must check/resolve all of the following...

Integration Impact

Does this change affect any of these integrations?

DfE Analytics platform
Legacy imports mappings
DWP Find a Job export mappings
Publisher ATS API (may require mapping updates or API versioning)

User Experience & Data Integrity

Could this change impact:

Existing subscription alerts (will legacy subscription search filters break?)
Legacy vacancy copying (will copied vacancies fail new validations?)
In-progress drafts for Vacancies or Job Applications

Copilot

Pull request overview

Upgrades the application’s GOV.UK UI stack to GovUK Design System v6 (GovUK Frontend v6, MoJ Frontend v9, and govuk-components v6) and updates templates/styles to match the new branding and deprecated API removals.

Changes:

Bump JS and Ruby GOV.UK-related dependencies to versions compatible with GovUK Design System v6.
Update layouts (notably header and template classes) to accommodate removed “rebrand” assets and header navigation API changes.
Replace deprecated GOV.UK Sass variables/functions/classes with govuk-functional-colour(...) and new palette variants.

Reviewed changes

Copilot reviewed 51 out of 53 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
yarn.lock	Updates resolved JS dependency versions/checksums for GOV.UK/MoJ frontend upgrades.
package.json	Bumps `govuk-frontend` to v6 and `@ministryofjustice/frontend` to v9.
Gemfile.lock	Bumps `govuk-components` to v6 (and its `view_component` constraint).
Gemfile	Pins `govuk-components` to v6.0.0.
app/views/layouts/subscription_campaign.html.slim	Removes the `govuk-template--rebranded` class from the `<html>` element.
app/views/layouts/application.html.slim	Removes the `govuk-template--rebranded` class from the `<html>` element.
app/views/layouts/application_supportal.html.slim	Removes rebrand class and replaces header navigation rendering with custom markup.
app/views/layouts/application_intermediary.html.slim	Removes the `govuk-template--rebranded` class from the `<html>` element.
app/views/layouts/_header.html.slim	Replaces `govuk_header` navigation DSL usage with manual GOV.UK header navigation markup.
app/views/layouts/_head_meta.html.slim	Updates `theme-color` meta to the new brand colour.
app/views/layouts/_head_links.html.slim	Updates favicon asset paths away from `/rebrand/...` and adjusts mask icon colour.
app/views/home/_search.html.slim	Updates the search submit button styling to improve contrast with updated hero colours.
app/helpers/job_applications_helper.rb	Updates GOV.UK tag colour mappings to v6-compatible names.
app/components/dashboard_component/dashboard_component.html.slim	Updates tag colour class and tweaks typography for external vacancy notices.
app/assets/stylesheets/secondary-navigation.scss	Replaces deprecated Sass colour variables with `govuk-functional-colour(...)`.
app/assets/stylesheets/layouts/vacancies/index.scss	Replaces deprecated light-grey with new tint palette background colour.
app/assets/stylesheets/layouts/vacancies/campaign_landing_page.scss	Replaces deprecated light-grey with new tint palette background colour.
app/assets/stylesheets/layouts/support_users/feedbacks.scss	Updates hover background colour to new tint palette.
app/assets/stylesheets/layouts/subscriptions/new.scss	Updates campaign header background colour to new tint palette.
app/assets/stylesheets/layouts/shared/_search-results.scss	Replaces deprecated border colour variable with functional colour token.
app/assets/stylesheets/layouts/pages/list-school-job.scss	Updates brand/focus/link colour usage to functional colour tokens and new palette tints.
app/assets/stylesheets/layouts/home/_search.scss	Updates hero/search background to use functional brand colour.
app/assets/stylesheets/layouts/hero.scss	Updates hero background to new tint palette.
app/assets/stylesheets/layouts/_help-guide.scss	Updates borders/backgrounds to functional colours and new tint palette.
app/assets/stylesheets/layouts/_header.scss	Updates header border to brand token; adds custom nav list/link styling; updates sub-nav background tint.
app/assets/stylesheets/js_components/panel.scss	Updates panel background/border/focus colours to functional tokens/new palette variants.
app/assets/stylesheets/js_components/autocomplete.scss	Updates border/text colours to functional colour tokens.
app/assets/stylesheets/components/timeline.scss	Updates timeline brand colour usage to functional brand token.
app/assets/stylesheets/components/tabs.scss	Updates borders/link/focus colours to functional tokens; replaces removed light-blue with new palette tint.
app/assets/stylesheets/components/steps.scss	Updates borders/backgrounds to functional colours and new tint palette.
app/assets/stylesheets/components/sort.scss	Updates borders/link visited colour to functional tokens.
app/assets/stylesheets/components/sidebar.scss	Updates borders/shadows/focus outlines to functional colours and new palette variants.
app/assets/stylesheets/components/sidebar-info-box.scss	Updates info box background to new tint palette.
app/assets/stylesheets/components/searchable_collection.scss	Updates border colour to functional token.
app/assets/stylesheets/components/scheduled_maintenance_banner.scss	Updates brand colour usage to functional token; replaces removed shading helper with palette variant.
app/assets/stylesheets/components/notification.scss	Updates border/timestamp colours to functional tokens.
app/assets/stylesheets/components/messages.scss	Updates message background tints and removes trailing whitespace in stylesheet formatting.
app/assets/stylesheets/components/map.scss	Updates borders/focus outlines and cluster colours to functional tokens/new palette variants.
app/assets/stylesheets/components/filters.scss	Updates background, borders, and focus outlines to functional tokens/new palette variants.
app/assets/stylesheets/components/error.scss	Updates error/focus colours to functional tokens.
app/assets/stylesheets/components/environment_banner.scss	Replaces removed tint/shade helpers with palette variants and refactors the striped banner mixin.
app/assets/stylesheets/components/empty_section.scss	Replaces deprecated text/border/background tokens with functional colours and new tint palette.
app/assets/stylesheets/components/editor.scss	Updates focus/selected states to use functional focus colours.
app/assets/stylesheets/components/detail.scss	Updates borders/backgrounds to new tint palette and functional border token.
app/assets/stylesheets/components/dashboard.scss	Updates secondary text colour to functional token.
app/assets/stylesheets/components/cookies_banner.scss	Updates cookies banner background to new tint palette.
app/assets/stylesheets/components/card.scss	Updates borders/secondary text to functional tokens.
app/assets/stylesheets/components/banner_button.scss	Updates link/focus colours to functional tokens.
app/assets/stylesheets/base/govuk/components/_inset-text.scss	Updates inset blue variant to new palette tint.
app/assets/stylesheets/base/govuk/components/_error-summary.scss	Updates summary border colours to functional tokens.
app/assets/stylesheets/base/_utilities.scss	Replaces deprecated GOV.UK Sass variables with functional tokens and new tint variants.
app/assets/stylesheets/base/_form.scss	Updates error border colour to functional error token.
app/assets/stylesheets/actiontext.scss	Updates focus styling to functional focus colours.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

github-actions · 2026-04-02T08:10:59Z

Review app https://teaching-vacancies-review-pr-8692.test.teacherservices.cloud was successfully deleted

Bumps [govuk-frontend](https://github.com/alphagov/govuk-frontend/tree/HEAD/packages/govuk-frontend) from 5.14.0 to 6.1.0. - [Release notes](https://github.com/alphagov/govuk-frontend/releases) - [Changelog](https://github.com/alphagov/govuk-frontend/blob/main/CHANGELOG.md) - [Commits](https://github.com/alphagov/govuk-frontend/commits/v6.1.0/packages/govuk-frontend) --- updated-dependencies: - dependency-name: govuk-frontend dependency-version: 6.1.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>

These colours have been deprecated. So they need to be replaced for the new GovUK Frontend colour palette equivalents. Followed conversion from pre-brand colours: - https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss#L115

"rebrand" is now the default. The rebrand folder has been removed, and there is no longer need to add the "rebranded" css class.

This is no longer available. The smallest one is govuk-body-s. Replaced it. https://design-system.service.gov.uk/styles/type-scale/

Turquoise is no longer available as a colour option: https://design-system.service.gov.uk/components/tag/

Use the new govuk-functional-colour calls instead.

The colours have been renamed.

To use the new functions correctly to reproduce the old stripped banners as close as possible.

So its components support GovUK Design System v6

So it supports GovUK Design System v6

GovUK Frontend & Components no longer provide helpers to add navigation elements within the header. So we had to manually add them. The header nav elements collapse into a toggle menu has also been removed from the header component.

The colour of our main page search hero section was not in-line with the GovUK Brand colour. Changed it to use the brand colour, and used the chance to check the accessibility contrast requirements between the background, the text content and the inner Search button. The green button on dark blue background was violating the contrast accessibility minimum score (also before this upgrade), so followed the govuk guidance for buttons over dark backgrounds to resolve this.

Keep this behaviour from the original navigation helper.

Copilot AI review requested due to automatic review settings April 1, 2026 15:31

Copilot started reviewing on behalf of scruti April 1, 2026 15:32 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

Comment thread app/views/home/_search.html.slim Outdated

Comment thread app/views/layouts/_header.html.slim

Comment thread app/assets/stylesheets/components/environment_banner.scss

scruti added dependencies deploy labels Apr 1, 2026

scruti had a problem deploying to review April 1, 2026 15:49 — with GitHub Actions Failure

scruti marked this pull request as draft April 1, 2026 16:03

scruti had a problem deploying to review April 1, 2026 16:20 — with GitHub Actions Failure

scruti removed the deploy label Apr 2, 2026

scruti temporarily deployed to review April 2, 2026 08:09 — with GitHub Actions Inactive

scruti added the deploy label Apr 2, 2026

scruti temporarily deployed to review April 2, 2026 08:14 — with GitHub Actions Inactive

scruti marked this pull request as ready for review April 2, 2026 08:44

This was referenced Apr 2, 2026

Bump @ministryofjustice/frontend from 8.0.1 to 9.0.0 #8647

Closed

Bump govuk-frontend from 5.14.0 to 6.1.0 #8645

Closed

Bump govuk-components from 5.13.1 to 6.0.0 #8584

Closed

starswan approved these changes Apr 7, 2026

View reviewed changes

dependabot bot and others added 12 commits April 7, 2026 09:45

Remove references to "rebranded"

6f3e7d5

"rebrand" is now the default. The rebrand folder has been removed, and there is no longer need to add the "rebranded" css class.

Remove govuk-body-xs CSS class

ec32481

This is no longer available. The smallest one is govuk-body-s. Replaced it. https://design-system.service.gov.uk/styles/type-scale/

Replace govuk-tag--turquoise with teal

ce5ee1f

Turquoise is no longer available as a colour option: https://design-system.service.gov.uk/components/tag/

Use v6 Blue as primary brand colour

ed4e792

Replace deprecated CSS variable $govuk-brand-colour

07cb892

Replace deprecated functional colour CSS classes

510f2e0

Use the new govuk-functional-colour calls instead.

Fix tag colours with new versions

581d4ea

The colours have been renamed.

Fix stripped env banners

bf46619

To use the new functions correctly to reproduce the old stripped banners as close as possible.

Upgrade MoJ Frontend to V9

0563dbd

So its components support GovUK Design System v6

Upgrade GovUK Components to v6

1d1e50f

So it supports GovUK Design System v6

scruti added 5 commits April 7, 2026 08:48

Adapt header to removal of navigation elements

dba812f

GovUK Frontend & Components no longer provide helpers to add navigation elements within the header. So we had to manually add them. The header nav elements collapse into a toggle menu has also been removed from the header component.

Remove redundant divs from slim templates

a243e9e

Remove trailing space

d61e6ac

Bring active nagivation item highlighting

1b7a8de

Keep this behaviour from the original navigation helper.

scruti force-pushed the upgrade-to-govuk-v6 branch from 7c55c0f to 1b7a8de Compare April 7, 2026 08:49

scruti temporarily deployed to review April 7, 2026 08:52 — with GitHub Actions Inactive

SASS lint fixes

0292177

scruti temporarily deployed to review April 7, 2026 09:07 — with GitHub Actions Inactive

scruti merged commit 0088448 into main Apr 7, 2026
16 checks passed

scruti deleted the upgrade-to-govuk-v6 branch April 7, 2026 10:26

scruti temporarily deployed to review April 7, 2026 10:26 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to GovUK Design System v6#8692

Upgrade to GovUK Design System v6#8692
scruti merged 18 commits intomainfrom
upgrade-to-govuk-v6

scruti commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

scruti commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Trello card URL

Changes in this PR:

Before

Hero search

Header navigation

On mobile

Expanded on mobile

Footer links in black. No colour change when visited

After

Hero search

Header navigation

On mobile

Footer links in blue. Colour changes when visited

This aligns with the GovUK Design System page footer.

Checklists:

Data & Schema Changes

Integration Impact

User Experience & Data Integrity

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

scruti commented Apr 1, 2026 •

edited

Loading

github-actions bot commented Apr 2, 2026 •

edited

Loading