From 434c56506f866c791553a79d2d3bbf325f8f11a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Mon, 22 Feb 2021 12:59:35 +0100
Subject: [PATCH] fix(js): rename "Reset" button to "Clear"

BREAKING CHANGE
---
 examples/react-renderer/src/Autocomplete.tsx         |  6 +++---
 .../src/{ResetIcon.tsx => ClearIcon.tsx}             |  2 +-
 .../src/__tests__/autocomplete.test.ts               |  2 +-
 .../src/components/{ResetIcon.ts => ClearIcon.ts}    |  2 +-
 packages/autocomplete-js/src/components/index.ts     |  2 +-
 .../autocomplete-js/src/createAutocompleteDom.ts     | 12 ++++++------
 packages/autocomplete-js/src/getDefaultOptions.ts    |  4 ++--
 packages/autocomplete-js/src/render.tsx              |  2 +-
 .../src/types/AutocompleteClassNames.ts              |  2 +-
 .../autocomplete-js/src/types/AutocompleteDom.ts     |  2 +-
 packages/autocomplete-theme-classic/src/theme.scss   |  2 +-
 packages/website/docs/autocomplete-js.md             |  2 +-
 packages/website/docs/creating-a-renderer.md         |  2 +-
 13 files changed, 21 insertions(+), 21 deletions(-)
 rename examples/react-renderer/src/{ResetIcon.tsx => ClearIcon.tsx} (87%)
 rename packages/autocomplete-js/src/components/{ResetIcon.ts => ClearIcon.ts} (93%)

diff --git a/examples/react-renderer/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx
index 850f53655..e7baa4a26 100644
--- a/examples/react-renderer/src/Autocomplete.tsx
+++ b/examples/react-renderer/src/Autocomplete.tsx
@@ -8,7 +8,7 @@ import { Hit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch/lite';
 import React from 'react';
 
-import { ResetIcon } from './ResetIcon';
+import { ClearIcon } from './ClearIcon';
 import { SearchIcon } from './SearchIcon';
 
 const searchClient = algoliasearch(
@@ -126,8 +126,8 @@ export function Autocomplete(
           />
         </div>
         <div className="aa-InputWrapperSuffix">
-          <button className="aa-ResetButton" type="reset">
-            <ResetIcon />
+          <button className="aa-ClearButton" title="Clear" type="reset">
+            <ClearIcon />
           </button>
         </div>
       </form>
diff --git a/examples/react-renderer/src/ResetIcon.tsx b/examples/react-renderer/src/ClearIcon.tsx
similarity index 87%
rename from examples/react-renderer/src/ResetIcon.tsx
rename to examples/react-renderer/src/ClearIcon.tsx
index 9f129f207..854f6d213 100644
--- a/examples/react-renderer/src/ResetIcon.tsx
+++ b/examples/react-renderer/src/ClearIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function ResetIcon(props: React.SVGProps<SVGSVGElement>) {
+export function ClearIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="20"
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index 3f9586381..2636a01a7 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -126,7 +126,7 @@ describe('autocomplete-js', () => {
               class="aa-InputWrapperSuffix"
             >
               <button
-                class="aa-ResetButton"
+                class="aa-ClearButton"
                 hidden=""
                 type="reset"
               >
diff --git a/packages/autocomplete-js/src/components/ResetIcon.ts b/packages/autocomplete-js/src/components/ClearIcon.ts
similarity index 93%
rename from packages/autocomplete-js/src/components/ResetIcon.ts
rename to packages/autocomplete-js/src/components/ClearIcon.ts
index 2c291afdf..aea0bfda1 100644
--- a/packages/autocomplete-js/src/components/ResetIcon.ts
+++ b/packages/autocomplete-js/src/components/ClearIcon.ts
@@ -1,6 +1,6 @@
 import { Component } from '../types/Component';
 
-export const ResetIcon: Component<{}, SVGSVGElement> = () => {
+export const ClearIcon: Component<{}, SVGSVGElement> = () => {
   const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   element.setAttribute('class', 'aa-ResetIcon');
   element.setAttribute('viewBox', '0 0 24 24');
diff --git a/packages/autocomplete-js/src/components/index.ts b/packages/autocomplete-js/src/components/index.ts
index eec89f91e..7bc3d23a0 100644
--- a/packages/autocomplete-js/src/components/index.ts
+++ b/packages/autocomplete-js/src/components/index.ts
@@ -1,4 +1,4 @@
+export * from './ClearIcon';
 export * from './Input';
 export * from './LoadingIcon';
-export * from './ResetIcon';
 export * from './SearchIcon';
diff --git a/packages/autocomplete-js/src/createAutocompleteDom.ts b/packages/autocomplete-js/src/createAutocompleteDom.ts
index a7af94de2..fc027fd1b 100644
--- a/packages/autocomplete-js/src/createAutocompleteDom.ts
+++ b/packages/autocomplete-js/src/createAutocompleteDom.ts
@@ -4,7 +4,7 @@ import {
   BaseItem,
 } from '@algolia/autocomplete-core';
 
-import { Input, LoadingIcon, ResetIcon, SearchIcon } from './components';
+import { ClearIcon, Input, LoadingIcon, SearchIcon } from './components';
 import { createDomElement } from './createDomElement';
 import {
   AutocompleteClassNames,
@@ -83,10 +83,10 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     children: [submitButton],
     ...labelProps,
   });
-  const resetButton = createDomElement('button', {
-    class: classNames.resetButton,
+  const clearButton = createDomElement('button', {
+    class: classNames.clearButton,
     type: 'reset',
-    children: [ResetIcon({})],
+    children: [ClearIcon({})],
   });
   const loadingIndicator = createDomElement('div', {
     class: classNames.loadingIndicator,
@@ -113,7 +113,7 @@ export function createAutocompleteDom<TItem extends BaseItem>({
   });
   const inputWrapperSuffix = createDomElement('div', {
     class: classNames.inputWrapperSuffix,
-    children: [resetButton],
+    children: [clearButton],
   });
   const inputWrapper = createDomElement('div', {
     class: classNames.inputWrapper,
@@ -198,7 +198,7 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     form,
     label,
     submitButton,
-    resetButton,
+    clearButton,
     loadingIndicator,
     panel,
   };
diff --git a/packages/autocomplete-js/src/getDefaultOptions.ts b/packages/autocomplete-js/src/getDefaultOptions.ts
index cdebf6eea..2de27006a 100644
--- a/packages/autocomplete-js/src/getDefaultOptions.ts
+++ b/packages/autocomplete-js/src/getDefaultOptions.ts
@@ -15,9 +15,10 @@ import {
 import { getHTMLElement, mergeClassNames } from './utils';
 
 const defaultClassNames: AutocompleteClassNames = {
+  clearButton: 'aa-ClearButton',
   detachedCancelButton: 'aa-DetachedCancelButton',
-  detachedFormContainer: 'aa-DetachedFormContainer',
   detachedContainer: 'aa-DetachedContainer',
+  detachedFormContainer: 'aa-DetachedFormContainer',
   detachedOverlay: 'aa-DetachedOverlay',
   detachedSearchButton: 'aa-DetachedSearchButton',
   detachedSearchButtonIcon: 'aa-DetachedSearchButtonIcon',
@@ -33,7 +34,6 @@ const defaultClassNames: AutocompleteClassNames = {
   loadingIndicator: 'aa-LoadingIndicator',
   panel: 'aa-Panel',
   panelLayout: 'aa-PanelLayout',
-  resetButton: 'aa-ResetButton',
   root: 'aa-Autocomplete',
   source: 'aa-Source',
   sourceFooter: 'aa-SourceFooter',
diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
index 4d053e136..69ee5af2a 100644
--- a/packages/autocomplete-js/src/render.tsx
+++ b/packages/autocomplete-js/src/render.tsx
@@ -54,7 +54,7 @@ export function renderSearchBox<TItem extends BaseItem>({
   );
   setProperties(dom.label, { hidden: state.status === 'stalled' });
   setProperties(dom.loadingIndicator, { hidden: state.status !== 'stalled' });
-  setProperties(dom.resetButton, { hidden: !state.query });
+  setProperties(dom.clearButton, { hidden: !state.query });
 }
 
 export function renderPanel<TItem extends BaseItem>(
diff --git a/packages/autocomplete-js/src/types/AutocompleteClassNames.ts b/packages/autocomplete-js/src/types/AutocompleteClassNames.ts
index d22b09a04..1d19ef727 100644
--- a/packages/autocomplete-js/src/types/AutocompleteClassNames.ts
+++ b/packages/autocomplete-js/src/types/AutocompleteClassNames.ts
@@ -17,7 +17,7 @@ export type AutocompleteClassNames = {
   loadingIndicator: string;
   panel: string;
   panelLayout: string;
-  resetButton: string;
+  clearButton: string;
   root: string;
   source: string;
   sourceFooter: string;
diff --git a/packages/autocomplete-js/src/types/AutocompleteDom.ts b/packages/autocomplete-js/src/types/AutocompleteDom.ts
index cfcb6f4e3..b398df195 100644
--- a/packages/autocomplete-js/src/types/AutocompleteDom.ts
+++ b/packages/autocomplete-js/src/types/AutocompleteDom.ts
@@ -5,7 +5,7 @@ export type AutocompleteDom = {
   form: HTMLFormElement;
   label: HTMLLabelElement;
   submitButton: HTMLButtonElement;
-  resetButton: HTMLButtonElement;
+  clearButton: HTMLButtonElement;
   loadingIndicator: HTMLDivElement;
   panel: HTMLDivElement;
   detachedContainer: HTMLDivElement;
diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
index 2a67505d6..e34a936d3 100644
--- a/packages/autocomplete-theme-classic/src/theme.scss
+++ b/packages/autocomplete-theme-classic/src/theme.scss
@@ -141,7 +141,7 @@ body {
       display: flex;
       order: 4;
       // accelerator to clear the query
-      .aa-ResetButton {
+      .aa-ClearButton {
         align-items: center;
         background: none;
         border: 0;
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
index a4eaabbf7..6f6c8154c 100644
--- a/packages/website/docs/autocomplete-js.md
+++ b/packages/website/docs/autocomplete-js.md
@@ -114,7 +114,7 @@ type ClassNames = Partial<{
   loadingIndicator: string;
   panel: string;
   panelLayout: string;
-  resetButton: string;
+  clearButton: string;
   root: string;
   source: string;
   sourceFooter: string;
diff --git a/packages/website/docs/creating-a-renderer.md b/packages/website/docs/creating-a-renderer.md
index 3bd387eb4..ced548b8d 100644
--- a/packages/website/docs/creating-a-renderer.md
+++ b/packages/website/docs/creating-a-renderer.md
@@ -218,7 +218,7 @@ function Autocomplete() {
           />
         </div>
         <div className="aa-InputWrapperSuffix">
-          <button className="aa-ResetButton" type="reset">
+          <button className="aa-ClearButton" title="Clear" type="reset">
             ｘ
           </button>
         </div>