[Feat]: Allow using popover menu style on mobile

[adixon-adobe]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-action-menu

Description of the requested feature

We've been using the action menu component in a header on our site, and sometimes it only has a few items. We've found the mobile tray that shows up at the bottom to be confusing and often too far away from the button you clicked.

It'd be really nice to have an option to disable the tray -- I'd expect the normal popover menu to work well on mobile anyways.

Mockups or screenshots

No response

Implementation notes or ideas

Just a simple disable-mobile-tray attribute or something similar would do the trick. The code looks like it'd be pretty simple to modify, but may also affect other components.

[najikahalsema]

According to Spectrum guidelines, this behaviour is permitted. We just need to think about the API name, so a small RFC would be good here. That way we can abstract that pattern to other components if necessary.

[adixon-adobe]

I've integrated this with SWC 1.1.1, but the documented attribute name force-popover doesn't work. You need to do forcepopover. As long as this is still open, seems worth tracking. I know there are more general issues with touch/menus being fixed now that prevented me from checking this on the current doc site.

[Rajdeepc]

@adixon-adobe Can you try this example. I added force-popover on sp-action-menu
This is on 1.3.0
https://studio.webcomponents.dev/edit/EYQn9T6wOnieZbv4xnPj/src/index.ts?p=stories