feat(examples): update class names

algolia · Oct 29, 2020 · 73285f5 · 73285f5
1 parent 63ccb79
commit 73285f5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git 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,37 +89,37 @@
   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;
   display: flex;
   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
@@ -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();