From 892ddcac22b2ace8460fe3f1236d4c990dae32ab Mon Sep 17 00:00:00 2001
From: Maud Leray <maudleray035@gmail.com>
Date: Thu, 11 May 2023 14:05:19 +0200
Subject: [PATCH] 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
---
 assets/src/scss/layout/navbar/_search.scss    |  2 +-
 assets/src/scss/new-identity/style.scss       |  2 +-
 assets/src/scss/pages/search/_search-bar.scss | 38 +++++++++++++++++++
 templates/search.twig                         | 12 +++++-
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/assets/src/scss/layout/navbar/_search.scss b/assets/src/scss/layout/navbar/_search.scss
index e96ce12971..8a78405b2d 100644
--- 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
index ba328545e0..bf18c8ccbb 100644
--- 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
index aadc3aa9d1..3ef6b6c09f 100644
--- a/assets/src/scss/pages/search/_search-bar.scss
+++ b/assets/src/scss/pages/search/_search-bar.scss
@@ -15,6 +15,23 @@
     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;
@@ -22,6 +39,27 @@
     }
   }
 
+  .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
index 066473ce92..9e1235cc6f 100644
--- 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