feat: add className property for adding CSS classes to menu-bar items (…

…#6633)
vaadin · Oct 11, 2023 · 677d037 · 677d037
1 parent af30824
commit 677d037
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 4 deletions.
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -333,6 +333,10 @@ export const MenuBarMixin = (superClass) =>
         button.textContent = item.text;
       }
 
+      if (item.className) {
+        button.className = item.className;
+      }
+
       return button;
     }
 

diff --git a/packages/menu-bar/src/vaadin-menu-bar.d.ts b/packages/menu-bar/src/vaadin-menu-bar.d.ts
@@ -35,6 +35,11 @@ export interface MenuBarItem {
    * Array of submenu items.
    */
   children?: SubMenuItem[];
+
+  /**
+   * Class/classes to be set to the class attribute of the button.
+   */
+  className?: string;
 }
 
 export interface SubMenuItem {
@@ -43,6 +48,7 @@ export interface SubMenuItem {
   disabled?: boolean;
   theme?: string[] | string;
   checked?: boolean;
+  className?: string;
   children?: SubMenuItem[];
 }
 
@@ -119,8 +125,9 @@ declare class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMi
    * menubar.items = [
    *   {
    *     text: 'File',
+   *     className: 'file',
    *     children: [
-   *       {text: 'Open'}
+   *       {text: 'Open', className: 'file open'}
    *       {text: 'Auto Save', checked: true},
    *     ]
    *   },

diff --git a/packages/menu-bar/src/vaadin-menu-bar.js b/packages/menu-bar/src/vaadin-menu-bar.js
@@ -138,8 +138,9 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
        * menubar.items = [
        *   {
        *     text: 'File',
+       *     className: 'file',
        *     children: [
-       *       {text: 'Open'}
+       *       {text: 'Open', className: 'file open'}
        *       {text: 'Auto Save', checked: true},
        *     ]
        *   },

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
@@ -4,6 +4,7 @@ export const snapshots = {};
 snapshots["menu-bar basic"] = 
 `<vaadin-menu-bar role="menubar">
   <vaadin-menu-bar-button
+    class="home"
     role="menuitem"
     tabindex="0"
   >
@@ -26,6 +27,7 @@ snapshots["menu-bar basic"] =
     Dashboard
   </vaadin-menu-bar-button>
   <vaadin-menu-bar-button
+    class="help"
     role="menuitem"
     tabindex="0"
   >
@@ -76,6 +78,7 @@ snapshots["menu-bar overlay"] =
     <vaadin-menu-bar-item
       aria-haspopup="false"
       aria-selected="false"
+      class="generate reports"
       role="menuitem"
       tabindex="-1"
     >
@@ -113,6 +116,7 @@ snapshots["menu-bar overlay class"] =
     <vaadin-menu-bar-item
       aria-haspopup="false"
       aria-selected="false"
+      class="generate reports"
       role="menuitem"
       tabindex="-1"
     >

diff --git a/packages/menu-bar/test/dom/menu-bar.test.js b/packages/menu-bar/test/dom/menu-bar.test.js
@@ -15,10 +15,10 @@ describe('menu-bar', () => {
   beforeEach(async () => {
     menu = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>');
     menu.items = [
-      { text: 'Home' },
+      { text: 'Home', className: 'home' },
       {
         text: 'Reports',
-        children: [{ text: 'View Reports' }, { text: 'Generate Report' }],
+        children: [{ text: 'View Reports' }, { text: 'Generate Report', className: 'reports generate' }],
       },
       { text: 'Dashboard', disabled: true },
       {
@@ -29,6 +29,7 @@ describe('menu-bar', () => {
           item.appendChild(bold);
           return item;
         })(),
+        className: 'help',
       },
     ];
     await nextRender();