Enhance menu bar documentation on icons and variants

[rodolforfq]

Added guidance on using MenuBarVariant for drop-down indicators and icon-only menu items. Based con customer's feedback.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

AI Language Review

• In the "Menu Item Features" section, consider clarifying the description of the icon theme variant. The explanation should explicitly state that the variant not only reduces padding but also affects the visibility of drop-down indicators when combined with the dropdown-indicators variant. This will ensure users clearly understand the variant's effects.
• In the "Icons" sub-section of the "Menu Item Features" section, use consistent terminology for "drop-down indicator" across the document to improve clarity.

No other issues requiring improvement were identified in the modified content of the file.

[jouni]

I’m not sure I follow the logic implied by the additional sentences. In what cases should drop-down indicators be used? And I don't think the LUMO_ICON variant hides the drop-down indicators.

Also, as the guidance here is Lumo-specific and doesn't apply to base styles or Aura at all, I would like to avoid theme-specific guidance in the main component docs page. Theme-specific things would be more suitable on the Styling sub-page.

Based con customer's feedback.

What was the feedback?

[StefanPenndorf]

Hi @jouni ,

in a Vaadin 24 application I tried to combine MenuBarVariant.LUMO_ICON with MenuBarVariant.LUMO_DROPDOWN_INDICATORS. The MenuBar should consist of a single main item that provides three options via Drop-Down. The main item has an Icon as well as the drop down indicator:

Adding both variants MenuBarVariant.LUMO_ICON and MenuBarVariant.LUMO_DROPDOWN_INDICATORS did remove the drop down indicator. The example for MenuBarVariant.LUMO_ICON in the Vaadin docs useses MenuBar items with and without additional text on the Button and let me think this applies to my use case as well. It wasn't clear to me that MenuBarVariant.LUMO_ICON is intended for icon-only items / icon-bar-items. It wasn't clear to me that it doesn't work with MenuBarVariant.LUMO_DROPDOWN_INDICATORS and beyond that only reduces spacing. The latter was important for my assessment / descission to not use MenuBarVariant.LUMO_ICON (without negative consequences).

Does this help to clarify?

[jouni]

Thanks, that helps to clarify where the documentation is unclear. I’ll try to phrase the update more clearly based on that.

[github-actions]

Preview Deployment

This PR has been deployed for preview.

URL: https://docs-preview-pr-5447.fly.dev

Built from b85f902