Popover enhancement: new Dropdown Menu component vs. close render prop

[JanHamara]

Describe the feature you'd like

(related to Popover component)

We have a need for a specific popover component behaviour, when clicking inside the Popover content (e.g. on a button) hides the Popover (e.g. dropdown menu with menu link that opens a dialog - we need to close Popover content as it may overlay modal backdrop)

However, this behaviour goes against the natural behaviour that we expect from Popover:

• that it gets closed only with a click outside Popover content, or with a click on Popover trigger
• that it can be closed with keyboard keys: ESC and ENTER keys

We can see that we have need for several components here, with similar but slightly different behaviours, and we have most of them covered at the moment:

• rendering pop-up content only on hover over a trigger element: Tooltip
• rendering pop-up content with click on a trigger element, needing another click to hide the content: Popover
• rendering pop-up content that gets hidden on click of an action (inside the pop-up content): Dropdown Menu

We don't currently have a separate Dropdown menu component in @wave, therefore, one option would be integrating this sort of component into the library - that is, a component that renders pop-up content on click of a trigger, and hides the content on click inside the Popover content.

Second option would be extending the Popover component and exposing a render prop close - that would allow us to pass on this method and use it outside of the Popover component in order to manage its visibility.

[arturmiglio]

If it could be a hook I'd strongly advise to go for that instead of the render prop.

Otherwise, what would be the difference between this new Component you are proposing and the current DropdownMenu component?

[div-Leo]

@arturmiglio I don't think we have a DropdownMenu component in Wave

[nlopin]

There was a component candidate to Wave used in several projects @mytaxi/react-component-button-dropdown. I think we should add something similar to the library since it has become a standard.

This component can be build on top of the Dropdown Menu Jan proposes

[div-Leo]

IMO what we should do is an abstraction of the Popover component adding the items and logic already out of the box.

Here you can see that we have a solution already for the Dropdown but as we implemented our solution is too flexible and each developer should implement the content of the Dropdown (meaning each item with the hover/focus/active styles vibration) on their own in each of their projects.

I think is won't create any confusion when looking at a design in Figma the dev will know that the dropdown is a component apart.