[RFC] ContextMenu Component

[gopalgoel19]

A new ContextMenu component

Problem description

Building a new component ContextMenu.

Proposed solution

As of now, I am planning to build this component using Menu, Popup, Avatar etc.
Check progress at #340

Requesting For Comments on:

1. What is the best approach to build this component?
2. What all functionality should we extend to Menu, if any, to support ContextMenu?

[levithomason]

I think this component is great and we should include it. The props I would imagine would be essentially the Menu's props initially. This way you can pass any items the context menu. As the Menu API grows to support more features, the Context Menu would also support those features.

[gopalgoel19]

Should we have a menu prop in Menu.Item to render a sub-menu? If yes, what is the difference between a ContextMenu component and a Menu component with sub-menus?

[jurokapsiar]

I would like to discuss starting work on this component - it would solve some very common use cases. We have Menu Button prototype available, but that is far too much code for the consumers to copy. ARIA has a pattern for menu button, other libraries have it as well (https://material-ui.com/components/menus/) and we recently got a requirement for it internally as well. We will also use it heavily in combination with list item and tree item.

The API should include:

• items shorthand (similar to Menu)
• on ['click' | 'hover+click' | 'context']

[jurokapsiar]

The alternative would be <Button menu={{ ... }} />, let's consider that as well. The important scenario is:

• list item has a context menu button
• by default, when navigating in the list, the focus goes to the list items
• if the list item has context menu button, that would not be focusable, we would however allow users to press the context menu button (secondary action in screen readers) to open the menu
• with that, the oncontext event handler would need to be on the focused list item and the menu would need to be controlled from outside

If the scenario above is doable using Button with menu prop, I am ok with it. If not, we would need a separate Context Menu component.