feat(js): add magnifier glass as label

algolia · Sep 3, 2020 · 0cc8a44 · 0cc8a44
1 parent 4c2b52a
commit 0cc8a44
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -110,8 +110,20 @@ export function autocomplete<TItem>({
 
   const labelProps = autocomplete.getLabelProps();
   setProperties(label, labelProps);
-  // @TODO have a magnifier glass
-  label.textContent = 'Search items';
+  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>`;
   label.classList.add('aa-Label');
 
   inputWrapper.classList.add('aa-InputWrapper');
@@ -207,7 +219,7 @@ export function autocomplete<TItem>({
     renderDropdown({ root: dropdown, sections, state });
   }
 
-  form.appendChild(label);
+  inputWrapper.appendChild(label);
   if (props.enableCompletion) {
     inputWrapper.appendChild(completion);
   }