fix: improve positioning of the X button in the dashboard search input (

#1512) * fix: adjust css to place X button correctly * fix: update snapshots Co-authored-by: Jan Henrik Øverland <[email protected]>
dhis2 · Feb 8, 2021 · b8b6dde · b8b6dde
1 parent 2cc5dd2
commit b8b6dde
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 136 deletions.
diff --git 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
@@ -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
@@ -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,48 +41,56 @@ 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"
       placeholder="Search for a dashboard"
       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>
 `;