Skip to content

Move menu-bar-buttons into a slot #4292

@rolfsmeds

Description

@rolfsmeds

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?

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions