From 63ccb7997300895df22f1989eceda50765834dfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 29 Oct 2020 14:22:37 +0100
Subject: [PATCH 1/4] feat(js): rename class names

This renames the class names to better reflect the structure of the DOM.

Feel free to suggest any changes.

BREAKING CHANGE
---
 .../src/__tests__/autocomplete.test.ts        |  2 +-
 packages/autocomplete-js/src/autocomplete.ts  | 22 +++++++------------
 packages/autocomplete-js/src/types/index.ts   | 12 +++++-----
 packages/website/docs/autocomplete-js.md      | 12 +++++-----
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index 4b45a9dcb..0a2cff553 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -109,7 +109,7 @@ describe('autocomplete-js', () => {
             </div>
           </form>
           <div
-            class="aa-Dropdown"
+            class="aa-ListContainer"
             hidden=""
             style="top: 0px; left: 0px; right: 0px; max-width: unset;"
           />
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index bcc01fa6d..29c81744a 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -111,7 +111,7 @@ export function autocomplete<TItem>({
   setProperties(dropdown, {
     ...autocomplete.getDropdownProps(),
     hidden: true,
-    class: concatClassNames(['aa-Dropdown', classNames.dropdown]),
+    class: concatClassNames(['aa-ListContainer', classNames.listContainer]),
   });
 
   function render(state: AutocompleteCoreState<TItem>) {
@@ -139,9 +139,9 @@ export function autocomplete<TItem>({
     }
 
     if (state.status === 'stalled') {
-      dropdown.classList.add('aa-Dropdown--stalled');
+      dropdown.classList.add('aa-ListContainer--stalled');
     } else {
-      dropdown.classList.remove('aa-Dropdown--stalled');
+      dropdown.classList.remove('aa-ListContainer--stalled');
     }
 
     const sections = state.collections.map((collection) => {
@@ -150,16 +150,13 @@ export function autocomplete<TItem>({
 
       const section = document.createElement('section');
       setProperties(section, {
-        class: concatClassNames(['aa-Section', classNames.section]),
+        class: concatClassNames(['aa-Source', classNames.source]),
       });
 
       if (source.templates.header) {
         const header = document.createElement('div');
         setProperties(header, {
-          class: concatClassNames([
-            'aa-SectionHeader',
-            classNames.sectionHeader,
-          ]),
+          class: concatClassNames(['aa-SourceHeader', classNames.sourceHeader]),
         });
         renderTemplate(
           source.templates.header({ root: header, state }),
@@ -172,14 +169,14 @@ export function autocomplete<TItem>({
         const menu = document.createElement('ul');
         setProperties(menu, {
           ...autocomplete.getMenuProps(),
-          class: concatClassNames(['aa-Menu', classNames.menu]),
+          class: concatClassNames(['aa-List', classNames.list]),
         });
 
         const menuItems = items.map((item) => {
           const li = document.createElement('li');
           setProperties(li, {
             ...autocomplete.getItemProps({ item, source }),
-            class: concatClassNames(['aa-Item', classNames.item]),
+            class: concatClassNames(['aa-ListItem', classNames.listItem]),
           });
           renderTemplate(source.templates.item({ root: li, item, state }), li);
 
@@ -196,10 +193,7 @@ export function autocomplete<TItem>({
       if (source.templates.footer) {
         const footer = document.createElement('div');
         setProperties(footer, {
-          class: concatClassNames([
-            'aa-SectionFooter',
-            classNames.sectionFooter,
-          ]),
+          class: concatClassNames(['aa-SourceFooter', classNames.sourceFooter]),
         });
         renderTemplate(
           source.templates.footer({ root: footer, state }),
diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts
index 36b1b842e..ad1fb34d6 100644
--- a/packages/autocomplete-js/src/types/index.ts
+++ b/packages/autocomplete-js/src/types/index.ts
@@ -84,12 +84,12 @@ export interface AutocompleteOptions<TItem>
     input?: string;
     completion?: string;
     resetButton?: string;
-    dropdown?: string;
-    section?: string;
-    sectionHeader?: string;
-    menu?: string;
-    item?: string;
-    sectionFooter?: string;
+    listContainer?: string;
+    source?: string;
+    sourceHeader?: string;
+    list?: string;
+    listItem?: string;
+    sourceFooter?: string;
   };
   /**
    * Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
index 76bac6a31..e13a4ec8d 100644
--- a/packages/website/docs/autocomplete-js.md
+++ b/packages/website/docs/autocomplete-js.md
@@ -90,12 +90,12 @@ type ClassNames = {
   input?: string;
   completion?: string;
   resetButton?: string;
-  dropdown?: string;
-  section?: string;
-  sectionHeader?: string;
-  menu?: string;
-  item?: string;
-  sectionFooter?: string;
+  listContainer?: string;
+  source?: string;
+  sourceHeader?: string;
+  list?: string;
+  listItem?: string;
+  sourceFooter?: string;
 };
 ```
 

From 73285f501cecafcc2d2088c7b3e979d54f71da9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 29 Oct 2020 14:36:55 +0100
Subject: [PATCH 2/4] feat(examples): update class names

---
 examples/js/autocomplete.css                 | 14 ++++++------
 packages/autocomplete-js/src/autocomplete.ts | 24 ++++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/examples/js/autocomplete.css b/examples/js/autocomplete.css
index 2ca7bdbc9..addd76201 100644
--- a/examples/js/autocomplete.css
+++ b/examples/js/autocomplete.css
@@ -77,7 +77,7 @@
   z-index: 2;
 }
 
-.aa-Dropdown {
+.aa-ListContainer {
   background-color: #fff;
   border: 1px solid rgba(150, 150, 150, 0.16);
   border-radius: 3px;
@@ -89,24 +89,24 @@
   width: 100%;
 }
 
-.aa-Dropdown--stalled {
+.aa-ListContainer--stalled {
   filter: grayscale(1);
   opacity: 0.5;
   transition: opacity 200ms ease-in;
 }
 
-.aa-Dropdown a {
+.aa-ListContainer a {
   color: inherit;
   text-decoration: none;
 }
 
-.aa-Dropdown ul {
+.aa-ListContainer ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.aa-Item {
+.aa-ListItem {
   color: #23263b;
   cursor: pointer;
   padding: 0.5rem;
@@ -114,12 +114,12 @@
   align-items: center;
 }
 
-.aa-Item mark {
+.aa-ListItem mark {
   background: none;
   font-style: normal;
   font-weight: bold;
 }
 
-.aa-Item[aria-selected='true'] {
+.aa-ListItem[aria-selected='true'] {
   background-color: #f5f5fa;
 }
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index 29c81744a..341209d46 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -37,7 +37,7 @@ export function autocomplete<TItem>({
   const form = document.createElement('form');
   const label = document.createElement('label');
   const resetButton = document.createElement('button');
-  const dropdown = document.createElement('div');
+  const listContainer = document.createElement('div');
 
   const autocomplete = createAutocomplete<TItem>({
     ...props,
@@ -52,13 +52,13 @@ export function autocomplete<TItem>({
   });
 
   const onResize = debounce(() => {
-    if (!dropdown.hasAttribute('hidden')) {
+    if (!listContainer.hasAttribute('hidden')) {
       setDropdownPosition();
     }
   }, 100);
 
   function setDropdownPosition() {
-    setProperties(dropdown, {
+    setProperties(listContainer, {
       style: getDropdownPositionStyle({
         dropdownPlacement,
         container: root,
@@ -71,7 +71,7 @@ export function autocomplete<TItem>({
   setProperties(window as any, {
     ...autocomplete.getEnvironmentProps({
       searchBoxElement: form,
-      dropdownElement: dropdown,
+      dropdownElement: listContainer,
       inputElement: input,
     }),
     onResize,
@@ -108,7 +108,7 @@ export function autocomplete<TItem>({
     class: concatClassNames(['aa-ResetButton', classNames.resetButton]),
     innerHTML: resetIcon,
   });
-  setProperties(dropdown, {
+  setProperties(listContainer, {
     ...autocomplete.getDropdownProps(),
     hidden: true,
     class: concatClassNames(['aa-ListContainer', classNames.listContainer]),
@@ -125,23 +125,23 @@ export function autocomplete<TItem>({
       completion.textContent = state.completion;
     }
 
-    dropdown.innerHTML = '';
+    listContainer.innerHTML = '';
 
     if (state.isOpen) {
-      setProperties(dropdown, {
+      setProperties(listContainer, {
         hidden: false,
       });
     } else {
-      setProperties(dropdown, {
+      setProperties(listContainer, {
         hidden: true,
       });
       return;
     }
 
     if (state.status === 'stalled') {
-      dropdown.classList.add('aa-ListContainer--stalled');
+      listContainer.classList.add('aa-ListContainer--stalled');
     } else {
-      dropdown.classList.remove('aa-ListContainer--stalled');
+      listContainer.classList.remove('aa-ListContainer--stalled');
     }
 
     const sections = state.collections.map((collection) => {
@@ -205,7 +205,7 @@ export function autocomplete<TItem>({
       return section;
     });
 
-    renderDropdown({ root: dropdown, sections, state });
+    renderDropdown({ root: listContainer, sections, state });
   }
 
   if (props.enableCompletion) {
@@ -216,7 +216,7 @@ export function autocomplete<TItem>({
   inputWrapper.appendChild(resetButton);
   form.appendChild(inputWrapper);
   root.appendChild(form);
-  root.appendChild(dropdown);
+  root.appendChild(listContainer);
   containerElement.appendChild(root);
 
   setDropdownPosition();

From a600ed256dc6a1750b3d2516e5e473306dea296c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 4 Nov 2020 12:19:28 +0100
Subject: [PATCH 3/4] feat: rename ListContainer to Panel

---
 examples/js/autocomplete.css                  |  8 ++---
 .../src/__tests__/autocomplete.test.ts        |  4 +--
 packages/autocomplete-js/src/autocomplete.ts  | 30 +++++++++----------
 packages/autocomplete-js/src/types/index.ts   |  2 +-
 packages/website/docs/autocomplete-js.md      |  2 +-
 5 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/examples/js/autocomplete.css b/examples/js/autocomplete.css
index ea4ab1cd5..ad5cbecc4 100644
--- a/examples/js/autocomplete.css
+++ b/examples/js/autocomplete.css
@@ -77,7 +77,7 @@
   z-index: 2;
 }
 
-.aa-ListContainer {
+.aa-Panel {
   background-color: #fff;
   border: 1px solid rgba(150, 150, 150, 0.16);
   border-radius: 3px;
@@ -89,18 +89,18 @@
   width: 100%;
 }
 
-.aa-ListContainer--stalled {
+.aa-Panel--stalled {
   filter: grayscale(1);
   opacity: 0.5;
   transition: opacity 200ms ease-in;
 }
 
-.aa-ListContainer a {
+.aa-Panel a {
   color: inherit;
   text-decoration: none;
 }
 
-.aa-ListContainer ul {
+.aa-Panel ul {
   list-style: none;
   margin: 0;
   padding: 0;
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index 0a2cff553..55619c55b 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -47,7 +47,7 @@ describe('autocomplete-js', () => {
               class="aa-InputWrapper"
             >
               <input
-                aria-autocomplete="list"
+                aria-autocomplete="both"
                 aria-labelledby="autocomplete-label"
                 autocapitalize="off"
                 autocomplete="off"
@@ -109,7 +109,7 @@ describe('autocomplete-js', () => {
             </div>
           </form>
           <div
-            class="aa-ListContainer"
+            class="aa-Panel"
             hidden=""
             style="top: 0px; left: 0px; right: 0px; max-width: unset;"
           />
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index 860777eb6..95bb876c9 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -36,7 +36,7 @@ export function autocomplete<TItem>({
   const form = document.createElement('form');
   const label = document.createElement('label');
   const resetButton = document.createElement('button');
-  const listContainer = document.createElement('div');
+  const panel = document.createElement('div');
 
   const autocomplete = createAutocomplete<TItem>({
     ...props,
@@ -51,13 +51,13 @@ export function autocomplete<TItem>({
   });
 
   const onResize = debounce(() => {
-    if (!listContainer.hasAttribute('hidden')) {
+    if (!panel.hasAttribute('hidden')) {
       setDropdownPosition();
     }
   }, 100);
 
   function setDropdownPosition() {
-    setProperties(listContainer, {
+    setProperties(panel, {
       style: getDropdownPositionStyle({
         dropdownPlacement,
         container: root,
@@ -70,7 +70,7 @@ export function autocomplete<TItem>({
   setProperties(window as any, {
     ...autocomplete.getEnvironmentProps({
       searchBoxElement: form,
-      dropdownElement: listContainer,
+      dropdownElement: panel,
       inputElement: input,
     }),
     onResize,
@@ -85,9 +85,7 @@ export function autocomplete<TItem>({
     class: concatClassNames(['aa-Form', classNames.form]),
   });
   setProperties(inputWrapper, {
-    class: ['aa-InputWrapper', classNames.inputWrapper]
-      .filter(Boolean)
-      .join(' '),
+    class: concatClassNames(['aa-InputWrapper', classNames.inputWrapper]),
   });
   setProperties(input, {
     ...autocomplete.getInputProps({ inputElement: input }),
@@ -104,10 +102,10 @@ export function autocomplete<TItem>({
     class: concatClassNames(['aa-ResetButton', classNames.resetButton]),
     innerHTML: resetIcon,
   });
-  setProperties(listContainer, {
+  setProperties(panel, {
     ...autocomplete.getDropdownProps(),
     hidden: true,
-    class: concatClassNames(['aa-ListContainer', classNames.listContainer]),
+    class: concatClassNames(['aa-Panel', classNames.panel]),
   });
 
   function render(state: AutocompleteCoreState<TItem>) {
@@ -117,23 +115,23 @@ export function autocomplete<TItem>({
       autocomplete.getInputProps({ inputElement: input })
     );
 
-    listContainer.innerHTML = '';
+    panel.innerHTML = '';
 
     if (state.isOpen) {
-      setProperties(listContainer, {
+      setProperties(panel, {
         hidden: false,
       });
     } else {
-      setProperties(listContainer, {
+      setProperties(panel, {
         hidden: true,
       });
       return;
     }
 
     if (state.status === 'stalled') {
-      listContainer.classList.add('aa-ListContainer--stalled');
+      panel.classList.add('aa-panel--stalled');
     } else {
-      listContainer.classList.remove('aa-ListContainer--stalled');
+      panel.classList.remove('aa-panel--stalled');
     }
 
     const sections = state.collections.map((collection) => {
@@ -197,7 +195,7 @@ export function autocomplete<TItem>({
       return section;
     });
 
-    renderDropdown({ root: listContainer, sections, state });
+    renderDropdown({ root: panel, sections, state });
   }
 
   inputWrapper.appendChild(input);
@@ -205,7 +203,7 @@ export function autocomplete<TItem>({
   inputWrapper.appendChild(resetButton);
   form.appendChild(inputWrapper);
   root.appendChild(form);
-  root.appendChild(listContainer);
+  root.appendChild(panel);
   containerElement.appendChild(root);
 
   setDropdownPosition();
diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts
index a99c26c56..e3685ca52 100644
--- a/packages/autocomplete-js/src/types/index.ts
+++ b/packages/autocomplete-js/src/types/index.ts
@@ -84,7 +84,7 @@ export interface AutocompleteOptions<TItem>
     input?: string;
     completion?: string;
     resetButton?: string;
-    listContainer?: string;
+    panel?: string;
     source?: string;
     sourceHeader?: string;
     list?: string;
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
index 14c28ccec..17dbf9615 100644
--- a/packages/website/docs/autocomplete-js.md
+++ b/packages/website/docs/autocomplete-js.md
@@ -90,7 +90,7 @@ type ClassNames = {
   input?: string;
   completion?: string;
   resetButton?: string;
-  listContainer?: string;
+  panel?: string;
   source?: string;
   sourceHeader?: string;
   list?: string;

From 8fcd947039a756e4aed387c28dc56862e54f8b42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 4 Nov 2020 12:21:44 +0100
Subject: [PATCH 4/4] feat: remove Completion class names

---
 examples/js/autocomplete.css                | 11 +----------
 packages/autocomplete-js/src/types/index.ts |  1 -
 packages/website/docs/autocomplete-js.md    |  1 -
 3 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/examples/js/autocomplete.css b/examples/js/autocomplete.css
index ad5cbecc4..9966477ae 100644
--- a/examples/js/autocomplete.css
+++ b/examples/js/autocomplete.css
@@ -43,16 +43,7 @@
   -webkit-appearance: none;
 }
 
-.aa-Completion {
-  color: #999;
-  left: 1px;
-  position: absolute;
-  transform: translateY(50%);
-  z-index: 1;
-}
-
-.aa-Input,
-.aa-Completion {
+.aa-Input {
   padding: 0 2.25rem;
 }
 
diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts
index e3685ca52..fe204e559 100644
--- a/packages/autocomplete-js/src/types/index.ts
+++ b/packages/autocomplete-js/src/types/index.ts
@@ -82,7 +82,6 @@ export interface AutocompleteOptions<TItem>
     label?: string;
     inputWrapper?: string;
     input?: string;
-    completion?: string;
     resetButton?: string;
     panel?: string;
     source?: string;
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
index 17dbf9615..3e2b77cff 100644
--- a/packages/website/docs/autocomplete-js.md
+++ b/packages/website/docs/autocomplete-js.md
@@ -88,7 +88,6 @@ type ClassNames = {
   label?: string;
   inputWrapper?: string;
   input?: string;
-  completion?: string;
   resetButton?: string;
   panel?: string;
   source?: string;