PLANET-7157 Harmonise search input clear buttons

The old clear search button from the search page looks weird and not consistent with the navbar one
greenpeace · May 16, 2023 · 892ddca · 892ddca
1 parent a9c66d8
commit 892ddca
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/assets/src/scss/layout/navbar/_search.scss b/assets/src/scss/layout/navbar/_search.scss
@@ -146,7 +146,7 @@
 }
 
 .nav-search-clear {
-  _-- {
+  --clear--search-- {
     background-color: $black;
   }
   border: none;

diff --git a/assets/src/scss/new-identity/style.scss b/assets/src/scss/new-identity/style.scss
@@ -96,7 +96,7 @@
   --nav-link--hover--color: var(--grey-900);
   --nav-link--active--color: var(--grey-900);
   --nav-link--visited--color: var(--grey-900);
-  --nav-search-clear--background-color: var(--grey-900);
+  --clear--search--background-color: var(--grey-900);
   --top-navigation--separation: 1px solid var(--grey-300);
 
   // TODO: Review these fallback variables after we'll merge the new identity colors

diff --git a/assets/src/scss/pages/search/_search-bar.scss b/assets/src/scss/pages/search/_search-bar.scss
@@ -15,13 +15,51 @@
     line-height: 2.75;
     appearance: none;
 
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+
+    // Hack to hide the input:-internal-autofill-selected style from webkit
+    &:-webkit-autofill,
+    &:-webkit-autofill:focus {
+      transition: background-color 600000s 0s, color 600000s 0s;
+    }
+
+    &:placeholder-shown ~ button.clear-search {
+      visibility: hidden;
+    }
+
     @include large-and-up {
       font-size: 1.125rem;
       height: 3em;
       line-height: 3;
     }
   }
 
+  .search-input-container {
+    display: flex;
+    position: relative;
+  }
+
+  .clear-search {
+    --clear--search-- {
+      background-color: $black;
+    }
+    mask: url("../../images/cross-circle.svg") 50% 50%/24px 24px no-repeat;
+    width: 24px;
+    position: absolute;
+    right: $sp-3;
+    top: 10px;
+    height: 24px;
+
+    @include large-and-up {
+      top: $sp-2;
+    }
+  }
+
   .search-btn {
     font-size: $font-size-sm;
     line-height: 2.75;

diff --git a/templates/search.twig b/templates/search.twig
@@ -30,9 +30,17 @@
                     <div class="search-bar">
                         <form id="search_form_inner" role="search" class="form" action="{{ data_nav_bar.home_url }}">
                             <div class="row">
-                                <div class="col-md-9">
-                                    <input type="search" class="form-control mb-2 mb-sm-0" placeholder="{{ search_label }}" value="{{ search_query|e('wp_kses_post')|raw }}" name="s" aria-label="Search">
+                                <div class="col-md-9 search-input-container">
+                                    <input type="search" id="search-page-input" class="form-control mb-2 mb-sm-0" placeholder="{{ search_label }}" value="{{ search_query|e('wp_kses_post')|raw }}" name="s" aria-label="Search">
                                     <input type="hidden" name="orderby" value="{{ selected_sort ?? default_sort }}" />
+                                    <button
+                                        class="clear-search"
+                                        aria-label="{{ __( 'Clear search', 'planet4-master-theme' ) }}"
+                                        type="button"
+                                        onclick="document.getElementById('search-page-input').value=null;"
+                                    >
+                                        <span class="visually-hidden">{{ __( 'Clear search', 'planet4-master-theme' ) }}</span>
+                                    </button>
                                 </div>
                                 <div class="col-md-3">
                                     <button