feat(js): rename classnames to Detached

Author: francoischalifour

packages/autocomplete-js/src/getDefaultOptions.ts

@@ -15,12 +15,12 @@ import {
 import { getHTMLElement, mergeClassNames } from './utils';
 
 const defaultClassNames: AutocompleteClassNames = {
-  detachedCancelButton: 'aa-TouchCancelButton',
-  detachedFormContainer: 'aa-TouchFormContainer',
-  detachedOverlay: 'aa-TouchOverlay',
-  detachedSearchButton: 'aa-TouchSearchButton',
-  detachedSearchButtonIcon: 'aa-TouchSearchButtonIcon',
-  detachedSearchButtonPlaceholder: 'aa-TouchSearchButtonPlaceholder',
+  detachedCancelButton: 'aa-DetachedCancelButton',
+  detachedFormContainer: 'aa-DetachedFormContainer',
+  detachedOverlay: 'aa-DetachedOverlay',
+  detachedSearchButton: 'aa-DetachedSearchButton',
+  detachedSearchButtonIcon: 'aa-DetachedSearchButtonIcon',
+  detachedSearchButtonPlaceholder: 'aa-DetachedSearchButtonPlaceholder',
   form: 'aa-Form',
   input: 'aa-Input',
   inputWrapper: 'aa-InputWrapper',

packages/autocomplete-theme-classic/src/theme.scss

@@ -47,7 +47,7 @@ body {
 // Autocomplete
 // ----------------
 .aa-Autocomplete,
-.aa-TouchFormContainer {
+.aa-DetachedFormContainer {
   font-size: var(--aa-font-size);
   line-height: 1em;
   text-align: left;
@@ -451,9 +451,9 @@ body {
 }
 
 //----------------
-// Touch
+// Detached
 //----------------
-.aa-TouchSearchButton {
+.aa-DetachedSearchButton {
   align-items: center;
   background-color: var(--aa-background-color);
   border: 1px solid var(--aa-muted-color);
@@ -466,7 +466,7 @@ body {
   padding: 0 var(--aa-spacing-half);
   position: relative;
   text-align: left;
-  .aa-TouchSearchButtonIcon {
+  .aa-DetachedSearchButtonIcon {
     align-items: center;
     color: var(--aa-icon-color);
     cursor: initial;
@@ -476,7 +476,7 @@ body {
   }
 }
 
-.aa-TouchOverlay {
+.aa-DetachedOverlay {
   background: var(--aa-background-color);
   bottom: 0;
   left: 0;
@@ -485,7 +485,7 @@ body {
   position: fixed;
   right: 0;
   top: 0;
-  .aa-TouchFormContainer {
+  .aa-DetachedFormContainer {
     border-bottom: solid 1px var(--aa-selected-color);
     display: flex;
     justify-content: space-between;
@@ -494,7 +494,7 @@ body {
     .aa-Form {
       padding: 0 var(--aa-spacing-half) 0 0;
     }
-    .aa-TouchCancelButton {
+    .aa-DetachedCancelButton {
       background: none;
       border: 0;
       color: inherit;