fix: display drop label as disabled when max files reached (#379)

cherry pick of: vaadin/web-components#2558 fixes warranty issue: vaadin/web-components#2431
vaadin · Sep 20, 2021 · f28c07e · f28c07e
1 parent 087ba97
commit f28c07e
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 0 deletions.
diff --git a/src/vaadin-upload.html b/src/vaadin-upload.html
@@ -89,6 +89,7 @@
        * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
        * `dragover` | A file is being dragged over the element | `:host`
        * `dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`
+       * `max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
        *
@@ -231,6 +232,7 @@
               value: false,
               notify: true,
               readOnly: true,
+              reflectToAttribute: true,
               computed: '_maxFilesAdded(maxFiles, files.length)'
             },
 

diff --git a/test/adding-files.html b/test/adding-files.html
@@ -149,6 +149,15 @@
           expect(clickSpy).not.to.be.called;
         });
 
+        it('should set max-files-reached style attribute when max files added', () => {
+          upload.maxFiles = 0;
+
+          expect(upload.hasAttribute('max-files-reached')).to.be.true;
+        });
+
+        it('should not set max-files-reached style attribute when less than max files added', () => {
+          expect(upload.hasAttribute('max-files-reached')).to.be.false;
+        });
       });
 
       describeIf(!touchDevice, 'Dropping file', () => {

diff --git a/test/visual/screens/vaadin-upload/state-tests-lumo/vaadin-upload/chrome.png b/test/visual/screens/vaadin-upload/state-tests-lumo/vaadin-upload/chrome.png
diff --git a/test/visual/screens/vaadin-upload/state-tests-lumo/vaadin-upload/firefox.png b/test/visual/screens/vaadin-upload/state-tests-lumo/vaadin-upload/firefox.png
diff --git a/test/visual/screens/vaadin-upload/state-tests-material/vaadin-upload/chrome.png b/test/visual/screens/vaadin-upload/state-tests-material/vaadin-upload/chrome.png
diff --git a/test/visual/screens/vaadin-upload/state-tests-material/vaadin-upload/firefox.png b/test/visual/screens/vaadin-upload/state-tests-material/vaadin-upload/firefox.png
diff --git a/test/visual/state.html b/test/visual/state.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write('<link rel="import" href="../../theme/' + theme + '/vaadin-upload.html">');
+  </script>
+</head>
+
+<body>
+
+  <div id="state-tests" style="display: inline-block">
+    <vaadin-upload id="max-files-reached">
+    </vaadin-upload>
+  </div>
+
+  <script>
+    window.addEventListener('WebComponentsReady', () => {
+      const stateMaxFilesReachedUpload = document.getElementById('max-files-reached');
+      stateMaxFilesReachedUpload.maxFiles = 1;
+      stateMaxFilesReachedUpload.files = [{name: 'Don Quixote.pdf'}];
+    });
+  </script>
+
+</body>
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -23,4 +23,12 @@ gemini.suite('vaadin-upload', function(rootSuite) {
     });
   });
 
+  ['lumo', 'material'].forEach(theme => {
+    gemini.suite(`state-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`/state.html?theme=${theme}`)
+        .setCaptureElements('#state-tests')
+        .capture(`vaadin-upload`);
+    });
+  });
 });
diff --git a/theme/lumo/vaadin-upload-styles.html b/theme/lumo/vaadin-upload-styles.html
@@ -48,6 +48,10 @@
         color: var(--lumo-primary-text-color);
       }
 
+      :host([max-files-reached]) [part='drop-label'] {
+        color: var(--lumo-disabled-text-color);
+      }
+
       [part="drop-label-icon"] {
         display: inline-block;
       }

diff --git a/theme/material/vaadin-upload-styles.html b/theme/material/vaadin-upload-styles.html
@@ -51,6 +51,10 @@
         color: var(--material-primary-text-color);
       }
 
+      :host([max-files-reached]) [part='drop-label'] {
+        color: var(--material-disabled-text-color);
+      }
+
       [part="drop-label-icon"] {
         display: inline-block;
         margin-right: 8px;