feat: add no padding theme

sosa-vaadin · yuriy-fix · web-flow · commit fb25bb4c5b45 · 2021-01-26T11:16:36.000+02:00
vaadin/vaadin-dialog#231 Co-authored-by: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
diff --git a/packages/vaadin-dialog/test/visual/no-padding.html b/packages/vaadin-dialog/test/visual/no-padding.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8" />
+  <title>Dialog tests</title>
+  <script>
+    window.polymerSkipLoadingFontRoboto = true;
+  </script>
+</head>
+
+<body style="height: 600px">
+  <vaadin-dialog theme="no-padding" opened>
+    <template>
+      <div>A very simple dialog with no padding</div>
+      <button>OK</button>
+    </template>
+  </vaadin-dialog>
+
+  <script type="module">
+    (async () => {
+      const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+
+      await import('../../theme/' + theme + '/vaadin-dialog.js');
+
+      window.requestAnimationFrame(() => {
+        document.body.dataset.ready = true;
+      });
+    })();
+  </script>
+</body>
diff --git a/packages/vaadin-dialog/test/visual/screens/vaadin-dialog/lumo-no-padding.png b/packages/vaadin-dialog/test/visual/screens/vaadin-dialog/lumo-no-padding.png
diff --git a/packages/vaadin-dialog/test/visual/screens/vaadin-dialog/material-no-padding.png b/packages/vaadin-dialog/test/visual/screens/vaadin-dialog/material-no-padding.png
diff --git a/packages/vaadin-dialog/test/visual/test.js b/packages/vaadin-dialog/test/visual/test.js
@@ -8,5 +8,12 @@ describe('vaadin-dialog', () => {
         .waitForVisible(locator, 15000)
         .assertView(`${theme}-default`, locator);
     });
+
+    it(`${theme}-no-padding`, function () {
+      return this.browser
+        .url(`no-padding.html?theme=${theme}`)
+        .waitForVisible(locator, 15000)
+        .assertView(`${theme}-no-padding`, locator);
+    });
   });
 });
diff --git a/packages/vaadin-dialog/theme/lumo/vaadin-dialog-styles.js b/packages/vaadin-dialog/theme/lumo/vaadin-dialog-styles.js
@@ -28,6 +28,11 @@ registerStyles(
       padding: var(--lumo-space-l);
     }
 
+    /* No padding */
+    :host([theme~='no-padding']) [part='content'] {
+      padding: 0;
+    }
+
     /* Animations */
 
     :host([opening]),
diff --git a/packages/vaadin-dialog/theme/material/vaadin-dialog-styles.js b/packages/vaadin-dialog/theme/material/vaadin-dialog-styles.js
@@ -16,6 +16,11 @@ registerStyles(
     [part='content'] {
       padding: 24px;
     }
+
+    /* No padding */
+    :host([theme~='no-padding']) [part='content'] {
+      padding: 0;
+    }
   `,
   { include: ['material-overlay'], moduleId: 'material-dialog' }
 );
