Issue #2486409 by emma.maria, _KurT_, rachel_norfolk, Manjit.Singh,...

Issue #2486409 by emma.maria, _KurT_, rachel_norfolk, Manjit.Singh, andile2012, LewisNyman, hussainweb, BrightBold, ByronNorris, John Cook, lauriii: Clean up the "Search" component in Bartik

core/themes/bartik/bartik.libraries.yml

@@ -32,7 +32,7 @@ global-styling:
       css/components/pager.css: {}
       css/components/panel.css: {}
       css/components/primary-menu.css: {}
-      css/components/search.css: {}
+      css/components/search-form.css: {}
       css/components/search-results.css: {}
       css/components/secondary-menu.css: {}
       css/components/shortcut.css: {}

core/themes/bartik/bartik.theme

@@ -101,3 +101,25 @@ function bartik_preprocess_block(&$variables) {
 function bartik_preprocess_menu(&$variables) {
   $variables['attributes']['class'][] = 'clearfix';
 }
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for form templates.
+ */
+function bartik_theme_suggestions_form_alter(array &$suggestions, array $variables) {
+  if ($variables['element']['#form_id'] == 'search_block_form') {
+    $suggestions[] = 'form__search_block_form';
+  }
+}
+
+/**
+ * Implements hook_form_alter() to add classes to the search form.
+ */
+function bartik_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
+  if (in_array($form_id, ['search_block_form', 'search_form'])) {
+    $key = ($form_id == 'search_block_form') ? 'actions' : 'basic';
+    if (!isset($form[$key]['submit']['#attributes'])) {
+      $form[$key]['submit']['#attributes'] = new Attribute();
+    }
+    $form[$key]['submit']['#attributes']->addClass('search-form__submit');
+  }
+}

core/themes/bartik/css/components/search.css → core/themes/bartik/css/components/search-form.css

-/* --------------- Search Form ---------------- */
+/**
+ * @file
+ * The visual styles for Bartik's search form(s).
+ */
 
-#block-search-form {
-  padding-bottom: 7px;
+.search-form {
+  font-size: 0.875rem;
 }
-#block-search-form .content {
-  margin-top: 0;
-}
-#search-form input[type="search"],
-#block-search-form input[type="search"] {
-  box-sizing: border-box;
-  padding: 4px;
-  -webkit-appearance: textfield;
-}
-#search-form input[type="search"]::-webkit-search-decoration,
-#block-search-form input[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-#search-form input#edit-keys,
-#block-search-form .form-item-search-block-form input {
+.search-form .form-search {
   float: left; /* LTR */
-  font-size: 1em;
   margin-right: 5px; /* LTR */
+  padding: 4px;
 }
-[dir="rtl"] #search-form input#edit-keys,
-[dir="rtl"] #block-search-form .form-item-search-block-form input {
+[dir="rtl"] .search-form .form-search {
   float: right;
   margin-left: 5px;
   margin-right: 0;
 }
-#search-block-form input.form-submit,
-#search-form input.form-submit {
+.button.search-form__submit,
+.search-form__submit {
+  background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center;
+  cursor: pointer;
+  height: 26px;
   margin-left: 0;
   margin-right: 0;
-  height: 25px;
-  width: 34px;
+  overflow: hidden;
   padding: 0;
-  cursor: pointer;
   text-indent: -9999px;
-  border-color: #e4e4e4 #d2d2d2 #b4b4b4;
-  background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center;
-  overflow: hidden;
+  direction: ltr;
+  width: 34px;
 }
-#search-block-form input.form-submit:hover,
-#search-block-form input.form-submit:focus,
-#search-form input.form-submit:hover,
-#search-form input.form-submit:focus {
+.button.search-form__submit:hover,
+.search-form__submit:hover,
+.button.search-form__submit:focus,
+.search-form__submit:focus {
   background: #dedede url(../../../../misc/icons/424242/loupe.svg) no-repeat center;
 }
-#search-form .form-item-keys label {
+.search-form .form-item-keys label {
   display: block;
 }

core/themes/bartik/templates/form--search-block-form.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for a 'form' element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The child elements of the form.
+ *
+ * @see template_preprocess_form()
+ */
+#}
+<form{{ attributes.addClass('search-form', 'search-block-form') }}>
+  {{ children }}
+</form>