OEL-2602: Fix spacing and size for search icon in header search block.

openeuropa · Nov 21, 2023 · 94d7597 · 94d7597
1 parent d004562
commit 94d7597
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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',