add context menu component

[christianvogt]

Describe the issue. What is the expected and unexpected behavior? Topology component has a need to bring up a context menu:

• Ability to open a context menu popover a specific x, y coordinate identified by the mouse click event.
• Popover should open to the bottom right of the specified coordinate.
• Popver should flip and orient itself accordingly to open and remain visible on screen.
• Menu should receive focus on open.
• Menu should support keyboard navigation through the list of menu actions.
• Menu should trap focus.
• Popover should request close on escape, click outside, or action selected.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Our workaround has been very involved. We first created a Popper component to handle positioning much like tippy.js. Then we had to mimic the dropdown structure and override some styles to make it work. The end result works great however it would be nice to see a standard popover component in patternfly that's generic for these situations as well as a generic menu component that doesn't require hacking around the dropdown menu.

<Popper
      {...other}
      closeOnEsc
      closeOnOutsideClick
      open={isOpen}
      onRequestClose={handleOnRequestClose}
    >
      <DropdownContext.Provider
        value={{
          onSelect: handleOnRequestClose,
          toggleTextClass: styles.dropdownToggleText,
          toggleIconClass: styles.dropdownToggleIcon,
          menuClass: styles.dropdownMenu,
          itemClass: styles.dropdownMenuItem,
          toggleClass: styles.dropdownToggle,
          baseClass: styles.dropdown,
          baseComponent: 'div',
          sectionClass: styles.dropdownGroup,
          sectionTitleClass: styles.dropdownGroupTitle,
          sectionComponent: 'section',
          disabledClass: styles.modifiers.disabled,
          hoverClass: styles.modifiers.hover,
          separatorClass: styles.dropdownSeparator,
        }}
      >
        <div className="pf-c-dropdown pf-m-expanded">
          <DropdownMenu className="pf-c-dropdown__menu topology-context-menu" autoFocus>
            {children}
          </DropdownMenu>
        </div>
      </DropdownContext.Provider>
    </Popper>

What is your product and what release version are you targeting? OpenShift web console 4.4

cc @jeff-phillips-18

[rachael-phillips]

@mcarrano @mceledonia making you aware of this from a design perspective. What are your thoughts on approach?

[christianvogt]

Some thoughts: I think it would be useful to have a Menu and MenuItem components that are reusable in places like Dropdown. Also Popover should be more generic to support opening without an arrow and it should be used with Dropdown as well because there are issues there too. Then this same Popover can be used for the context menu along with a nested Menu.

[mcarrano]

@rachael-phillips I agree that this would be a useful component and with @christianvogt 's idea about creating reusable components for elements like menus and menu items. It would help drive consistency in look and behavior between a growing set of things. This is something that has been discussed in the past but we need to figure out timing for the refactoring it would require.

[mceledonia]

I like the approach, to me the key here is ensuring we're offering the additional flexibility without too much room for inconsistencies. It seems like these changes would overall drive more consistency to the components, which sounds great to me. I'm not super well versed in the implementation side of how these overlap and interact, so I would defer to someone with more knowledge there.

[mcoker]

Agreed, I think this would be valuable and help drive consistency while making the components that use this type of menu currently easier to maintain. We have discussed this in the past and have an issue in the core repo from February that outlines this idea - https://github.com/patternfly/patternfly-next/issues/1429, including creating separate menu and menu item components.

[christianvogt]

I believe we are also exploring the need for sub menus. Please keep this in mind when designing the menus and react components.

[doruskova]

@mcarrano Hey there! Sorry for my delayed answer. I've been working on an exploration of contextual menus and here's my summary Context menu- story mocks link

Here are my findings in short:

• The context menu should contain a small set of relevant actions.
• Keep the list length manageable by including fewer than 10-12 items.
• It usually includes just 1 flyout submenu.
• For hidden contextual menus (this case) >> perform actions that don’t rely on gestures. For Topology View is the list of actions also included in the dropdown of Pod/Cluster/Node detail.

Even though I know we should avoid this type of menu, the flyout menu for this context menu is suitable because the context menu needs to be short and easy to use. The other solutions such as drill-down or accordion for desktop tend to hide more and more items. And it goes against the definition of the context menu. However, a drill-down menu can be used for a responsive version of the context menu as with the dropdown menu. This solution can keep consistency with the dropdown menu.

[mcarrano]

@doruskova I really like this approach. @mceledonia @maryshak1996 @mattnolting can you also take a look at this? I just want to make sure the way we collapse the menu into a drill-down on mobile is consistent with what we are planning to do with the masthead and overflow menus.

[maryshak1996]

@doruskova I think that, on mobile, this mimicks what we have proposed for masthead responsiveness pretty closely. The main thing that seems to differ is the use of blue text in yours versus black text in the masthead mobile dropdown (https://marvelapp.com/5cjajdg/screen/63256959)

[doruskova]

@maryshak1996 yes, that's the only difference (blue/black color). I used a blue color because I wanted to visually differentiate the current position. But, I like your approach too.

[doruskova]

The blue text was changed to black, so the mocks should be up to date. Marvel mocks

[doruskova]

@mcarrano So, I'm adding this guideline for dev with padding etc. for a clear description. You can see it here in Marvel.

[mcarrano]

@doruskova thank you for your efforts on this. I have opened https://github.com/patternfly/patternfly/issues/2950 in the core repo to track implementation work and added to milestone 2020.07

cc @LHinson