refactor!: rename clear button to remove button (#2809)

vaadin · Oct 11, 2021 · a9f301b · a9f301b
1 parent 3ee2bcb
commit a9f301b
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 18 deletions.
diff --git a/packages/upload/src/vaadin-upload-file.js b/packages/upload/src/vaadin-upload-file.js
@@ -28,7 +28,7 @@ import './vaadin-upload-icons.js';
  * `commands` | Container for file command icons
  * `start-button` | Start file upload button
  * `retry-button` | Retry file upload button
- * `clear-button` | Clear file button
+ * `remove-button` | Remove file button
  * `progress`| Progress bar
  *
  * The following state attributes are available for styling:
@@ -100,10 +100,10 @@ class UploadFile extends ThemableMixin(PolymerElement) {
           ></button>
           <button
             type="button"
-            part="clear-button"
+            part="remove-button"
             file-event="file-abort"
             on-click="_fireFileEvent"
-            aria-label$="[[i18n.file.clear]]"
+            aria-label$="[[i18n.file.remove]]"
             aria-describedby="name"
           ></button>
         </div>

diff --git a/packages/upload/src/vaadin-upload.d.ts b/packages/upload/src/vaadin-upload.d.ts
@@ -371,7 +371,7 @@ declare class Upload extends ThemableMixin(ElementMixin(HTMLElement)) {
    *   file: {
    *     retry: 'Retry',
    *     start: 'Start',
-   *     clear: 'Clear'
+   *     remove: 'Remove'
    *   },
    *   units: {
    *     size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],

diff --git a/packages/upload/src/vaadin-upload.js b/packages/upload/src/vaadin-upload.js
@@ -369,7 +369,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        *   file: {
        *     retry: 'Retry',
        *     start: 'Start',
-       *     clear: 'Clear'
+       *     remove: 'Remove'
        *   },
        *   units: {
        *     size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
@@ -424,7 +424,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
             file: {
               retry: 'Retry',
               start: 'Start',
-              clear: 'Clear'
+              remove: 'Remove'
             },
             units: {
               size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

diff --git a/packages/upload/test/a11y.test.js b/packages/upload/test/a11y.test.js
@@ -34,7 +34,7 @@ describe('a11y', () => {
         file: {
           start: 'Start',
           retry: 'Retry',
-          clear: 'clear'
+          remove: 'Remove'
         }
       };
       uploadFileElement.i18n = i18n;
@@ -86,9 +86,9 @@ describe('a11y', () => {
       });
     });
 
-    describe('clear button', () => {
+    describe('remove button', () => {
       beforeEach(() => {
-        button = uploadFileElement.shadowRoot.querySelector('[part=clear-button]');
+        button = uploadFileElement.shadowRoot.querySelector('[part=remove-button]');
       });
 
       it('should be a <button> element', () => {
@@ -100,7 +100,7 @@ describe('a11y', () => {
       });
 
       it('should have aria-label attribute', () => {
-        expect(button.getAttribute('aria-label')).to.equal(i18n.file.clear);
+        expect(button.getAttribute('aria-label')).to.equal(i18n.file.remove);
       });
     });
   });

diff --git a/packages/upload/test/file-list.test.js b/packages/upload/test/file-list.test.js
@@ -35,13 +35,13 @@ describe('file list', () => {
     files.forEach((file) => upload._addFile(file));
     await nextFrame();
 
-    const clearButton1 = getFileListItems(upload)[0].shadowRoot.querySelector('[part="clear-button"]');
-    clearButton1.click();
+    const removeButton1 = getFileListItems(upload)[0].shadowRoot.querySelector('[part="remove-button"]');
+    removeButton1.click();
     await nextFrame();
     expect(getFileListItems(upload).length).to.equal(1);
 
-    const clearButton2 = getFileListItems(upload)[0].shadowRoot.querySelector('[part="clear-button"]');
-    clearButton2.click();
+    const removeButton2 = getFileListItems(upload)[0].shadowRoot.querySelector('[part="remove-button"]');
+    removeButton2.click();
     await nextFrame();
     expect(getFileListItems(upload).length).to.equal(0);
   });

diff --git a/packages/upload/test/keyboard-navigation.test.js b/packages/upload/test/keyboard-navigation.test.js
@@ -80,7 +80,7 @@ describe('keyboard navigation', () => {
     });
 
     it('should focus on the clear button', async () => {
-      const removeButton = fileElement.shadowRoot.querySelector('[part=clear-button]');
+      const removeButton = fileElement.shadowRoot.querySelector('[part=remove-button]');
 
       await repeatTab(5);
 

diff --git a/packages/upload/theme/lumo/vaadin-upload-styles.js b/packages/upload/theme/lumo/vaadin-upload-styles.js
@@ -159,7 +159,7 @@ const uploadFile = css`
     content: var(--lumo-icons-reload);
   }
 
-  [part='clear-button']::before {
+  [part='remove-button']::before {
     content: var(--lumo-icons-cross);
   }
 

diff --git a/packages/upload/theme/material/vaadin-upload-styles.js b/packages/upload/theme/material/vaadin-upload-styles.js
@@ -168,7 +168,7 @@ registerStyles(
       outline: none;
     }
 
-    [part='clear-button'] {
+    [part='remove-button'] {
       margin-right: -8px;
     }
 
@@ -194,7 +194,7 @@ registerStyles(
       content: var(--material-icons-reload);
     }
 
-    [part='clear-button']::before {
+    [part='remove-button']::before {
       content: var(--material-icons-clear);
     }