fix: keep custom class name for overflow menu items (#5774)

* Fixed class removal. Next: tests.

* Add test

* Linter fix

* add clarifying comment

---------

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

packages/menu-bar/src/vaadin-menu-bar-buttons-mixin.js

@@ -113,7 +113,10 @@ export const ButtonsMixin = (superClass) =>
       item.removeAttribute('aria-expanded');
       item.removeAttribute('aria-haspopup');
       item.removeAttribute('tabindex');
-      item.removeAttribute('class');
+      item.classList.remove('vaadin-context-menu-parent-item', 'vaadin-menu-item');
+      if (item.classList.length === 0) {
+        item.removeAttribute('class');
+      }
     }
 
     /** @private */

packages/menu-bar/test/menu-bar.test.js

@@ -752,6 +752,18 @@ describe('item components', () => {
       await onceResized(menu);
       expect(item.getAttributeNames()).to.have.members(itemAttributes);
     });
+
+    it('should keep the class names when moved to submenu and back', async () => {
+      // Simulate a custom class name being added through the Flow menu bar item component
+      const item = buttons[5].firstChild;
+      item.classList.add('test-class-1');
+      overflow.click();
+      await nextRender(subMenu);
+      subMenu.close();
+      menu.style.width = 'auto';
+      await onceResized(menu);
+      expect(item.classList.contains('test-class-1')).to.be.true;
+    });
   });
 });