vaadin / flow-components

Java counterpart of Vaadin Web Components
102 stars 65 forks source link

Allow MenuItem's to contain an Anchor element, to allow download #3182

Open nbabb opened 2 years ago

nbabb commented 2 years ago

Describe your motivation

We would like to use the MenuBar component, however one of the use-cases we need to support is an Anchor tag (for download). When you add an Anchor to a MenuItem, the default behavior adds a bunch of padding around the Anchor, such that the user can select the menu item, but not trigger the Anchor.

Describe the solution you'd like

There should be some variant for MenuItem that avoids all the padding, and allows the addition of an Anchor tag (or possibly other components) such that the Anchor is triggered by selection anywhere within the MenuItem.

Describe alternatives you've considered

Working with Javier in support, he was able to provide a workaround, but it appears to be quite fragile.

        val link = Anchor("http://www.google.com", Span("Link"))
        link.element.style.set("height", "100%")
        link.element.style.set("padding-left", "24px")
        link.element.style.set("display", "grid")
        link.element.style.set("place-items", "center")
        link.element.style.set("text-decoration", "inherit")
        link.element.style.set("color", "inherit")
        link.element.style.set("cursor", "default");
        link.element.style.set("text-decoration", "inherit")
        link.element.style.set(
            "padding-right",
            "calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4)"
        )
        val mitem: MenuItem = export.subMenu.addItem(link)
        mitem.element.style["--_lumo-item-selected-icon-display"] = "none"
        mitem.element.style["padding"] = "0"
        mitem.element.style["align-items"] = "stretch"

Additional context

No response

web-padawan commented 2 years ago

Thanks for the issue. We can consider having default styles for slotted links to make them look better.

cdir commented 2 years ago

I have a MenuBar as an application menu, where one of the menu items should navigate to an external link (another part of my application in a separate deployment). At the moment I use Page#setLocation and thus have a server-side navigation. I would prefer a native anchor, because the user can also decide to open the link in a new tab.