From af43a379215376cab811adfd512bc7fb60965803 Mon Sep 17 00:00:00 2001
From: Kevin Granger <shipowlata@gmail.com>
Date: Thu, 11 Feb 2021 10:09:19 +0100
Subject: [PATCH] fix(theme): update icons and Detached mode design (#443)

---
 bundlesize.config.json                        |  6 ++---
 examples/js/app.tsx                           | 17 +++----------
 .../src/__tests__/autocomplete.test.ts        | 21 ++++++----------
 .../src/components/ResetIcon.ts               | 10 +++-----
 .../src/components/SearchIcon.ts              | 11 +++-----
 .../src/getTemplates.tsx                      | 17 +++----------
 .../src/getTemplates.tsx                      | 15 +++--------
 .../autocomplete-theme-classic/src/theme.scss | 25 +++++++++++--------
 8 files changed, 42 insertions(+), 80 deletions(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index cc4c8d051..81c1cdd22 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "14 kB"
+      "maxSize": "14.25 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
@@ -18,11 +18,11 @@
     },
     {
       "path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.production.js",
-      "maxSize": "3.5 kB"
+      "maxSize": "3.75 kB"
     },
     {
       "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
-      "maxSize": "3 kB"
+      "maxSize": "3.25 kB"
     }
   ]
 }
diff --git a/examples/js/app.tsx b/examples/js/app.tsx
index 9b9f99590..f3ba3d66d 100644
--- a/examples/js/app.tsx
+++ b/examples/js/app.tsx
@@ -141,7 +141,7 @@ function ProductItem({ hit, insights }: ProductItemProps) {
           type="button"
           title="Select"
         >
-          <svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
             <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>
           </svg>
         </button>
@@ -161,19 +161,8 @@ function ProductItem({ hit, insights }: ProductItemProps) {
             });
           }}
         >
-          <svg
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            width="20"
-            height="20"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-            />
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+            <path d="M19 5h-14l1.5-2h11zM21.794 5.392l-2.994-3.992c-0.196-0.261-0.494-0.399-0.8-0.4h-12c-0.326 0-0.616 0.156-0.8 0.4l-2.994 3.992c-0.043 0.056-0.081 0.117-0.111 0.182-0.065 0.137-0.096 0.283-0.095 0.426v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.219-0.071-0.422-0.189-0.585-0.004-0.005-0.007-0.010-0.011-0.015zM4 7h16v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707zM15 10c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121c0-0.552-0.448-1-1-1s-1 0.448-1 1c0 1.38 0.561 2.632 1.464 3.536s2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
           </svg>
         </button>
       </div>
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index 4dc2dd635..099b97458 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -58,18 +58,13 @@ describe('autocomplete-js', () => {
                 >
                   <svg
                     class="aa-SubmitIcon"
+                    fill="currentColor"
                     height="20"
-                    viewBox="0 0 20 20"
+                    viewBox="0 0 24 24"
                     width="20"
                   >
                     <path
-                      d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-                      fill="none"
-                      fill-rule="evenodd"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.4"
+                      d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
                     />
                   </svg>
                 </button>
@@ -138,14 +133,12 @@ describe('autocomplete-js', () => {
                 <svg
                   class="aa-ResetIcon"
                   fill="currentColor"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  width="20"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  width="18"
                 >
                   <path
-                    clip-rule="evenodd"
-                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                    fill-rule="evenodd"
+                    d="M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
                   />
                 </svg>
               </button>
diff --git a/packages/autocomplete-js/src/components/ResetIcon.ts b/packages/autocomplete-js/src/components/ResetIcon.ts
index f4735b965..2c291afdf 100644
--- a/packages/autocomplete-js/src/components/ResetIcon.ts
+++ b/packages/autocomplete-js/src/components/ResetIcon.ts
@@ -3,18 +3,16 @@ import { Component } from '../types/Component';
 export const ResetIcon: Component<{}, SVGSVGElement> = () => {
   const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   element.setAttribute('class', 'aa-ResetIcon');
-  element.setAttribute('viewBox', '0 0 20 20');
-  element.setAttribute('width', '20');
-  element.setAttribute('height', '20');
+  element.setAttribute('viewBox', '0 0 24 24');
+  element.setAttribute('width', '18');
+  element.setAttribute('height', '18');
   element.setAttribute('fill', 'currentColor');
 
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   path.setAttribute(
     'd',
-    'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
+    'M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z'
   );
-  path.setAttribute('fill-rule', 'evenodd');
-  path.setAttribute('clip-rule', 'evenodd');
 
   element.appendChild(path);
 
diff --git a/packages/autocomplete-js/src/components/SearchIcon.ts b/packages/autocomplete-js/src/components/SearchIcon.ts
index 210685522..708097cd1 100644
--- a/packages/autocomplete-js/src/components/SearchIcon.ts
+++ b/packages/autocomplete-js/src/components/SearchIcon.ts
@@ -3,21 +3,16 @@ import { Component } from '../types/Component';
 export const SearchIcon: Component<{}, SVGSVGElement> = () => {
   const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   element.setAttribute('class', 'aa-SubmitIcon');
-  element.setAttribute('viewBox', '0 0 20 20');
+  element.setAttribute('viewBox', '0 0 24 24');
   element.setAttribute('width', '20');
   element.setAttribute('height', '20');
+  element.setAttribute('fill', 'currentColor');
 
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   path.setAttribute(
     'd',
-    'M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z'
+    'M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z'
   );
-  path.setAttribute('stroke', 'currentColor');
-  path.setAttribute('fill', 'none');
-  path.setAttribute('fill-rule', 'evenodd');
-  path.setAttribute('stroke-width', '1.4');
-  path.setAttribute('stroke-linecap', 'round');
-  path.setAttribute('stroke-linejoin', 'round');
 
   element.appendChild(path);
 
diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
index f42b71e50..4c8499bfb 100644
--- a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
+++ b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
@@ -15,16 +15,8 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
       return (
         <Fragment>
           <div className="aa-ItemIcon aa-ItemIcon--no-border">
-            <svg width="20" height="20" viewBox="0 0 20 20">
-              <path
-                d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-                stroke="currentColor"
-                fill="none"
-                fillRule="evenodd"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
             </svg>
           </div>
           <div className="aa-ItemContent">
@@ -47,12 +39,11 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
             >
               <svg
                 viewBox="0 0 24 24"
-                fill="currentColor"
                 width="18"
                 height="18"
+                fill="currentColor"
               >
-                <rect fill="none" height="24" width="24" />
-                <path d="M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z" />
+                <path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
               </svg>
             </button>
           </div>
diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
index 23dac84a4..3468aa4ed 100644
--- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
+++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
@@ -15,9 +15,8 @@ export function getTemplates<TItem extends RecentSearchesItem>({
       return (
         <Fragment>
           <div className="aa-ItemIcon aa-ItemIcon--no-border">
-            <svg width="20" height="20" viewBox="0 0 22 22" fill="currentColor">
-              <path d="M0 0h24v24H0z" fill="none" />
-              <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <path d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
             </svg>
           </div>
           <div className="aa-ItemContent">
@@ -42,15 +41,9 @@ export function getTemplates<TItem extends RecentSearchesItem>({
                 viewBox="0 0 24 24"
                 width="18"
                 height="18"
-                fill="none"
-                stroke="currentColor"
+                fill="currentColor"
               >
-                <path
-                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                />
+                <path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
               </svg>
             </button>
           </div>
diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
index d697321b0..4fa57dc44 100644
--- a/packages/autocomplete-theme-classic/src/theme.scss
+++ b/packages/autocomplete-theme-classic/src/theme.scss
@@ -486,18 +486,21 @@ body {
 .aa-DetachedOverlay {
   background: var(--aa-background-color);
   bottom: 0;
+  display: flex;
+  flex-direction: column;
   left: 0;
-  padding: var(--aa-spacing-half) 0 var(--aa-spacing-half)
-    var(--aa-spacing-half);
+  overflow: hidden;
+  padding: 0;
   position: fixed;
   right: 0;
   top: 0;
+
   .aa-DetachedFormContainer {
     border-bottom: solid 1px var(--aa-selected-color);
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
-    margin-right: var(--aa-spacing-half);
-    padding-bottom: var(--aa-spacing-half);
+    padding: var(--aa-spacing-half);
     .aa-Form {
       padding: 0 var(--aa-spacing-half) 0 0;
     }
@@ -512,18 +515,18 @@ body {
   }
   .aa-Panel {
     background-color: var(--aa-background-color);
-    height: 100vh; // TODO: compute with js
-    left: var(--aa-spacing-half);
-    overflow-y: auto;
-    padding-bottom: var(--aa-spacing);
-    padding-right: var(--aa-spacing-half);
-    padding-top: var(--aa-spacing-half);
-    right: 0;
+    overflow: hidden;
+    padding: 0 var(--aa-spacing-half);
+    position: relative;
+
     .aa-PanelLayout {
       box-shadow: none;
+      height: 100%;
       margin: 0;
       max-height: none;
+      overflow-y: auto;
       padding: 0;
+      width: 100%;
     }
     .aa-Item {
       border-radius: 3px;