feat: add overlayClass property to vaadin-menu-bar (#5238)

vaadin · Jan 6, 2023 · 89b5e2b · 89b5e2b
1 parent afa4708
commit 89b5e2b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 1 deletion.
diff --git a/packages/menu-bar/src/vaadin-menu-bar.d.ts b/packages/menu-bar/src/vaadin-menu-bar.d.ts
@@ -160,6 +160,14 @@ declare class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMi
    */
   i18n: MenuBarI18n;
 
+  /**
+   * A space-delimited list of CSS class names
+   * to set on each sub-menu overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   addEventListener<K extends keyof MenuBarEventMap>(
     type: K,
     listener: (this: MenuBar, ev: MenuBarEventMap[K]) => void,

diff --git a/packages/menu-bar/src/vaadin-menu-bar.js b/packages/menu-bar/src/vaadin-menu-bar.js
@@ -89,7 +89,7 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
         <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>
     `;
@@ -191,6 +191,16 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
           };
         },
       },
+
+      /**
+       * A space-delimited list of CSS class names
+       * to set on each sub-menu overlay element.
+       *
+       * @attr {string} overlay-class
+       */
+      overlayClass: {
+        type: String,
+      },
     };
   }
 

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
@@ -91,3 +91,40 @@ snapshots["menu-bar overlay"] =
 `;
 /* end snapshot menu-bar overlay */
 
+snapshots["menu-bar overlay class"] = 
+`<vaadin-context-menu-overlay
+  class="custom menu-bar-overlay"
+  dir="ltr"
+  id="overlay"
+  opened=""
+  right-aligned=""
+  start-aligned=""
+  top-aligned=""
+>
+  <vaadin-context-menu-list-box
+    aria-orientation="vertical"
+    role="list"
+  >
+    <vaadin-context-menu-item
+      aria-haspopup="false"
+      aria-selected="false"
+      role="menuitem"
+      tabindex="0"
+    >
+      View Reports
+    </vaadin-context-menu-item>
+    <vaadin-context-menu-item
+      aria-haspopup="false"
+      aria-selected="false"
+      role="menuitem"
+      tabindex="-1"
+    >
+      Generate Report
+    </vaadin-context-menu-item>
+  </vaadin-context-menu-list-box>
+  <vaadin-menu-bar-submenu hidden="">
+  </vaadin-menu-bar-submenu>
+</vaadin-context-menu-overlay>
+`;
+/* end snapshot menu-bar overlay class */
+
diff --git a/packages/menu-bar/test/dom/menu-bar.test.js b/packages/menu-bar/test/dom/menu-bar.test.js
@@ -43,4 +43,11 @@ describe('menu-bar', () => {
     await nextRender();
     await expect(menu._subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
+
+  it('overlay class', async () => {
+    menu.overlayClass = 'custom menu-bar-overlay';
+    menu._buttons[1].click();
+    await nextRender();
+    await expect(menu._subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+  });
 });
diff --git a/packages/menu-bar/test/typings/menu-bar.types.ts b/packages/menu-bar/test/typings/menu-bar.types.ts
@@ -9,6 +9,10 @@ const menu = document.createElement('vaadin-menu-bar');
 
 const assertType = <TExpected>(actual: TExpected) => actual;
 
+assertType<boolean | null | undefined>(menu.openOnHover);
+assertType<MenuBarItem[]>(menu.items);
+assertType<string>(menu.overlayClass);
+
 assertType<ResizeMixinClass>(menu);
 assertType<ControllerMixinClass>(menu);
 assertType<FocusMixinClass>(menu);