Skip to content

Wildcard [Popover/Menu]: Remove `dropdown-menu` from popover

Administrator requested to merge vk/remove-dropdown-menu-from-popover into main

Created by: vovakulikov

Background

Prior to this PR, the <Popover /> component used a special bootstrap class for adding special styles and spacing calculations for the popover element- dropdown-menu. But those styles and spacings didn't take into account the current position of the popover element. If we take a look at the dropdown-menu CSS class we will see that this class adds only margin-top for the target, which makes the popover position correct only if the popover (MenuList) element is placed below the target (MenuButton) element. And incorrect for any other positions.

Screenshot 2022-02-27 at 03 21 10

This PR adds support of the dynamic padding setting for the target element (targetPadding setting) to the tether calculation engine. Now the MenuList component uses this targetPadding prop to have the right spacing between MenuButton and MenuList elements instead of using the dropdown-menu CSS class.

Also, this PR fixes the problem with the popover content border/tail shift problem.

Test plan

  • Make sure that Menu Button looks good
  • Make sure that any usage of the popover and its new styles don't break anything in its consumers' components
  • Make sure that the tail element is propper connected to the popover content element with different popover positions.

Merge request reports