From b8b6dde01f2e98236d06ff900f18d040a0d1f911 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Mon, 8 Feb 2021 19:19:33 +0100
Subject: [PATCH] fix: improve positioning of the X button in the dashboard
 search input (#1512)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: adjust css to place X button correctly

* fix: update snapshots

Co-authored-by: Jan Henrik Øverland <jan@dhis2.org>
---
 src/components/ControlBar/Filter.js           |  16 +-
 .../__snapshots__/DashboardsBar.spec.js.snap  | 186 ++++++++++--------
 .../__snapshots__/Filter.spec.js.snap         | 106 +++++-----
 .../ControlBar/styles/ClearButton.module.css  |   6 +
 .../ControlBar/styles/Filter.module.css       |  26 ++-
 5 files changed, 204 insertions(+), 136 deletions(-)

diff --git a/src/components/ControlBar/Filter.js b/src/components/ControlBar/Filter.js
index 0740e6faf..f42db7f82 100644
--- a/src/components/ControlBar/Filter.js
+++ b/src/components/ControlBar/Filter.js
@@ -81,10 +81,12 @@ export const FilterUnconnected = ({
             onFocus={onFocus}
             onBlur={onBlur}
         >
-            <SearchIcon
-                className={classes.searchIcon}
-                small={isSmallScreen(width) && isMaxHeight}
-            />
+            <div className={classes.searchIconContainer}>
+                <SearchIcon
+                    className={classes.searchIcon}
+                    small={isSmallScreen(width) && isMaxHeight}
+                />
+            </div>
             <input
                 className={classes.input}
                 type="text"
@@ -95,7 +97,11 @@ export const FilterUnconnected = ({
                 data-test="search-dashboard-input"
                 ref={onFocusInput}
             />
-            {filterText && <ClearButton onClear={clearDashboardsFilter} />}
+            {filterText && (
+                <div className={classes.clearButtonContainer}>
+                    <ClearButton onClear={clearDashboardsFilter} />
+                </div>
+            )}
         </div>
     )
 }
diff --git a/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
index b3e1a3733..f4aebeb4d 100644
--- a/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
+++ b/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
@@ -36,21 +36,25 @@ exports[`clicking "Show more" maximizes dashboards bar height 1`] = `
           <div
             class="container"
           >
-            <svg
-              class="searchIcon"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="searchIconContainer"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
+              <svg
+                class="searchIcon"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
               class="input"
               data-test="search-dashboard-input"
@@ -184,21 +188,25 @@ exports[`renders a DashboardsBar with maximum height 1`] = `
           <div
             class="container"
           >
-            <svg
-              class="searchIcon"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="searchIconContainer"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
+              <svg
+                class="searchIcon"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
               class="input"
               data-test="search-dashboard-input"
@@ -331,21 +339,25 @@ exports[`renders a DashboardsBar with minimum height 1`] = `
           <div
             class="container"
           >
-            <svg
-              class="searchIcon"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="searchIconContainer"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
+              <svg
+                class="searchIcon"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
               class="input"
               data-test="search-dashboard-input"
@@ -480,21 +492,25 @@ exports[`renders a DashboardsBar with no items 1`] = `
           <div
             class="container"
           >
-            <svg
-              class="searchIcon"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="searchIconContainer"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
+              <svg
+                class="searchIcon"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
               class="input"
               data-test="search-dashboard-input"
@@ -575,21 +591,25 @@ exports[`renders a DashboardsBar with selected item 1`] = `
           <div
             class="container"
           >
-            <svg
-              class="searchIcon"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="searchIconContainer"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
+              <svg
+                class="searchIcon"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
               class="input"
               data-test="search-dashboard-input"
@@ -724,18 +744,22 @@ exports[`small screen: clicking "Show more" maximizes dashboards bar height 1`]
           <div
             class="container"
           >
-            <svg
-              class="searchIcon"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="searchIconContainer"
             >
-              <path
-                d="m6 1c2.76142375 0 5 2.23857625 5 5 0 1.20065927-.4231997 2.30247496-1.12856994 3.16441794l4.48212334 4.48202866-.7071068.7071068-4.48202866-4.48212334c-.86194298.70537024-1.96375867 1.12856994-3.16441794 1.12856994-2.76142375 0-5-2.23857625-5-5s2.23857625-5 5-5zm0 1c-2.209139 0-4 1.790861-4 4s1.790861 4 4 4 4-1.790861 4-4-1.790861-4-4-4z"
-                fill="#010101"
-              />
-            </svg>
+              <svg
+                class="searchIcon"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m6 1c2.76142375 0 5 2.23857625 5 5 0 1.20065927-.4231997 2.30247496-1.12856994 3.16441794l4.48212334 4.48202866-.7071068.7071068-4.48202866-4.48212334c-.86194298.70537024-1.96375867 1.12856994-3.16441794 1.12856994-2.76142375 0-5-2.23857625-5-5s2.23857625-5 5-5zm0 1c-2.209139 0-4 1.790861-4 4s1.790861 4 4 4 4-1.790861 4-4-1.790861-4-4-4z"
+                  fill="#010101"
+                />
+              </svg>
+            </div>
             <input
               class="input"
               data-test="search-dashboard-input"
diff --git a/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap
index 3f0a03382..8112bb8f4 100644
--- a/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap
+++ b/src/components/ControlBar/__tests__/__snapshots__/Filter.spec.js.snap
@@ -5,21 +5,25 @@ exports[`Filter matches the snapshot when filterText property is empty 1`] = `
   <div
     class="container"
   >
-    <svg
-      class="searchIcon"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="searchIconContainer"
     >
-      <path
-        d="M0 0h24v24H0z"
-        fill="none"
-      />
-      <path
-        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-      />
-    </svg>
+      <svg
+        class="searchIcon"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+        />
+      </svg>
+    </div>
     <input
       class="input"
       data-test="search-dashboard-input"
@@ -37,21 +41,25 @@ exports[`Filter when filterText property is provided renders an input with corre
   <div
     class="container"
   >
-    <svg
-      class="searchIcon"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="searchIconContainer"
     >
-      <path
-        d="M0 0h24v24H0z"
-        fill="none"
-      />
-      <path
-        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-      />
-    </svg>
+      <svg
+        class="searchIcon"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+        />
+      </svg>
+    </div>
     <input
       class="input"
       data-test="search-dashboard-input"
@@ -59,26 +67,30 @@ exports[`Filter when filterText property is provided renders an input with corre
       type="text"
       value="rainbow"
     />
-    <button
-      class="button"
+    <div
+      class="clearButtonContainer"
     >
-      <span>
-        <svg
-          class="icon"
-          fill="#404b5a"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          />
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-        </svg>
-      </span>
-    </button>
+      <button
+        class="button"
+      >
+        <span>
+          <svg
+            class="icon"
+            fill="#404b5a"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/ControlBar/styles/ClearButton.module.css b/src/components/ControlBar/styles/ClearButton.module.css
index 183c8172d..5f22c92fc 100644
--- a/src/components/ControlBar/styles/ClearButton.module.css
+++ b/src/components/ControlBar/styles/ClearButton.module.css
@@ -20,3 +20,9 @@
     width: 16px;
     height: 16px;
 }
+
+@media only screen and (max-width: 480px) {
+    .button {
+        margin-bottom: var(--spacers-dp4);
+    }
+}
diff --git a/src/components/ControlBar/styles/Filter.module.css b/src/components/ControlBar/styles/Filter.module.css
index 37d261d20..7ee7ac50c 100644
--- a/src/components/ControlBar/styles/Filter.module.css
+++ b/src/components/ControlBar/styles/Filter.module.css
@@ -1,17 +1,21 @@
 .container {
+    top: -4px;
     width: 200px;
-    height: 36px;
+    height: 30px;
     position: relative;
     align-items: center;
     display: inline-flex;
     line-height: 1.1875em;
-    padding-top: var(--spacers-dp8);
 }
 
 .input {
     font-size: 14px;
     border: none;
-    margin-left: var(--spacers-dp8);
+    width: 100%;
+    box-sizing: content-box;
+    min-width: 0px;
+    margin: 0;
+    padding: 6px 0 7px;
 }
 
 .input::placeholder {
@@ -61,6 +65,22 @@
     cursor: pointer;
 }
 
+.searchIconContainer {
+    height: 0.01em;
+    max-height: 2em;
+    display: flex;
+    align-items: center;
+    margin-right: 8px;
+}
+
+.clearButtonContainer {
+    height: 0.01em;
+    max-height: 2em;
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+}
+
 @media only screen and (max-width: 480px) {
     .container {
         height: 24px;