fix(js): rename "Reset" button to "Clear"

BREAKING CHANGE
algolia · Feb 22, 2021 · 434c565 · bodinsamuel · Mar 1, 2021 · bodinsamuel
1 parent 706939c
commit 434c565
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 21 deletions.
diff --git 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 → examples/react-renderer/src/ClearIcon.tsx b/examples/react-renderer/src/ResetIcon.tsx → 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
@@ -126,7 +126,7 @@ describe('autocomplete-js', () => {
               class="aa-InputWrapperSuffix"
             >
               <button
-                class="aa-ResetButton"
+                class="aa-ClearButton"
                 hidden=""
                 type="reset"
               >

diff --git a/...tocomplete-js/src/components/ResetIcon.ts → ...tocomplete-js/src/components/ClearIcon.ts b/...tocomplete-js/src/components/ResetIcon.ts → ...tocomplete-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>