OEL-1367: Add suggestions to input submit form elements. Add the templates for...

OEL-1367: Add suggestions to input submit form elements. Add the templates for the submit buttons and remove the button patterns from the form templates.

modules/oe_whitelabel_search/oe_whitelabel_search.module

@@ -52,18 +52,24 @@ function oe_whitelabel_search_preprocess_facets_summary_item_list(array &$variab
 
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
+ *
+ * Add suggestions based on the block region where the form is placed.
  */
-function oe_whitelabel_search_theme_suggestions_form_alter(array &$suggestions, array $variables) {
-  if (!empty($variables['element']['#form_id'])) {
-    $suggestions[] = 'form__' . $variables['element']['#region'];
-    $suggestions[] = 'form__' . $variables['element']['#region'] . '__' . $variables['element']['#form_id'];
+function oe_whitelabel_search_theme_suggestions_form_alter(array &$suggestions, array $variables): void {
+  if (empty($variables['element']['#form_id'])) {
+    return;
   }
+
+  $suggestions[] = 'form__' . $variables['element']['#region'];
+  $suggestions[] = 'form__' . $variables['element']['#region'] . '__' . $variables['element']['#form_id'];
 }
 
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
+ *
+ * Specify a suggestion for the form_element based on the form id.
  */
-function oe_whitelabel_search_theme_suggestions_form_element_alter(array &$suggestions, array $variables) {
+function oe_whitelabel_search_theme_suggestions_form_element_alter(array &$suggestions, array $variables): void {
   if (empty($variables['element']['#form_id'])) {
     return;
   }
@@ -73,12 +79,13 @@ function oe_whitelabel_search_theme_suggestions_form_element_alter(array &$sugge
 
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
+ *
+ * Add region suggestions for the oe_whitelabel_search_form input field.
  */
-function oe_whitelabel_search_theme_suggestions_input_alter(array &$suggestions, array $variables) {
-
+function oe_whitelabel_search_theme_suggestions_input_alter(array &$suggestions, array $variables): void {
   if (!isset($variables['element']['#form_id']) || $variables['element']['#form_id'] !== 'oe_whitelabel_search_form') {
     return;
   }
-
-  $suggestions[] = 'input__textfield__' . $variables['element']['#region'] . '__' . $variables['element']['#form_id'];
+  $suggestions[] = $variables['theme_hook_original'] . '__' . $variables['element']['#region'];
+  $suggestions[] = $variables['theme_hook_original'] . '__' . $variables['element']['#region'] . '__' . $variables['element']['#form_id'];
 }

templates/overrides/search/form--header--oe-whitelabel-search-form.html.twig

 {#
 /**
  * @file
- * Template for the header search form element .
+ * Search form template for the header region.
  *
  * @see ./core/modules/system/templates/form.html.twig
  */
 #}
-{% set label %}
-  <span class="d-none d-lg-inline-block">{{ 'Search'|t }}</span>
-{% endset %}
-{% set submit_button = pattern('button', {
-  'variant': 'primary',
-  'icon': 'search',
-  'label': label,
-  'type': 'submit',
-  'icon_position': 'before',
-  'attributes': {
-    'id': 'submit',
-    'class': [
-      'bcl-search-form__submit',
-      'px-3',
-    ],
-  },
-})%}
 
-{% set submit = element.submit|merge({
-  '#markup': submit_button|render,
-})
-%}
 
 <div class="bg-lighter py-4 py-lg-3">
   <div class="container">
@@ -35,11 +14,7 @@
       <div class="col-12 col-lg-6 offset-lg-3">
         <form {{ attributes.addClass('bcl-search-form', 'submittable') }}>
           <div class="bcl-search-form__group">
-            {{ element.search_input }}
-            {{ submit }}
-            {{ element.form_build_id }}
-            {{ element.form_token }}
-            {{ element.form_id }}
+            {{ children }}
           </div>
         </form>
       </div>

templates/overrides/search/form--navigation-right--oe-whitelabel-search-form.html.twig

 {#
 /**
  * @file
- * Template for the navigation right search form element .
+ * Search form template for the navigation right region.
  *
  * @see ./core/modules/system/templates/form.html.twig
  */
 #}
-
+{# todo button drupal attributes #}
 {% set submit_button = pattern('button', {
   'variant': 'light',
   'icon': 'search',
@@ -28,9 +28,5 @@
 %}
 
 <form {{ attributes.addClass('d-flex', 'mt-3', 'mt-lg-0') }}>
-  {{ element.search_input }}
-  {{ submit }}
-  {{ element.form_build_id }}
-  {{ element.form_token }}
-  {{ element.form_id }}
+  {{ children }}
 </form>

templates/overrides/search/form-element--oe-whitelabel-search-form.html.twig

@@ -3,6 +3,8 @@
  * @file
  * Theme implementation for the search form element.
  *
+ * Remove form element div wrapper to keep just the search form fields.
+ *
  * @see ./core/modules/system/templates/form-element.html.twig
  */
 #}

templates/overrides/search/input--submit--header--oe-whitelabel-search-form.html.twig

+{#
+/**
+ * @file
+ * Theme for the header search input submit element.
+ *
+ * @see ./core/modules/system/templates/input.html.twig
+ */
+#}
+{% set label %}
+  <span class="d-none d-lg-inline-block">{{ 'Search'|t }}</span>
+{% endset %}
+
+{{ pattern('button', {
+  'variant': 'primary',
+  'icon': 'search',
+  'label': label,
+  'type': 'submit',
+  'icon_position': 'before',
+  'attributes': attributes
+    .setAttribute('id', 'submit')
+    .addClass([
+      'bcl-search-form__submit',
+      'px-3'
+    ])
+}) }}
+{{ children }}

templates/overrides/search/input--submit--navigation-right--oe-whitelabel-search-form.html.twig

+{#
+/**
+ * @file
+ * Theme for the navigation_right search input submit element.
+ *
+ * @see ./core/modules/system/templates/input.html.twig
+ */
+#}
+{{ pattern('button', {
+  'variant': 'light',
+  'icon': 'search',
+  'type': 'submit',
+  'icon_position': 'before',
+  'attributes': attributes
+    .setAttribute('id', 'submit')
+    .addClass([
+      'border-start-0',
+      'rounded-0',
+      'rounded-end',
+      'px-3',
+    ])
+}) }}
+{{ children }}