refactor!: update menu-bar to use vaadin-menu-bar-item

vaadin · Jan 23, 2023 · 388f058 · 388f058
1 parent 096f4b8
commit 388f058
Show file tree

Hide file tree

Showing 23 changed files with 203 additions and 180 deletions.
diff --git a/packages/context-menu/src/vaadin-contextmenu-items-mixin.js b/packages/context-menu/src/vaadin-contextmenu-items-mixin.js
@@ -181,7 +181,7 @@ export const ItemsMixin = (superClass) =>
         if (item.component instanceof HTMLElement) {
           component = item.component;
         } else {
-          component = document.createElement(item.component || 'vaadin-context-menu-item');
+          component = document.createElement(item.component || `${this._tagNamePrefix}-item`);
         }
 
         if (component instanceof Item) {
@@ -306,7 +306,7 @@ export const ItemsMixin = (superClass) =>
         });
         const openSubMenu = (
           e,
-          itemElement = e.composedPath().find((e) => e.localName === 'vaadin-context-menu-item'),
+          itemElement = e.composedPath().find((e) => e.localName === `${this._tagNamePrefix}-item`),
         ) => {
           // Delay enabling the mouseover listener to avoid it from triggering on parent menu open
           if (!this.__openListenerActive) {

diff --git a/packages/context-menu/theme/lumo/vaadin-context-menu-item-styles.js b/packages/context-menu/theme/lumo/vaadin-context-menu-item-styles.js
@@ -0,0 +1,45 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const contextMenuItem = css`
+  /* :hover needed to workaround https://github.com/vaadin/web-components/issues/3133 */
+  :host(:hover) {
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([role='menuitem'][menu-item-checked]) [part='checkmark']::before {
+    opacity: 1;
+  }
+
+  :host([aria-haspopup='true'])::after {
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-xs);
+    content: var(--lumo-icons-angle-right);
+    color: var(--lumo-tertiary-text-color);
+  }
+
+  :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
+    margin-right: calc(var(--lumo-space-m) * -1);
+    padding-left: var(--lumo-space-m);
+  }
+
+  :host([expanded]) {
+    background-color: var(--lumo-primary-color-10pct);
+  }
+
+  /* RTL styles */
+  :host([dir='rtl'][aria-haspopup='true'])::after {
+    content: var(--lumo-icons-angle-left);
+    margin-left: calc(var(--lumo-space-m) * -1);
+    padding-right: var(--lumo-space-m);
+  }
+`;
+
+registerStyles('vaadin-context-menu-item', contextMenuItem, { moduleId: 'lumo-context-menu-item' });
+
+export { contextMenuItem };
diff --git a/packages/context-menu/theme/lumo/vaadin-context-menu-styles.js b/packages/context-menu/theme/lumo/vaadin-context-menu-styles.js
@@ -1,9 +1,5 @@
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
 import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -33,43 +29,3 @@ const contextMenuOverlay = css`
 registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
   moduleId: 'lumo-context-menu-overlay',
 });
-
-registerStyles(
-  'vaadin-context-menu-item',
-  css`
-    /* :hover needed to workaround https://github.com/vaadin/web-components/issues/3133 */
-    :host(:hover) {
-      user-select: none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
-    }
-
-    :host([role='menuitem'][menu-item-checked]) [part='checkmark']::before {
-      opacity: 1;
-    }
-
-    :host([aria-haspopup='true'])::after {
-      font-family: lumo-icons;
-      font-size: var(--lumo-icon-size-xs);
-      content: var(--lumo-icons-angle-right);
-      color: var(--lumo-tertiary-text-color);
-    }
-
-    :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
-      margin-right: calc(var(--lumo-space-m) * -1);
-      padding-left: var(--lumo-space-m);
-    }
-
-    :host([expanded]) {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
-    /* RTL styles */
-    :host([dir='rtl'][aria-haspopup='true'])::after {
-      content: var(--lumo-icons-angle-left);
-      margin-left: calc(var(--lumo-space-m) * -1);
-      padding-right: var(--lumo-space-m);
-    }
-  `,
-  { moduleId: 'lumo-context-menu-item' },
-);
diff --git a/packages/context-menu/theme/lumo/vaadin-context-menu.js b/packages/context-menu/theme/lumo/vaadin-context-menu.js
@@ -1,3 +1,4 @@
+import './vaadin-context-menu-item-styles.js';
 import './vaadin-context-menu-list-box-styles.js';
 import './vaadin-context-menu-styles.js';
 import '@vaadin/item/theme/lumo/vaadin-item.js';

diff --git a/packages/context-menu/theme/material/vaadin-context-menu-item-styles.js b/packages/context-menu/theme/material/vaadin-context-menu-item-styles.js
@@ -0,0 +1,35 @@
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const contextMenuItem = css`
+  :host([aria-haspopup='true'])::after {
+    font-family: material-icons;
+    font-size: var(--material-icon-font-size);
+  }
+
+  :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
+    content: var(--material-icons-chevron-right);
+    padding-left: 9px;
+    margin-right: -9px;
+  }
+
+  :host([dir='rtl'][aria-haspopup='true'])::after {
+    content: var(--material-icons-chevron-left);
+    padding-right: 9px;
+    margin-left: -9px;
+  }
+
+  :host([menu-item-checked]) [part='checkmark']::before {
+    content: var(--material-icons-check);
+  }
+
+  :host([expanded]) {
+    background-color: var(--material-secondary-background-color);
+  }
+`;
+
+registerStyles('vaadin-context-menu-item', contextMenuItem, { moduleId: 'material-context-menu-item' });
+
+export { contextMenuItem };
diff --git a/packages/context-menu/theme/material/vaadin-context-menu-styles.js b/packages/context-menu/theme/material/vaadin-context-menu-styles.js
@@ -1,6 +1,3 @@
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
 import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -14,34 +11,3 @@ const contextMenuOverlay = css`
 registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
   moduleId: 'material-context-menu-overlay',
 });
-
-registerStyles(
-  'vaadin-context-menu-item',
-  css`
-    :host([aria-haspopup='true'])::after {
-      font-family: material-icons;
-      font-size: var(--material-icon-font-size);
-    }
-
-    :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
-      content: var(--material-icons-chevron-right);
-      padding-left: 9px;
-      margin-right: -9px;
-    }
-
-    :host([dir='rtl'][aria-haspopup='true'])::after {
-      content: var(--material-icons-chevron-left);
-      padding-right: 9px;
-      margin-left: -9px;
-    }
-
-    :host([menu-item-checked]) [part='checkmark']::before {
-      content: var(--material-icons-check);
-    }
-
-    :host([expanded]) {
-      background-color: var(--material-secondary-background-color);
-    }
-  `,
-  { moduleId: 'material-context-menu-item' },
-);
diff --git a/packages/context-menu/theme/material/vaadin-context-menu.js b/packages/context-menu/theme/material/vaadin-context-menu.js
@@ -1,3 +1,4 @@
+import './vaadin-context-menu-item-styles.js';
 import './vaadin-context-menu-list-box-styles.js';
 import './vaadin-context-menu-styles.js';
 import '@vaadin/item/theme/material/vaadin-item.js';

diff --git a/packages/menu-bar/src/vaadin-menu-bar-button.js b/packages/menu-bar/src/vaadin-menu-bar-button.js
@@ -17,7 +17,7 @@ registerStyles(
       margin-inline-end: 0;
     }
 
-    [part='label'] ::slotted(vaadin-context-menu-item) {
+    [part='label'] ::slotted(vaadin-menu-bar-item) {
       position: relative;
       z-index: 1;
     }

diff --git a/packages/menu-bar/src/vaadin-menu-bar-item.js b/packages/menu-bar/src/vaadin-menu-bar-item.js
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Item } from '@vaadin/item/src/vaadin-item.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @extends Item
+ * @protected
+ */
+class MenuBarItem extends Item {
+  static get is() {
+    return 'vaadin-menu-bar-item';
+  }
+}
+
+customElements.define(MenuBarItem.is, MenuBarItem);
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -360,10 +360,10 @@ export const MenuBarMixin = (superClass) =>
 
       const isElement = itemComponent instanceof HTMLElement;
       // Use existing item component, if any
-      if (isElement && itemComponent.localName === 'vaadin-context-menu-item') {
+      if (isElement && itemComponent.localName === 'vaadin-menu-bar-item') {
         component = itemComponent;
       } else {
-        component = document.createElement('vaadin-context-menu-item');
+        component = document.createElement('vaadin-menu-bar-item');
         component.appendChild(isElement ? itemComponent : document.createElement(itemComponent));
       }
       if (item.text) {

diff --git a/packages/menu-bar/src/vaadin-menu-bar-submenu.js b/packages/menu-bar/src/vaadin-menu-bar-submenu.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-menu-bar-item.js';
 import './vaadin-menu-bar-list-box.js';
 import './vaadin-menu-bar-overlay.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';

diff --git a/packages/menu-bar/src/vaadin-menu-bar.d.ts b/packages/menu-bar/src/vaadin-menu-bar.d.ts
@@ -20,7 +20,7 @@ export interface MenuBarItem {
   tooltip?: string;
   /**
    * The component to represent the button content.
-   * Either a tagName or an element instance. Defaults to "vaadin-context-menu-item".
+   * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
    */
   component?: HTMLElement | string;
   /**
@@ -101,8 +101,8 @@ export interface MenuBarEventMap extends HTMLElementEventMap, MenuBarCustomEvent
  * components are themable:
  *
  * - `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
- * - `<<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
+ * - `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
  * - `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  *
  * @fires {CustomEvent} item-selected - Fired when a submenu item or menu bar button without children is clicked.

diff --git a/packages/menu-bar/src/vaadin-menu-bar.js b/packages/menu-bar/src/vaadin-menu-bar.js
@@ -52,7 +52,7 @@ import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
  * components are themable:
  *
  * - `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
  * - `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  *
@@ -108,7 +108,7 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
        * @property {string} tooltip - Text to be set as the menu button's tooltip.
        * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
        * @property {union: string | object} component - The component to represent the button content.
-       * Either a tagName or an element instance. Defaults to "vaadin-context-menu-item".
+       * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
        * @property {boolean} disabled - If true, the button is disabled and cannot be activated.
        * @property {union: string | string[]} theme - Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
        * @property {SubMenuItem[]} children - Array of submenu items.
@@ -119,7 +119,7 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
        * @type {object}
        * @property {string} text - Text to be set as the menu item component's textContent.
        * @property {union: string | object} component - The component to represent the item.
-       * Either a tagName or an element instance. Defaults to "vaadin-context-menu-item".
+       * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
        * @property {boolean} disabled - If true, the item is disabled and cannot be selected.
        * @property {boolean} checked - If true, the item shows a checkmark next to it.
        * @property {SubMenuItem[]} children - Array of child submenu items.

diff --git a/packages/menu-bar/test/dom/__snapshots__/menu-bar.test.snap.js b/packages/menu-bar/test/dom/__snapshots__/menu-bar.test.snap.js
@@ -29,14 +29,14 @@ snapshots["menu-bar basic"] =
     role="menuitem"
     tabindex="0"
   >
-    <vaadin-context-menu-item
+    <vaadin-menu-bar-item
       aria-selected="false"
       theme="menu-bar-item"
     >
       <strong>
         Help
       </strong>
-    </vaadin-context-menu-item>
+    </vaadin-menu-bar-item>
   </vaadin-menu-bar-button>
   <vaadin-menu-bar-button
     aria-expanded="false"
@@ -68,22 +68,22 @@ snapshots["menu-bar overlay"] =
     aria-orientation="vertical"
     role="list"
   >
-    <vaadin-context-menu-item
+    <vaadin-menu-bar-item
       aria-haspopup="false"
       aria-selected="false"
       role="menuitem"
       tabindex="0"
     >
       View Reports
-    </vaadin-context-menu-item>
-    <vaadin-context-menu-item
+    </vaadin-menu-bar-item>
+    <vaadin-menu-bar-item
       aria-haspopup="false"
       aria-selected="false"
       role="menuitem"
       tabindex="-1"
     >
       Generate Report
-    </vaadin-context-menu-item>
+    </vaadin-menu-bar-item>
   </vaadin-menu-bar-list-box>
   <vaadin-menu-bar-submenu hidden="">
   </vaadin-menu-bar-submenu>
@@ -105,22 +105,22 @@ snapshots["menu-bar overlay class"] =
     aria-orientation="vertical"
     role="list"
   >
-    <vaadin-context-menu-item
+    <vaadin-menu-bar-item
       aria-haspopup="false"
       aria-selected="false"
       role="menuitem"
       tabindex="0"
     >
       View Reports
-    </vaadin-context-menu-item>
-    <vaadin-context-menu-item
+    </vaadin-menu-bar-item>
+    <vaadin-menu-bar-item
       aria-haspopup="false"
       aria-selected="false"
       role="menuitem"
       tabindex="-1"
     >
       Generate Report
-    </vaadin-context-menu-item>
+    </vaadin-menu-bar-item>
   </vaadin-menu-bar-list-box>
   <vaadin-menu-bar-submenu hidden="">
   </vaadin-menu-bar-submenu>

diff --git a/packages/menu-bar/test/dom/menu-bar.test.js b/packages/menu-bar/test/dom/menu-bar.test.js
@@ -23,7 +23,7 @@ describe('menu-bar', () => {
       { text: 'Dashboard', disabled: true },
       {
         component: (() => {
-          const item = document.createElement('vaadin-context-menu-item');
+          const item = document.createElement('vaadin-menu-bar-item');
           const bold = document.createElement('strong');
           bold.textContent = 'Help';
           item.appendChild(bold);