New component: Popover

[orion-cengage]

Need to create a new component that is visually similar to a tooltip, but is better for containing interactive elements and more complex content.

Figma: https://www.figma.com/file/z2H2qv9iYQX942LqToCuQE/Components---Data-Display?type=design&node-id=625%3A21846&t=O0EUkNbsDC83olKU-1

Inspiration:

• https://mantine.dev/core/popover
• https://carbondesignsystem.com/components/toggletip/usage/
• https://getbootstrap.com/docs/5.3/components/popovers/

AC

• 1.0 Popover is triggered by clicking on a focusable element (button, input, etc.). -- 1.1 you can set popover to be triggered on hover if necessary.
• 2.0 Positioning -- 2.1 Default positioning is centered below the trigger, but you can force it to appear above by default. -- 2.2 Use popper.js to adjust the position

• 3.0 Keyboard -- 3.1 Pressing Space or Enter also opens and closes the popover -- 3.2 When focus is inside the popover then you can press Escape to close, and focus goes back to the triggering element. -- 3.3 If there aren't any focusable elements inside the popover and focus is still on the triggering element, Escape does not close the popover.

-- 3.4 If there are focusable elements inside the popover, you should set focus automatically to the first item and trap focus inside the popover.

• 4.0 Popover width -- 4.1 Width can be manually set to any pixel value

-- 4.2 Width can also be set to automatically match the width of the triggering element

• 5.0 Disabled or unfocusable elements -- 5.1 (per Bootstrap) Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover. As a workaround, you’ll want to trigger the popover from a wrapper
  or , ideally made keyboard-focusable using tabindex="0".

  

  • 6.0 Popover anatomy and contents -- 6.1 You can put just about anything inside a popover, although putting something like a dropdown or tooltip is probably not advised. -- 6.2 Popover has a main content area, and optional header and footer --- 6.2.1 If scrolling is needed, in a dropdown like situation for instance, then the body section should scroll vertically with the header and footer remaining fixed in place if those elements are present. Do not scroll horizontally or let content bleed off the page.

  

  -- 6.3 There should be an option to turn off the pointer like in the example below:

  

  • 7.0 Accessibility (Taken from Mantine. We can tweak if necessary) -- Popover element has role="dialog" and aria-labelledby="target-id" attributes -- Target element has aria-haspopup="dialog", aria-expanded, aria-controls="popover-id" attributes

  • 8.0 We need a function to show the Popover as open by default when the page loads or after a particular action is triggered. This can be useful for tutorial style prompts -- As a result, we need the user to be able to add a button inside the popover to manually close the popover. -- We need to make sure developers can add "don't show this again" functionality so the user can tell the system to stop opening the popover by default.

  

  • 9.0 Dark mode inverse available.

  

[silvalaura]

Sarah has presented a use case that would like Popovers to support the ability of being open by default without click or hover. We should also have a got it button to dismiss it.