From c921d75b7f8709b25483741324f3f09f3f0e8fa7 Mon Sep 17 00:00:00 2001
From: Christian Sutter <git@doublesignal.com>
Date: Fri, 20 Sep 2024 14:03:34 +0000
Subject: [PATCH] Filter panel: Force checkbox/radio background

GOV.UK Frontend radio and checkboxes are rendered with a transparent
background, which makes them look wrong on this component's grey
background. This is intentional in GOV.UK Frontend and unlikely to
change (see https://github.com/alphagov/govuk-frontend/issues/1625).
---
 .../stylesheets/components/_filter-panel.scss | 11 ++++++
 app/views/components/docs/filter_panel.yml    | 38 +++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/app/assets/stylesheets/components/_filter-panel.scss b/app/assets/stylesheets/components/_filter-panel.scss
index 9b4f7ca3a..37d7300e6 100644
--- a/app/assets/stylesheets/components/_filter-panel.scss
+++ b/app/assets/stylesheets/components/_filter-panel.scss
@@ -73,3 +73,14 @@
 
   @include govuk-font(19);
 }
+
+// GOV.UK Frontend radio and checkboxes are rendered with a transparent background, which makes them
+// look wrong on this component's grey background. This is intentional in GOV.UK Frontend and
+// unlikely to change (see https://github.com/alphagov/govuk-frontend/issues/1625).
+.app-c-filter-panel__content {
+  .govuk-checkboxes__label, .govuk-radios__label {
+    &::before {
+        background-color: govuk-colour('white');
+    }
+  }
+}
diff --git a/app/views/components/docs/filter_panel.yml b/app/views/components/docs/filter_panel.yml
index 61670bacb..25902cdab 100644
--- a/app/views/components/docs/filter_panel.yml
+++ b/app/views/components/docs/filter_panel.yml
@@ -60,6 +60,44 @@ examples:
         } do %>
           <span>filter section content</span>
         <% end %>
+  with_radios_and_checkboxes:
+    description: |
+      Overrides default styles of GOV.UK Frontend radios and checkboxes to ensure they have a white
+      background despite being inside a grey panel.
+    data:
+      button_text: Filter with radios and checkboxes
+      open: true
+      block: |
+        <div class="govuk-!-padding-4">
+          <%= render "govuk_publishing_components/components/radio", {
+            heading: "Radios",
+            name: "radio",
+            small: true,
+            items: [
+              { value: "1", text: "Radio 1" },
+              { value: "2", text: "Radio 2", checked: true }
+            ]
+          } %>
+          <%= render "govuk_publishing_components/components/checkboxes", {
+            name: "checkbox",
+            heading: "Checkboxes",
+            small: true,
+            items: [
+              {
+                label: "Red",
+                value: "red"
+              },
+              {
+                label: "Green",
+                value: "green"
+              },
+              {
+                label: "Blue",
+                value: "blue"
+              }
+            ]
+          } %>
+        </div>
   with_margin_bottom:
     description: |
       Allows the spacing at the bottom of the component to be adjusted.