diff --git a/packages/popover/test/visual/lumo/popover.test.js b/packages/popover/test/visual/lumo/popover.test.js new file mode 100644 index 0000000000..ba40dac269 --- /dev/null +++ b/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(''); + element.renderer = (root) => { + root.textContent = 'Content'; + }; + div = fixtureSync(` +
+
+
+ `); + 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); + }); + }); +}); diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end.png new file mode 100644 index 0000000000..e6303c111d Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start.png new file mode 100644 index 0000000000..17e4fbbe4d Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom.png new file mode 100644 index 0000000000..6f0d239c06 Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom.png new file mode 100644 index 0000000000..08a474be4f Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top.png new file mode 100644 index 0000000000..ba011fef8a Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/end.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end.png new file mode 100644 index 0000000000..055050e4da Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom.png new file mode 100644 index 0000000000..182e56f58a Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top.png new file mode 100644 index 0000000000..5a181b2d31 Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/start.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start.png new file mode 100644 index 0000000000..f745f3db8e Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end.png new file mode 100644 index 0000000000..dd3d9cb567 Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start.png new file mode 100644 index 0000000000..961c4dcdbc Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start.png differ diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/top.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top.png new file mode 100644 index 0000000000..e604c51479 Binary files /dev/null and b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top.png differ diff --git a/packages/popover/test/visual/material/popover.test.js b/packages/popover/test/visual/material/popover.test.js new file mode 100644 index 0000000000..4fbdb1c67a --- /dev/null +++ b/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(''); + element.renderer = (root) => { + root.textContent = 'Content'; + }; + div = fixtureSync(` +
+
+
+ `); + 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); + }); + }); +}); diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end.png new file mode 100644 index 0000000000..90d74d7fe5 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start.png new file mode 100644 index 0000000000..e5b17304d6 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom.png new file mode 100644 index 0000000000..03c0c85b1f Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom.png new file mode 100644 index 0000000000..d9e44c0365 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-top.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-top.png new file mode 100644 index 0000000000..3e06e9729f Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/end-top.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end.png new file mode 100644 index 0000000000..6e16fa7d93 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/end.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom.png new file mode 100644 index 0000000000..3dba516006 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-top.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-top.png new file mode 100644 index 0000000000..e16a9a62aa Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/start-top.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start.png new file mode 100644 index 0000000000..7626ef4ded Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/start.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-end.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-end.png new file mode 100644 index 0000000000..2a128ef251 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/top-end.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-start.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-start.png new file mode 100644 index 0000000000..3bc79ee079 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/top-start.png differ diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top.png new file mode 100644 index 0000000000..74dc4e2718 Binary files /dev/null and b/packages/popover/test/visual/material/screenshots/popover/baseline/top.png differ diff --git a/packages/popover/theme/lumo/vaadin-popover-styles.js b/packages/popover/theme/lumo/vaadin-popover-styles.js index e69de29bb2..0d5ec6afc0 100644 --- a/packages/popover/theme/lumo/vaadin-popover-styles.js +++ b/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' }); diff --git a/packages/popover/theme/material/vaadin-popover-styles.js b/packages/popover/theme/material/vaadin-popover-styles.js index e69de29bb2..54b5a294c7 100644 --- a/packages/popover/theme/material/vaadin-popover-styles.js +++ b/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' });