Menu Bar Text visible through Usage & Styling Header

[mrgreywater]

I just noticed the MenuBar Button text is visible through the new Usage & Styling Header.

chrome_HukMZQ9LGZ.mp4

[jouni]

I’m not able to reproduce this on macOS Safari, Chrome, or Firefox. What OS and browser are you using?

[mrgreywater]

This page: https://vaadin.com/docs/latest/components/menu-bar
With Chrome Version 112.0.5615.50 (Official Build) (64-bit)
The same happens with Firefox 111.0.1 (64-bit)
OS: Windows 11 Enterprise 10.0.22621

All extensions disabled. It only seems to happen to the java components, not when you select the typescript components.

edit: Bug also exists on my android phone with chrome and firefox.

[jouni]

It only seems to happen to the java components, not when you select the typescript components.

Thanks, that was the missing piece of information. I can reproduce it now as well 👍

[jouni]

The issue comes from these styles: https://github.com/vaadin/web-components/blob/main/packages/menu-bar/src/vaadin-menu-bar-button.js#L20-L23

When using Flow/Java, the additional <vaadin-menu-bar-item> element gets inserted. The TypeScript version just has a plain text node inside the <vaadin-menu-bar-button> element.

I have no memory why these styles are there in the first place (originally for slotted vaadin-context-menu-item elements). @web-padawan, or @tomivirkki, do you remember?

[jouni]

Oh, there we go: vaadin/vaadin-menu-bar#69

I wonder if this fix is still needed?

[jouni]

I pushed a fix/workaround to Design System Publisher (the documentation website builder), which should solve this.