From 40392d55937141946b30c17ae23e747015deafc7 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Thu, 27 Mar 2025 15:50:49 +0000 Subject: [PATCH 1/4] Fix wrapping of date of birth inputs in filter --- app/assets/stylesheets/_filters.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/_filters.scss b/app/assets/stylesheets/_filters.scss index 8db744b380..e02b070621 100644 --- a/app/assets/stylesheets/_filters.scss +++ b/app/assets/stylesheets/_filters.scss @@ -39,6 +39,10 @@ margin-right: nhsuk-spacing(3); } + & .nhsuk-date-input__item:last-child { + margin-right: 0; + } + // Adjust sizing of checkbox and radio items & .nhsuk-checkboxes__item, & .nhsuk-radios__item { From 02acbf676e059c148f30d6ef9fb4a43259fc16f3 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Thu, 27 Mar 2025 16:04:30 +0000 Subject: [PATCH 2/4] Tweak icon button size and padding --- app/assets/stylesheets/_button.scss | 30 ++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/_button.scss b/app/assets/stylesheets/_button.scss index 906fa8fe32..b997318531 100644 --- a/app/assets/stylesheets/_button.scss +++ b/app/assets/stylesheets/_button.scss @@ -108,19 +108,39 @@ $button-shadow-size: 4px; .app-button--small { @include nhsuk-typography-responsive(16); - padding: nhsuk-spacing(1) 12px; + $padding-block: 6px; + $padding-block-icon: 3px; + $padding-inline: 12px; + $padding-inline-icon: 6px; + + padding: $padding-block $padding-inline; &.app-button--secondary, &.app-button--secondary-warning { // Adjust padding to account for removal of 2px bottom border - padding-bottom: #{nhsuk-spacing(1) + 1px}; - padding-top: #{nhsuk-spacing(1) + 1px}; + padding: #{$padding-block + 1px} $padding-inline; + + &.app-button--icon { + padding: #{$padding-block-icon + 1px} $padding-inline-icon; + } &:active { margin-bottom: -1px; // Revert padding to account for reintroduction of 2px bottom border - padding-bottom: nhsuk-spacing(1); - padding-top: nhsuk-spacing(1); + padding: $padding-block $padding-inline; } + + &.app-button--icon:active { + // Revert padding to account for reintroduction of 2px bottom border + padding: $padding-block-icon $padding-inline-icon; + } + } +} + +.app-button--icon { + .nhsuk-icon { + display: block; + height: 28px; + width: 28px; } } From 597486aaff932ec3943aa8b381d5958aeb9822b2 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Thu, 27 Mar 2025 15:58:29 +0000 Subject: [PATCH 3/4] Change markup for filter to ensure bottom margin renders correctly --- app/components/app_search_component.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/app_search_component.rb b/app/components/app_search_component.rb index e9a72856e9..af2d0d168e 100644 --- a/app/components/app_search_component.rb +++ b/app/components/app_search_component.rb @@ -2,10 +2,10 @@ class AppSearchComponent < ViewComponent::Base erb_template <<-ERB - <%= render AppCardComponent.new(filters: true) do |card| %> - <% card.with_heading { "Find children" } %> + <%= form_with model: form, url:, method: :get, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %> + <%= render AppCardComponent.new(filters: true) do |card| %> + <% card.with_heading { "Find children" } %> - <%= form_with model: form, url:, method: :get, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>