web-components icon indicating copy to clipboard operation
web-components copied to clipboard

Move menu-bar-buttons into a slot

Open rolfsmeds opened this issue 3 years ago • 0 comments

Describe your motivation

The menu-bar-buttons inside vaadin-menu-bar are currently in the component's shadow DOM. This presents some challenges for ::part() based styling:

  • Need to expose the buttons' various parts (prefix, label, suffix) through exportparts
  • No styling access to the contents (e.g. icons) of the parts mentioned above (only way to do this without shadow dom css injection)
  • Buttons with theme names applied to them (individually) cannot be styled with ::part()

Describe the solution you'd like

Introduce a slot in vaadin-menu-bar and move the buttons there, so that they can be styled directly as light-DOM elements.

Describe alternatives you've considered

I suppose we could reflect theme names applied to individual MenuBarButtons as part names automatically? (This would still not make prefix/suffix slot contents styleable however)

Additional context

This will introduce a breaking change to custom styled menubars – a fairly common occurrence in Vaadin applications. Consider providing an opt-out to migrators from earlier versions using a feature flag if feasible?

rolfsmeds avatar Aug 02 '22 19:08 rolfsmeds