From 0cc8a44c3d27933bb581a2c258b2c238e8009904 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 3 Sep 2020 15:10:07 +0200
Subject: [PATCH] feat(js): add magnifier glass as label

---
 packages/autocomplete-js/src/autocomplete.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index a12b4c0ad..140663ce7 100644
--- 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);
   }