Component proposal: Context menu

[janhassel]

Related: #3764 #6426

Summary

This proposal is to discuss the addition of a context-menu (right-click menu) component / pattern. It may also be used as an ehanced overflow menu in case a product team does not want to override the browser's context menu for various reasons.

Justification

Complex and data-heavy web applications have reached a state where they often replace desktop applications or are the main touchpoint for a given workflow. In web terms, overflow menus (mostly indicated by a meatball icon) are the substituion for most interactions a native application would use the context menu for. In many cases this model is not sufficient since it requires an additional interaction by the user, clicking away from the context they want options for. Also, placing an overflow menu trigger in the UI is often not feasible due to special layouts such as a data grid where the user has multiple options for a cell.

There are some examples of web applications that use a custom context menu due to the above mentioned reasons. Among others, these examples include:

Box

G Suite (Google Docs, Sheets, etc.)

Slack (web)

CodeSandbox

Pages, Keynote and Numbers for iCloud

Desired UX and success metrics

The user has a nested list of options related to their current context. If applicable, the sortcut / keyboard command to trigger an action is displayed next to the action to progressively educate the user on how to become more efficient with the web application.
Options that have children cannot be disabled themselves so that the user can always explore the options (in other words: if all child options are disabled, the parent option is still availble to expand).
Options can be a selection (radio behaviour).

"Must have" functionality

Visibility / rendering of component can be controlled by code. Absolute position of the component on the screen can be controlled by code.

Available extra resources

Sample mockup to illustrate proposal

We should be able to support the implementation and design of this component with a bit of help from the Carbon team.

[joshblack]

Hey @janhassel!

We took a look at this during our proposal grooming session this sprint and love the component 🔥

I think the only feedback from the session was around visuals, @laurenmrice do you have a second to list out any changes that you would hope to see for it? Then either your team @janhassel could put something together or we could try and get this added to a sprint (which might take a bit)

[janhassel]

@joshblack Good to hear! If we get a list of visual changes and feedback I'll try to secure some time for this and come back to you once I know more about if, how and when we can support this effort.

[laurenmrice]

Hey Jan 👋

Here are the design specs for the context menu! Basically the same thing as you have above but just detailing out the increments, etc. We can have you pair up with a dev on our team while you are contributing the code in case you have any questions.

Would you also be able to provide dev/design documentation guidance for the context menu? We can help revise any content that is written.

Styles spec

---

Structure spec

---

UI example

---

[janhassel]

@laurenmrice Thanks a lot for the detailed visual specs, looks great!
Before I start working on this, what would be the preferred strategy here? Should this be a separate component called ContextMenu or should this be an update and extension to the existing OverflowMenu? I see use cases where a nested overflow menu would make a lot of sense for teams and visually they're relatively close. What do you think?

[laurenmrice]

This should be a separate component called Context Menu. Just curious, is this the typical standard name for this kind of component (Context menu, contextual menu, control menu)? @janhassel

[janhassel]

Hey @laurenmrice, I was able to push a first version of this component with PR #7350. Which developer could I reach out to discuss the implemenation and remaining steps?

[davidicus]

Hey all! The AI apps organization is definitely interested in consuming this ASAP. Is there any ETA on when this would be available. I see in the PR that there hasn't been a response since before the holidays. Thanks for the great work on this component!

[laurenmrice]

@davidicus Yes! Definitely still interested in getting this in! Jan opened a PR and it is going through some reviews at the moment. 👍🏻

[gillibrand]

Any status updates on this?

[laurenmrice]

@gillibrand The context menu is still going through some accessibility reviews in the PR that is open. You can follow the most recent updates on it here: #7350