Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LTD-4702 Upgrade lite-frontend to use govuk-frontend v4.8.0 #1799

Merged
merged 11 commits into from
Feb 26, 2024
Merged

LTD-4702 Upgrade lite-frontend to use govuk-frontend v4.8.0 #1799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0a84367
Update govuk-frontend to 3.14.0
hnryjmes Feb 19, 2024
849eb53
Update govuk-frontend to 4.0.0
hnryjmes Feb 19, 2024
2f8ead4
Update references to govuk-border-width-form-element-error
hnryjmes Feb 19, 2024
cce77d3
Update govuk-frontend to 4.1.0
hnryjmes Feb 19, 2024
868316c
Update govuk-frontend to 4.2.0
hnryjmes Feb 19, 2024
aa40157
Update govuk-frontend to 4.3.0
hnryjmes Feb 19, 2024
384b499
Update govuk-frontend to 4.4.0
hnryjmes Feb 19, 2024
a616082
Update govuk-frontend to 4.5.0
hnryjmes Feb 21, 2024
0410cd9
Update govuk-frontend to 4.6.0
hnryjmes Feb 21, 2024
727b422
Update govuk-frontend to 4.7.0
hnryjmes Feb 21, 2024
e416859
Update govuk-frontend to 4.8.0
hnryjmes Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/assets/styles/components/_case-note.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}

.lite-case-note__controls {
border: $govuk-border-width-form-element-error solid $govuk-error-colour;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm presuming all of these border-width things are going because this variable doesn't exist anymore but what is setting the border width now instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good question. this variable was overriding the border width but now there is no override. this change is explained here: https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.0

Remove deprecated $govuk-border-width-form-element-error variable
In GOV.UK Frontend v3.8.0, we made the border width of form elements in their error state the same as for form elements in their normal state and deprecated the $govuk-border-width-form-element-error variable.

Before, an element's border got thicker to show the element was in an error state. However, elements in their focused state also have a thicker border. As a result, when users focused an element in an error state, the only visible border-change was from red to black. Not all users could perceive this change. So, we reduced the element border's width, to make sure its thickness changes when users focus.

We've now removed $govuk-border-width-form-element-error completely.

If you’re referencing $govuk-border-width-form-element-error in your own Sass, you must remove it. If you're also defining your own error state, you only need to change the border colour.

You should avoid overriding the border width. For example, replace border: $govuk-border-width-form-element-error solid $govuk-error-colour; with border-color: $govuk-error-colour;.

You should also remove any override of $govuk-border-width-form-element-error from your Sass. This override no longer does anything.

This change was introduced in alphagov/govuk-frontend#1963.

border-color: $govuk-error-colour;
border-top-width: 0;
padding: govuk-spacing(3) - 2px;
padding-top: govuk-spacing(3);
Expand Down
4 changes: 0 additions & 4 deletions core/assets/styles/overrides/_checkboxes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@
// Add an error state to checkboxes as GOV.UK Frontend lacks it
color: $govuk-error-colour;

&::before {
border-width: $govuk-border-width-form-element-error;
}

&::after {
color: govuk-colour("black");
}
Expand Down
2 changes: 1 addition & 1 deletion core/assets/styles/overrides/_form-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.govuk-form-group--error {
.lite-autocomplete__input {
border: $govuk-border-width-form-element-error solid $govuk-error-colour;
border-color: $govuk-error-colour;

&:focus {
border-color: $govuk-input-border-colour;
Expand Down
4 changes: 0 additions & 4 deletions core/assets/styles/overrides/_radios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
// Add an error state to radio buttons
color: $govuk-error-colour;

&::before {
border-width: $govuk-border-width-form-element-error;
}

&::after {
color: govuk-colour("black");
}
Expand Down
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"eslint-plugin-jest": "^27.2.3",
"events": "^3.3.0",
"fetch-polyfill": "^0.8.2",
"govuk-frontend": "^3.13.0",
"govuk-frontend": "^4.8.0",
"highlight-within-textarea": "^2.0.5",
"jquery": "^3.6.0",
"lightpick": "^1.6.2",
Expand Down
Loading