[menu-bar] Add dropdown icon to indicate sub menu

[juuso-vaadin]

Describe your motivation

Menu items that have sub-menus cannot be visually identified from items that trigger an action immediately.

In this example, Share and Move are menus

The original inspiration for Menu Bar component has been the OS menubars which typically don't distinguish between menus and actions. In reality Vaadin Menu Bar is often used as button container due to the overflowing functionality.

Describe the solution you'd like

Addition 1: has-menu attribute to help styling Addition 2: menu-open attribute to help styling state when dropdown menu is open Addition 3: Menu Bar theme variant that automatically populates the vaadin-menu-bar-button suffix slot with dropdown chevron.

Describe alternatives you've considered

This workaround will add icon based on presense of aria-haspopup attribute.

:host([aria-haspopup="true"]:not([part="overflow-button"]):not([theme~="icon"])) [part="suffix"]::after {
  content: var(--lumo-icons-dropdown);    
  font-family: "lumo-icons";
  font-size: var(--lumo-icon-size);
}

Additional context

No response

[rolfsmeds]

In order to visually balance the menu-bar-button's contents with the dropdown indicator, we need to tweak margins and indicator positioning a little bit. Here's the solution I ended up with:

:host([theme~="dropdown-indicators"][aria-haspopup]) [part="suffix"] {
    margin-inline-start: 0;
}

:host([theme~="dropdown-indicators"][aria-haspopup]) [part="suffix"]::after {
    font-family: lumo-icons;
    font-size: var(--lumo-icon-size-s);
    content: var(--lumo-icons-dropdown);
    position: relative;
    inset-inline-start: 0.15em;
}

:host([theme~="dropdown-indicators"][theme~="tertiary"][aria-haspopup]) [part="suffix"]::after {
    inset-inline-start: 0.05em;
}

[web-padawan]

This is implemented by https://github.com/vaadin/web-components/pull/7381 and https://github.com/vaadin/flow-components/pull/6371, will be available in Vaadin 24.5 planned for September.