From 2c7ea6bf9810ed4daaa4a920ea65470468526d65 Mon Sep 17 00:00:00 2001
From: Francesco Sardara <francesco@tdgwebservices.com>
Date: Tue, 21 Nov 2023 16:19:52 +0100
Subject: [PATCH] OEL-2602: Fix spacing and size for search icon in header
 search block.

---
 .../tests/src/Kernel/SearchBlockTest.php      |  2 +-
 resources/sass/components/_forms.scss         |  8 +++++++
 ...eader--oe-whitelabel-search-form.html.twig | 22 ++++++++++++++-----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/modules/oe_whitelabel_search/tests/src/Kernel/SearchBlockTest.php b/modules/oe_whitelabel_search/tests/src/Kernel/SearchBlockTest.php
index 8a8dd84a2..5e948055c 100644
--- a/modules/oe_whitelabel_search/tests/src/Kernel/SearchBlockTest.php
+++ b/modules/oe_whitelabel_search/tests/src/Kernel/SearchBlockTest.php
@@ -185,7 +185,7 @@ public function testHeaderSearchBlockRendering(): void {
     $this->assertStringContainsString('btn', $button->attr('class'));
     $this->assertStringContainsString('btn-primary', $button->attr('class'));
     $this->assertStringContainsString('btn-md', $button->attr('class'));
-    $icon = $button->filter('.bi.icon--fluid');
+    $icon = $button->filter('.bi.icon--s.me-md-2-5.bcl-search-form__btn_icon');
     $this->assertCount(1, $icon);
     $label = $button->filter('span.d-none.d-lg-inline-block');
     $this->assertCount(1, $label);
diff --git a/resources/sass/components/_forms.scss b/resources/sass/components/_forms.scss
index e5bf6bf32..6fcfddce4 100644
--- a/resources/sass/components/_forms.scss
+++ b/resources/sass/components/_forms.scss
@@ -4,3 +4,11 @@
     border: 0;
   }
 }
+
+// Decrease icon size on search button.
+@media (min-width: 768px) {
+  .bcl-search-form__btn_icon {
+    width: 1rem;
+    height: 1rem;
+  }
+}
diff --git a/templates/overrides/search/input--submit--header--oe-whitelabel-search-form.html.twig b/templates/overrides/search/input--submit--header--oe-whitelabel-search-form.html.twig
index f2e9de362..3c5e25ff5 100644
--- a/templates/overrides/search/input--submit--header--oe-whitelabel-search-form.html.twig
+++ b/templates/overrides/search/input--submit--header--oe-whitelabel-search-form.html.twig
@@ -6,17 +6,27 @@
  * @see ./core/modules/system/templates/input.html.twig
  */
 #}
-{% if element['#value'] is not empty %}
-  {% set label %}
+{% set label %}
+  {{ pattern('icon', {
+    'name': 'search',
+    'path': bcl_icon_path,
+    'size': 's',
+    'attributes': create_attribute({
+      'class': [
+        'd-inline-block',
+        'me-md-2-5',
+        'bcl-search-form__btn_icon',
+      ]
+    })
+  }) }}
+  {% if element['#value'] is not empty %}
     <span class="d-none d-lg-inline-block">{{ element['#value']|t }}</span>
-  {% endset %}
-{% endif %}
+  {% endif %}
+{% endset %}
 {{ pattern('button', {
   'variant': 'primary',
-  'icon': 'search',
   'label': label,
   'type': 'submit',
-  'icon_position': 'before',
   'attributes': attributes
     .addClass([
       'bcl-search-form__submit',