feat: add no-padding theme variant to popover (#7650)

vaadin · Aug 13, 2024 · 1eb6586 · 1eb6586
1 parent 497e10f
commit 1eb6586
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 0 deletions.
diff --git a/packages/popover/test/visual/lumo/popover.test.js b/packages/popover/test/visual/lumo/popover.test.js
@@ -53,4 +53,11 @@ describe('popover', () => {
       await visualDiff(div, `${position}-arrow`);
     });
   });
+
+  it('no-padding', async () => {
+    element.setAttribute('theme', 'no-padding');
+    target.click();
+    await nextRender();
+    await visualDiff(div, 'no-padding');
+  });
 });
diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/no-padding.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/no-padding.png
diff --git a/packages/popover/test/visual/material/popover.test.js b/packages/popover/test/visual/material/popover.test.js
@@ -53,4 +53,11 @@ describe('popover', () => {
       await visualDiff(div, `${position}-arrow`);
     });
   });
+
+  it('no-padding', async () => {
+    element.setAttribute('theme', 'no-padding');
+    target.click();
+    await nextRender();
+    await visualDiff(div, 'no-padding');
+  });
 });
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/no-padding.png b/packages/popover/test/visual/material/screenshots/popover/baseline/no-padding.png
diff --git a/packages/popover/theme/lumo/vaadin-popover-styles.js b/packages/popover/theme/lumo/vaadin-popover-styles.js
@@ -19,6 +19,10 @@ const popoverOverlay = css`
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
   :host([theme~='arrow']) {
     --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
   }

diff --git a/packages/popover/theme/material/vaadin-popover-styles.js b/packages/popover/theme/material/vaadin-popover-styles.js
@@ -16,6 +16,10 @@ const popoverOverlay = css`
     padding: 0.25rem 0.5rem;
   }
 
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
   :host([theme~='arrow']) {
     --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
   }