feat(js): add reset icon

algolia · Sep 11, 2020 · 7d2dccc · 7d2dccc
1 parent 28bb422
commit 7d2dccc
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -46,8 +46,8 @@
     "babel-plugin-inline-replace-variables": "1.3.1",
     "babel-plugin-module-resolver": "4.0.0",
     "bundlesize": "0.18.0",
-    "cssnano": "4.1.10",
     "concurrently": "5.3.0",
+    "cssnano": "4.1.10",
     "cypress": "4.8.0",
     "dotenv": "8.2.0",
     "eslint": "6.8.0",

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -7,6 +7,7 @@ import { concatClassNames } from './concatClassNames';
 import { debounce } from './debounce';
 import { getDropdownPositionStyle } from './getDropdownPositionStyle';
 import { getHTMLElement } from './getHTMLElement';
+import { resetIcon, searchIcon } from './icons';
 import { renderTemplate } from './renderTemplate';
 import { setProperties, setPropertiesWithoutEvents } from './setProperties';
 import {
@@ -84,24 +85,6 @@ export function autocomplete<TItem>({
     ...formProps,
     class: concatClassNames(['aa-Form', classNames.form]),
   });
-  setProperties(label, {
-    ...autocomplete.getLabelProps(),
-    class: concatClassNames(['aa-Label', classNames.label]),
-    innerHTML: `<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"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  />
-</svg>`,
-  });
   setProperties(inputWrapper, {
     class: ['aa-InputWrapper', classNames.inputWrapper]
       .filter(Boolean)
@@ -114,11 +97,16 @@ export function autocomplete<TItem>({
   setProperties(completion, {
     class: concatClassNames(['aa-Completion', classNames.completion]),
   });
+  setProperties(label, {
+    ...autocomplete.getLabelProps(),
+    class: concatClassNames(['aa-Label', classNames.label]),
+    innerHTML: searchIcon,
+  });
   setProperties(resetButton, {
     type: 'reset',
-    textContent: 'ｘ',
     onClick: formProps.onReset,
     class: concatClassNames(['aa-ResetButton', classNames.resetButton]),
+    innerHTML: resetIcon,
   });
   setProperties(dropdown, {
     ...autocomplete.getDropdownProps(),
@@ -226,11 +214,11 @@ export function autocomplete<TItem>({
     renderDropdown({ root: dropdown, sections, state });
   }
 
-  inputWrapper.appendChild(label);
   if (props.enableCompletion) {
     inputWrapper.appendChild(completion);
   }
   inputWrapper.appendChild(input);
+  inputWrapper.appendChild(label);
   inputWrapper.appendChild(resetButton);
   form.appendChild(inputWrapper);
   root.appendChild(form);

diff --git a/packages/autocomplete-js/src/icons/index.ts b/packages/autocomplete-js/src/icons/index.ts
@@ -0,0 +1,2 @@
+export * from './reset-icon';
+export * from './search-icon';
diff --git a/packages/autocomplete-js/src/icons/reset-icon.ts b/packages/autocomplete-js/src/icons/reset-icon.ts
@@ -0,0 +1,10 @@
+export const resetIcon = `<svg width="20" height="20" viewBox="0 0 20 20">
+  <path
+    d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
+    stroke="currentColor"
+    fill="none"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  ></path>
+</svg>`;
diff --git a/packages/autocomplete-js/src/icons/search-icon.ts b/packages/autocomplete-js/src/icons/search-icon.ts
@@ -0,0 +1,10 @@
+export const searchIcon = `<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"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>`;