fix!: change box-sizing to work in form-item

Author: web-padawan

packages/upload/package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
+    "@vaadin/form-layout": "22.0.0-alpha10",
     "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.0"
   }

packages/upload/src/vaadin-upload.js

@@ -68,6 +68,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         :host {
           display: block;
           position: relative;
+          box-sizing: border-box;
         }
 
         :host([hidden]) {

packages/upload/test/visual/lumo/screenshots/upload/baseline/form-item.png

@@ -1,6 +1,8 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-form-item.js';
 import '../../../theme/lumo/vaadin-upload.js';
 
 describe('upload', () => {
@@ -9,7 +11,6 @@ describe('upload', () => {
   beforeEach(() => {
     div = document.createElement('div');
     div.style.padding = '10px';
-    element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
   });
 
   ['ltr', 'rtl'].forEach((dir) => {
@@ -18,6 +19,10 @@ describe('upload', () => {
         document.documentElement.setAttribute('dir', dir);
       });
 
+      beforeEach(() => {
+        element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
+      });
+
       after(() => {
         document.documentElement.removeAttribute('dir');
       });
@@ -42,7 +47,8 @@ describe('upload', () => {
   });
 
   describe('focus', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
+      element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
       element.files = [{ name: 'Don Quixote.pdf' }, { name: 'Hamlet.pdf', progress: 100, complete: true }];
       // To show the start button
       element.files[0].held = true;
@@ -97,11 +103,42 @@ describe('upload', () => {
   });
 
   describe('states', () => {
+    beforeEach(() => {
+      element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
+    });
+
     it('max files reached', async () => {
       element.maxFiles = 1;
       element.files = [{ name: 'Don Quixote.pdf' }];
 
       await visualDiff(div, 'state-max-files-reached');
     });
   });
+
+  describe('form-item', () => {
+    beforeEach(() => {
+      element = fixtureSync(
+        `<vaadin-form-layout>
+          <vaadin-upload></vaadin-upload>
+          <vaadin-form-item>
+            <label slot="label">Description</label>
+            <textarea></textarea>
+          </vaadin-form-item>
+          <vaadin-form-item>
+            <label slot="label">File</label>
+            <vaadin-upload></vaadin-upload>
+          </vaadin-form-item>
+          <vaadin-form-item>
+            <label slot="label">Description</label>
+            <textarea></textarea>
+          </vaadin-form-item>
+        </vaadin-form-layout>`,
+        div
+      );
+    });
+
+    it('form-item', async () => {
+      await visualDiff(div, 'form-item');
+    });
+  });
 });

packages/upload/test/visual/lumo/upload.test.js

@@ -1,6 +1,8 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/form-layout/theme/material/vaadin-form-layout.js';
+import '@vaadin/form-layout/theme/material/vaadin-form-item.js';
 import '../../../theme/material/vaadin-upload.js';
 
 describe('upload', () => {
@@ -9,7 +11,6 @@ describe('upload', () => {
   beforeEach(() => {
     div = document.createElement('div');
     div.style.padding = '10px';
-    element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
   });
 
   ['ltr', 'rtl'].forEach((dir) => {
@@ -18,6 +19,10 @@ describe('upload', () => {
         document.documentElement.setAttribute('dir', dir);
       });
 
+      beforeEach(() => {
+        element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
+      });
+
       after(() => {
         document.documentElement.removeAttribute('dir');
       });
@@ -42,7 +47,8 @@ describe('upload', () => {
   });
 
   describe('focus', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
+      element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
       element.files = [{ name: 'Don Quixote.pdf' }, { name: 'Hamlet.pdf', progress: 100, complete: true }];
       // To show the start button
       element.files[0].held = true;
@@ -97,11 +103,42 @@ describe('upload', () => {
   });
 
   describe('states', () => {
+    beforeEach(() => {
+      element = fixtureSync('<vaadin-upload></vaadin-upload>', div);
+    });
+
     it('max files reached', async () => {
       element.maxFiles = 1;
       element.files = [{ name: 'Don Quixote.pdf' }];
 
       await visualDiff(div, 'state-max-files-reached');
     });
   });
+
+  describe('form-item', () => {
+    beforeEach(() => {
+      element = fixtureSync(
+        `<vaadin-form-layout>
+          <vaadin-upload></vaadin-upload>
+          <vaadin-form-item>
+            <label slot="label">Description</label>
+            <textarea></textarea>
+          </vaadin-form-item>
+          <vaadin-form-item>
+            <label slot="label">File</label>
+            <vaadin-upload></vaadin-upload>
+          </vaadin-form-item>
+          <vaadin-form-item>
+            <label slot="label">Description</label>
+            <textarea></textarea>
+          </vaadin-form-item>
+        </vaadin-form-layout>`,
+        div
+      );
+    });
+
+    it('form-item', async () => {
+      await visualDiff(div, 'form-item');
+    });
+  });
 });