@vaadin/menu-bar 23.3.3 → 24.0.0-alpha10

package/src/vaadin-menu-bar.js

@@ -1,18 +1,16 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * 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-submenu.js';
 import './vaadin-menu-bar-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ButtonsMixin } from './vaadin-menu-bar-buttons-mixin.js';
-import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
+import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
 
 /**
  * `<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering
@@ -38,8 +36,6 @@ import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
  * Part name         | Description
  * ------------------|----------------
  * `container`       | The container wrapping menu bar buttons.
- * `menu-bar-button` | The menu bar button.
- * `overflow-button` | The "overflow" button appearing when menu bar width is not enough to fit all the buttons.
  *
  * The following state attributes are available for styling:
  *
@@ -63,16 +59,12 @@ import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
  * @fires {CustomEvent<boolean>} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
- * @mixes ButtonsMixin
- * @mixes InteractionsMixin
  * @mixes DisabledMixin
  * @mixes ElementMixin
+ * @mixes MenuBarMixin
  * @mixes ThemableMixin
  */
-class MenuBar extends ButtonsMixin(
-  DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))),
-) {
+class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -91,29 +83,13 @@ class MenuBar extends ButtonsMixin(
           flex-wrap: nowrap;
           overflow: hidden;
         }
-
-        [part$='button'] {
-          flex-shrink: 0;
-        }
-
-        [part='overflow-button'] {
-          margin-right: 0;
-        }
-
-        .dots::before {
-          display: block;
-          content: '\\00B7\\00B7\\00B7';
-          font-size: inherit;
-          line-height: inherit;
-        }
       </style>
 
       <div part="container">
-        <vaadin-menu-bar-button part="overflow-button" hidden$="[[!_hasOverflow]]" aria-label$="[[i18n.moreOptions]]">
-          <div class="dots"></div>
-        </vaadin-menu-bar-button>
+        <slot></slot>
+        <slot name="overflow"></slot>
       </div>
-      <vaadin-menu-bar-submenu is-root=""></vaadin-menu-bar-submenu>
+      <vaadin-menu-bar-submenu is-root overlay-class="[[overlayClass]]"></vaadin-menu-bar-submenu>
 
       <slot name="tooltip"></slot>
     `;
@@ -215,11 +191,21 @@ class MenuBar extends ButtonsMixin(
           };
         },
       },
+
+      /**
+       * A space-delimited list of CSS class names
+       * to set on each sub-menu overlay element.
+       *
+       * @attr {string} overlay-class
+       */
+      overlayClass: {
+        type: String,
+      },
     };
   }
 
   static get observers() {
-    return ['_themeChanged(_theme)'];
+    return ['_themeChanged(_theme, _overflow, _container)'];
   }
 
   /** @protected */
@@ -255,8 +241,8 @@ class MenuBar extends ButtonsMixin(
    * @param {string | null} theme
    * @protected
    */
-  _themeChanged(theme) {
-    if (this.shadowRoot) {
+  _themeChanged(theme, overflow, container) {
+    if (overflow && container) {
       this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
       this.__detectOverflow();
     }

package/theme/lumo/vaadin-menu-bar-button-styles.js

@@ -54,7 +54,7 @@ const menuBarButton = css`
   }
 
   :host(:nth-last-of-type(2)),
-  :host([part='overflow-button']) {
+  :host([slot='overflow']) {
     border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
   }
 
@@ -63,18 +63,18 @@ const menuBarButton = css`
     border-radius: var(--lumo-border-radius-m);
   }
 
-  :host([part='overflow-button']) {
+  :host([slot='overflow']) {
     min-width: var(--lumo-button-size);
     padding-left: calc(var(--lumo-button-size) / 4);
     padding-right: calc(var(--lumo-button-size) / 4);
   }
 
-  :host([part='overflow-button']) ::slotted(*) {
+  :host([slot='overflow']) ::slotted(*) {
     font-size: var(--lumo-font-size-xl);
   }
 
-  :host([part='overflow-button']) [part='prefix'],
-  :host([part='overflow-button']) [part='suffix'] {
+  :host([slot='overflow']) [part='prefix'],
+  :host([slot='overflow']) [part='suffix'] {
     margin-left: 0;
     margin-right: 0;
   }
@@ -92,7 +92,7 @@ const menuBarButton = css`
   }
 
   :host([dir='rtl']:nth-last-of-type(2)),
-  :host([dir='rtl'][part='overflow-button']) {
+  :host([dir='rtl'][slot='overflow']) {
     border-radius: var(--lumo-border-radius-m) 0 0 var(--lumo-border-radius-m);
   }
 `;

package/theme/lumo/vaadin-menu-bar-item-styles.js

@@ -12,15 +12,13 @@ registerStyles(
       justify-content: inherit;
     }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon),
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(iron-icon) {
+    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon) {
       display: inline-block;
       width: var(--lumo-icon-size-m);
       height: var(--lumo-icon-size-m);
     }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']),
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(iron-icon[icon^='vaadin:']) {
+    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
       padding: var(--lumo-space-xs);
       box-sizing: border-box !important;
     }

package/theme/lumo/vaadin-menu-bar-styles.js

@@ -4,12 +4,12 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-menu-bar',
   css`
-    :host([has-single-button]) [part$='button'] {
+    :host([has-single-button]) ::slotted(vaadin-menu-bar-button) {
       border-radius: var(--lumo-border-radius-m);
     }
 
-    :host([theme~='end-aligned']) [part$='button']:first-child,
-    :host([theme~='end-aligned'][has-single-button]) [part$='button'] {
+    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button:first-of-type),
+    :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
       margin-inline-start: auto;
     }
   `,

package/theme/material/vaadin-menu-bar-button-styles.js

@@ -54,17 +54,17 @@ const menuBarButton = css`
   }
 
   :host(:nth-last-of-type(2)),
-  :host([part~='overflow-button']) {
+  :host([slot='overflow']) {
     border-radius: 0 4px 4px 0;
   }
 
-  :host([part='overflow-button']) {
+  :host([slot='overflow']) {
     padding-right: 8px;
     padding-left: 8px;
     min-width: 36px;
   }
 
-  :host([part='overflow-button']) ::slotted(*) {
+  :host([slot='overflow']) ::slotted(*) {
     font-size: 24px;
   }
 
@@ -73,7 +73,7 @@ const menuBarButton = css`
   }
 
   :host([theme~='outlined']:not([dir='rtl']):nth-last-of-type(2)),
-  :host([theme~='outlined']:not([dir='rtl'])[part~='overflow-button']) {
+  :host([theme~='outlined']:not([dir='rtl'])[slot='overflow']) {
     margin-right: 0;
   }
 
@@ -88,7 +88,7 @@ const menuBarButton = css`
   }
 
   :host([dir='rtl']:nth-last-of-type(2)),
-  :host([dir='rtl'][part='overflow-button']) {
+  :host([dir='rtl'][slot='overflow']) {
     border-radius: 4px 0 0 4px;
   }
 
@@ -101,7 +101,7 @@ const menuBarButton = css`
   }
 
   :host([theme~='outlined'][dir='rtl']:nth-last-of-type(2)),
-  :host([theme~='outlined'][dir='rtl'][part~='overflow-button']) {
+  :host([theme~='outlined'][dir='rtl'][slot='overflow']) {
     margin-left: 0;
   }
 `;

package/theme/material/vaadin-menu-bar-item-styles.js

@@ -12,8 +12,7 @@ registerStyles(
       font-size: var(--material-button-font-size);
     }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']),
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(iron-icon[icon^='vaadin:']) {
+    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
       display: inline-block;
       width: 18px;
       height: 18px;

package/theme/material/vaadin-menu-bar-styles.js

@@ -8,12 +8,12 @@ registerStyles(
       padding-bottom: 5px;
     }
 
-    :host([has-single-button]) [part$='button'] {
+    :host([has-single-button]) ::slotted(vaadin-menu-bar-button) {
       border-radius: 4px;
     }
 
-    :host([theme~='end-aligned']) [part$='button']:first-child,
-    :host([theme~='end-aligned'][has-single-button]) [part$='button'] {
+    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button:first-of-type),
+    :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
       margin-inline-start: auto;
     }
   `,

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n`menu-bar-button` | The menu bar button.\n`overflow-button` | The \"overflow\" button appearing when menu bar width is not enough to fit all the buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-overlay).",
+          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-overlay).",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "open-on-hover",
               "description": "If true, the submenu will open on hover (mouseover) instead of click.",
@@ -22,11 +33,11 @@
               }
             },
             {
-              "name": "disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
               "value": {
                 "type": [
-                  "boolean",
+                  "string",
                   "null",
                   "undefined"
                 ]
@@ -47,8 +58,8 @@
           "js": {
             "properties": [
               {
-                "name": "openOnHover",
-                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
                     "boolean",
@@ -58,8 +69,8 @@
                 }
               },
               {
-                "name": "disabled",
-                "description": "If true, the user cannot interact with this element.",
+                "name": "openOnHover",
+                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
                 "value": {
                   "type": [
                     "boolean",
@@ -85,6 +96,17 @@
                     "MenuBarI18n"
                   ]
                 }
+              },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,19 +16,19 @@
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n`menu-bar-button` | The menu bar button.\n`overflow-button` | The \"overflow\" button appearing when menu bar width is not enough to fit all the buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-overlay).",
+          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {
-              "name": "?openOnHover",
-              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "name": "?openOnHover",
+              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
               "value": {
                 "kind": "expression"
               }
@@ -47,6 +47,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@item-selected",
               "description": "Fired when either a submenu item or menu bar button without nested children is clicked.",

package/src/vaadin-menu-bar-buttons-mixin.d.ts

@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
-
-export declare function ButtonsMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ButtonsMixinClass> & Constructor<ResizeMixinClass> & T;
-
-export declare class ButtonsMixinClass {
-  protected readonly _buttons: HTMLElement[];
-
-  protected readonly _container: HTMLElement;
-
-  protected readonly _overflow: HTMLElement;
-
-  protected _hasOverflow: boolean;
-}