experiment: add context-menu base styles and visual tests (#9642)

anezthes · jouni · web-flow · commit c29bfc3e8206 · 2025-07-08T12:16:16.000+03:00
Co-authored-by: Jouni Koivuviita &lt;jouni@vaadin.com&gt;
diff --git a/packages/context-menu/package.json b/packages/context-menu/package.json
@@ -23,6 +23,8 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.d.ts b/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const contextMenuItemStyles: CSSResult;
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.js b/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.js
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
+
+const menuItemStyles = css`
+  :host::after {
+    background: var(--vaadin-color-subtle);
+    content: '';
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-chevron-down);
+    rotate: -90deg;
+    visibility: hidden;
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  :host([dir='rtl'])::after {
+    rotate: 90deg;
+  }
+
+  /* TODO would be nice to only reserve the space for these if
+    one or mote items in the list is checkable or has child items */
+  :host([aria-haspopup='true'])::after,
+  :host([menu-item-checked]) [part='checkmark'] {
+    visibility: visible;
+  }
+`;
+
+export const contextMenuItemStyles = [itemStyles, menuItemStyles];
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-item-core-styles.d.ts b/packages/context-menu/src/styles/vaadin-context-menu-item-core-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const contextMenuItemStyles: CSSResult;
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-item-core-styles.js b/packages/context-menu/src/styles/vaadin-context-menu-item-core-styles.js
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
+
+export const contextMenuItemStyles = [itemStyles];
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-overlay-base-styles.d.ts b/packages/context-menu/src/styles/vaadin-context-menu-overlay-base-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const contextMenuOverlayStyles: CSSResult;
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-overlay-base-styles.js b/packages/context-menu/src/styles/vaadin-context-menu-overlay-base-styles.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+import { menuOverlayStyles } from './vaadin-menu-overlay-base-styles.js';
+
+export const contextMenuOverlayStyles = [overlayStyles, menuOverlayStyles];
diff --git a/packages/context-menu/src/styles/vaadin-menu-overlay-base-styles.d.ts b/packages/context-menu/src/styles/vaadin-menu-overlay-base-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const menuOverlayStyles: CSSResult;
diff --git a/packages/context-menu/src/styles/vaadin-menu-overlay-base-styles.js b/packages/context-menu/src/styles/vaadin-menu-overlay-base-styles.js
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const menuOverlayStyles = css`
+  :host {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  :host([right-aligned]),
+  :host([end-aligned]) {
+    align-items: flex-end;
+  }
+
+  :host([bottom-aligned]) {
+    justify-content: flex-end;
+  }
+
+  [part='content'] {
+    padding: var(--vaadin-item-overlay-padding, 4px);
+  }
+
+  /* TODO keyboard focus becomes visible even when navigating the menu with the mouse */
+  [part='overlay']:focus-visible {
+    outline: none;
+  }
+`;
diff --git a/packages/context-menu/src/vaadin-context-menu-item.js b/packages/context-menu/src/vaadin-context-menu-item.js
@@ -7,10 +7,10 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
 import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { contextMenuItemStyles } from './styles/vaadin-context-menu-item-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
@@ -28,7 +28,7 @@ class ContextMenuItem extends ItemMixin(ThemableMixin(DirMixin(LumoInjectionMixi
   }
 
   static get styles() {
-    return itemStyles;
+    return contextMenuItemStyles;
   }
 
   /** @protected */
diff --git a/packages/context-menu/test/visual/base/context-menu.test.js b/packages/context-menu/test/visual/base/context-menu.test.js
@@ -0,0 +1,90 @@
+import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../../not-animated-styles.js';
+import '../../../src/vaadin-context-menu.js';
+import { openSubMenus } from '../../helpers.js';
+
+describe('context-menu', () => {
+  let element;
+
+  ['ltr', 'rtl'].forEach((dir) => {
+    const contextmenu = (target) => {
+      const domRect = target.getBoundingClientRect();
+      const clientX = dir === 'rtl' ? domRect.right : domRect.left;
+      const e = new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY: domRect.y,
+      });
+
+      target.listenOn.dispatchEvent(e);
+    };
+
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
+
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
+
+      describe('basic', () => {
+        beforeEach(async () => {
+          element = fixtureSync(`
+            <vaadin-context-menu>
+              <div style="padding: 10px">Target</div>
+            </vaadin-context-menu>
+          `);
+          element.items = [{ text: 'Item 1' }, { text: 'Item 2' }];
+          await nextUpdate(element);
+        });
+
+        it('basic', async () => {
+          contextmenu(element);
+          await nextRender();
+          await visualDiff(document.body, `${dir}-basic`);
+        });
+      });
+
+      describe('nested', () => {
+        beforeEach(async () => {
+          element = fixtureSync(`
+            <vaadin-context-menu>
+              <div style="padding: 10px">Target</div>
+            </vaadin-context-menu>
+          `);
+          await nextUpdate(element);
+        });
+
+        it('nested', async () => {
+          element.items = [
+            { text: 'Menu Item 1' },
+            { component: 'hr' },
+            {
+              text: 'Menu Item 2',
+              children: [
+                { text: 'Menu Item 2-1' },
+                {
+                  text: 'Menu Item 2-2',
+                  children: [
+                    { text: 'Menu Item 2-2-1', checked: true },
+                    { text: 'Menu Item 2-2-2', disabled: true },
+                    { component: 'hr' },
+                    { text: 'Menu Item 2-2-3' },
+                  ],
+                },
+              ],
+            },
+            { text: 'Menu Item 3', disabled: true },
+          ];
+          contextmenu(element);
+          await openSubMenus(element);
+          await nextRender();
+          await visualDiff(document.body, `${dir}-nested`);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/ltr-basic.png b/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/ltr-basic.png
diff --git a/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/ltr-nested.png b/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/ltr-nested.png
diff --git a/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/rtl-basic.png b/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/rtl-basic.png
diff --git a/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/rtl-nested.png b/packages/context-menu/test/visual/base/screenshots/context-menu/baseline/rtl-nested.png
diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js
@@ -67,14 +67,13 @@ export const overlayStyles = css`
     z-index: -1;
   }
 
+  [part='overlay']:focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
   @media (forced-colors: active) {
     [part='overlay'] {
       border: 3px solid;
     }
-
-    [part='overlay']:focus-visible {
-      outline: var(--vaadin-focus-ring-width) solid;
-      outline-offset: 1px;
-    }
   }
 `;
