Filter panel UI tweaks

app/assets/stylesheets/components/_filter-panel.scss

@@ -1,10 +1,25 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "mixins/chevron";
 
+.app-c-filter-panel {
+  padding-bottom: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
+  border-bottom: 1px solid $govuk-border-colour;
+}
+
 .app-c-filter-panel__content {
   background-color:  govuk-colour("light-grey");
   padding: 0 govuk-spacing(3);
   margin-top: govuk-spacing(2);
+
+  // 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).
+  .govuk-checkboxes__label, .govuk-radios__label {
+    &::before {
+        background-color: govuk-colour('white');
+    }
+  }
 }
 
 .app-c-filter-panel__header {
@@ -48,7 +63,7 @@
   }
 
   &::before {
-    margin: 0 govuk-spacing(2) govuk-spacing(1) 0;
+    margin: 0 govuk-spacing(3) govuk-spacing(1) 0;
   }
 }
 

app/views/components/_filter_panel.html.erb

@@ -24,9 +24,7 @@
       id: button_id,
       class: "app-c-filter-panel__button govuk-link",
       aria: { expanded: "false", controls: panel_content_id }
-    ) do %>
-      <%= button_text %>
-    <% end %>
+    ) { button_text } %>
 
     <% if result_text.present? %>
       <%= content_tag("h2", class: "app-c-filter-panel__count") do %>

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.

app/views/finders/show_all_content_finder.html.erb

@@ -47,7 +47,6 @@
         <%= render "components/filter_panel", {
           button_text: "Filter and sort",
           result_text: result_set_presenter.displayed_total,
-          margin_bottom: 2,
         } do %>
           <%= render "components/filter_section", {
             open: true,
@@ -79,11 +78,12 @@
 
         <% if result_set_presenter.total_count.positive? %>
           <%= render "govuk_publishing_components/components/document_list", {
+            remove_top_border_from_first_child: true,
             disable_ga4: true,
             items: result_set_presenter.search_results_content[:document_list_component_data],
           } %>
         <% else %>
-          <div class='no-results govuk-!-font-size-19'>
+          <div class='no-results govuk-!-font-size-19 govuk-!-margin-top-4'>
             <p class='govuk-body govuk-!-font-weight-bold'>There are no matching results.</p>
             <p class='govuk-body'>Improve your search results by:</p>
             <ul class="govuk-list govuk-list--bullet">