Fix disabled File upload hover state

[romaricpascal]

Avoid visual changes when hovering the <label>, which triggers the associated field's :hover state.

Moves the button's disabled state to the end of the component CSS so it can override any of the other states, and uses variables to reset the colour to the empty state colours (as a file input cannot be pre-filled).

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	121.7 KiB
dist/govuk-frontend-development.min.js	48.01 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	102.38 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	96.16 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.32 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	1.74 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	121.69 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	48 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	6.89 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	90.34 KiB	45.46 KiB
accordion.mjs	26.63 KiB	13.41 KiB
button.mjs	9.14 KiB	3.79 KiB
character-count.mjs	25.42 KiB	10.91 KiB
checkboxes.mjs	7.81 KiB	3.42 KiB
error-summary.mjs	11.04 KiB	4.55 KiB
exit-this-page.mjs	20.25 KiB	10.34 KiB
file-upload.mjs	21.08 KiB	11.05 KiB
header.mjs	6.46 KiB	3.22 KiB
notification-banner.mjs	9.4 KiB	3.71 KiB
password-input.mjs	18.21 KiB	8.34 KiB
radios.mjs	6.81 KiB	2.98 KiB
service-navigation.mjs	6.44 KiB	3.26 KiB
skip-link.mjs	6.4 KiB	2.76 KiB
tabs.mjs	12.04 KiB	6.67 KiB

View stats and visualisations on the review app

---

Action run for 2795465

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 5bef099c0..52af7c35a 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3480,11 +3480,6 @@ screen and (forced-colors:active) {
     box-shadow: inset 0 0 0 1px #fd0
 }
 
-.govuk-file-upload-button:disabled {
-    pointer-events: none;
-    opacity: .5
-}
-
 .govuk-file-upload-button--empty {
     border-style: dashed;
     background-color: #fff
@@ -3533,6 +3528,20 @@ screen and (forced-colors:active) {
     background-color: #dbdad9
 }
 
+.govuk-file-upload-button:disabled {
+    pointer-events: none;
+    opacity: .5;
+    background-color: #fff
+}
+
+.govuk-file-upload-button:disabled .govuk-file-upload-button__pseudo-button {
+    background-color: #f3f2f1
+}
+
+.govuk-file-upload-button:disabled .govuk-file-upload-button__status {
+    background-color: #bbd4ea
+}
+
 .govuk-footer {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

---

Action run for 2795465

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index 08c9705e5..c88c66c77 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -5,6 +5,9 @@
 @include govuk-exports("govuk/component/file-upload") {
   $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
+  $empty-button-background-colour: govuk-colour("white");
+  $empty-pseudo-button-background-colour: govuk-colour("light-grey");
+  $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -146,24 +149,19 @@
         box-shadow: inset 0 0 0 1px $govuk-focus-colour;
       }
     }
-
-    &:disabled {
-      pointer-events: none;
-      opacity: 0.5;
-    }
   }
 
   .govuk-file-upload-button--empty {
     border-style: dashed;
-    background-color: govuk-colour("white");
+    background-color: $empty-button-background-colour;
 
     .govuk-file-upload-button__pseudo-button {
-      background-color: govuk-colour("light-grey");
+      background-color: $empty-pseudo-button-background-colour;
     }
 
     .govuk-file-upload-button__status {
       color: govuk-shade(govuk-colour("blue"), 60%);
-      background-color: govuk-tint(govuk-colour("blue"), 70%);
+      background-color: $empty-status-background-colour;
     }
 
     &:hover,
@@ -200,6 +198,21 @@
       background-color: govuk-shade(govuk-colour("light-grey"), 10%);
     }
   }
+
+  .govuk-file-upload-button:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      background-color: $empty-status-background-colour;
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */

---

Action run for 2795465

[patrickpatrickpatrick]

That fixes the issue, looks good