As a DS designer and developer, I want to have a new popover component available, because it is needed in the Simple Query Builder.
- The popover component is implemented according to the Figma specs and follows the behavior and accessibility principles defined in the component documentation.
- The popover's component-level tokens (available in this PR) are created according to the naming convention used to style the component and provide all the needed styling values
- The popover is documented in Storybook according to the specifications (see below)
Popovers do not have states, but we need to make it possible for implementers to define their position in relation to the element that triggers them (see notes):
- Top: right, center, left
- Bottom: right, center, left
- Left: bottom, center, top
- Right: bottom, center, top
This component has its own pages in Storybook, included by alphabetical order (see structure):
- A Popover page including controls: they allow users to enter custom text to replace the default content and to change the popover position
- can be closed/opened programmatically
- has prop: isShown or isVisible
- emits event update:isShown or update:isVisible so that it can be used with the .sync modifier
- is closed on click outside
- is closed on hover-out
- note in Changelog
- is exported in main.ts
- It would be ideal if the position of the popover could be defined via prop
- Regarding the popover triggering event: Ideally, the component should be revealed on click as a baseline, but implementers should be allowed to expand it (e.g. via prop) so mouse users can also see the popover on hover if needed.
- The closing event should also be controlled by the implenenters, and ideally follow the component documentation recommendations (unless we want to enforce this behavior in the component – or components): popovers that open on hover, should close when hover is removed from the trigger. Otherwise, only clicking outside the popover should dismiss it.
- A very similar (but slightly more complex) version of this component was implemented by the Tainted References team (see component in Storybook)