feat: add popover Lumo and Material theme and visual tests (#7411)

packages/popover/test/visual/lumo/popover.test.js

@@ -0,0 +1,47 @@
+import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/vaadin-lumo-styles/test/autoload.js';
+import '../../not-animated-styles.js';
+import '../../../theme/lumo/vaadin-popover.js';
+
+describe('popover', () => {
+  let div, target, element;
+
+  beforeEach(async () => {
+    element = fixtureSync('<vaadin-popover></vaadin-popover>');
+    element.renderer = (root) => {
+      root.textContent = 'Content';
+    };
+    div = fixtureSync(`
+      <div style="display: flex; width: 300px; height: 300px; justify-content: center; align-items: center">
+        <div style="width: 100px; height: 100px; outline: 1px solid red;"></div>
+      </div>
+    `);
+    target = div.firstElementChild;
+    element.target = target;
+    await nextRender();
+  });
+
+  [
+    'top-start',
+    'top',
+    'top-end',
+    'bottom-start',
+    'bottom',
+    'bottom-end',
+    'start-top',
+    'start',
+    'start-bottom',
+    'end-top',
+    'end',
+    'end-bottom',
+  ].forEach((position) => {
+    it(position, async () => {
+      element.position = position;
+      await nextUpdate(element);
+      target.click();
+      await nextRender();
+      await visualDiff(div, position);
+    });
+  });
+});

packages/popover/test/visual/material/popover.test.js

@@ -0,0 +1,47 @@
+import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/vaadin-lumo-styles/test/autoload.js';
+import '../../not-animated-styles.js';
+import '../../../theme/material/vaadin-popover.js';
+
+describe('popover', () => {
+  let div, target, element;
+
+  beforeEach(async () => {
+    element = fixtureSync('<vaadin-popover></vaadin-popover>');
+    element.renderer = (root) => {
+      root.textContent = 'Content';
+    };
+    div = fixtureSync(`
+      <div style="display: flex; width: 300px; height: 300px; justify-content: center; align-items: center">
+        <div style="width: 100px; height: 100px; outline: 1px solid red;"></div>
+      </div>
+    `);
+    target = div.firstElementChild;
+    element.target = target;
+    await nextRender();
+  });
+
+  [
+    'top-start',
+    'top',
+    'top-end',
+    'bottom-start',
+    'bottom',
+    'bottom-end',
+    'start-top',
+    'start',
+    'start-bottom',
+    'end-top',
+    'end',
+    'end-bottom',
+  ].forEach((position) => {
+    it(position, async () => {
+      element.position = position;
+      await nextUpdate(element);
+      target.click();
+      await nextRender();
+      await visualDiff(div, position);
+    });
+  });
+});

packages/popover/theme/lumo/vaadin-popover-styles.js

@@ -0,0 +1,20 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const popoverOverlay = css`
+  :host {
+    --vaadin-popover-offset-top: var(--lumo-space-xs);
+    --vaadin-popover-offset-bottom: var(--lumo-space-xs);
+    --vaadin-popover-offset-start: var(--lumo-space-xs);
+    --vaadin-popover-offset-end: var(--lumo-space-xs);
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs) var(--lumo-space-s);
+  }
+`;
+
+registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });

packages/popover/theme/material/vaadin-popover-styles.js

@@ -0,0 +1,17 @@
+import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const popoverOverlay = css`
+  :host {
+    --vaadin-popover-offset-top: 0.25rem;
+    --vaadin-popover-offset-bottom: 0.25rem;
+    --vaadin-popover-offset-start: 0.25rem;
+    --vaadin-popover-offset-end: 0.25rem;
+  }
+
+  [part='content'] {
+    padding: 0.25rem 0.5rem;
+  }
+`;
+
+registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'material-popover-overlay' });