Room UI Redesign: Popover

[robertlong]

This PR adds the Popover component. This component will be used in the toolbar to display various menus. It's a fairly complex component.

The bulk of the logic is handled by the Popper.js which is a tooltip/popover positioning library. The library also has a React hooks wrapper, react-popper which is how I interact with the API. I chose this library over one of the premade react component because we need flexibility in how the popover is styled on smaller screens. In the designs we've chosen to make the popovers full screen in our smallest breakpoint. This gives us plenty of real estate for the popover content and avoids a lot of the issues we may run into if trying to position the popover.

The small breakpoint is detected using the react-use-css-breakpoints library. This small library gets the current breakpoint name by reading the content property on the body::before pseudo element which is changed for each breakpoint. This allows us to define our CSS breakpoints in one place and dynamically react to the screen resizing.

To avoid any issues with z-index, overflowing content, etc, the Popover component is rendered in a React portal. This is an element that is parented to the document.body element, but can be managed in the Popover component itself.

Some other things to note:

• Storybook.js has a dependency conflict with react-popper so I've aliased react-popper to react-popper-2. This is done with this line in package.json "react-popper-2": "npm:react-popper@^2.2.3". We should be able to resolve this soon, I'm tracking this issue
• The rounded popover arrow in the design was sorta tricky. I looked into CSS clip-path, but there's some artifacts and I couldn't get the exact look I wanted, so I went with a small inline svg instead, utilizing the svgr library.
• The trigger/reference element for the popover is rendered by providing a function for the children. This is because we need to pass the trigger ref and some state down to the trigger element. You can read more about this technique here.
• I then also had to change our ToolbarButton component to accept the ref property by wrapping it in forwardRef.
• The content property for the tooltip can either be an element or a component. This gives us a bit of flexibility and when you provide a component, the component will receive the closePopover prop. This is helpful if the content of the popover has logic that will force the popover to close.
• You can test all the various options for Popover placement in the Controls tab of Storybook.