Popover component

[rolfsmeds]

Description

A generic component for creating popovers positioned to an anchor element. (Different from tooltips in that popovers can contain interactive elements like buttons and input fields.)

Use cases

• Custom dropdown fields (especially non-list-based ones)
• Popups opened from buttons (where the content is suitable for MenuBar)
• Interactive toggletips

Acceptance criteria

• [ ] Web Component vaadin-popover, Flow component PopOver, React component <PopOver>

Positioning

• [ ] API for designating another UI element as the anchor to which the popover is positioned (cf. Tooltip)
• [ ] API for specifying how the popover is positioned relative to the anchor element (cf. Tooltip)
• [ ] Popover follows the anchor when it moves within the viewport
• [ ] API for whether the popover should overlap the anchor (i.e. render on top of it, as opposed to outside its boundaries)
• [ ] API (could be just 4 custom css properties) for setting the offset between anchor and overlay (top, bottom, start, end)

Modality and focus

• [ ] API for toggling modal/non-modal (default should be non-modal)
• [ ] API for toggling modality curtain when modal
• [ ] Focus trap when modal
• [ ] API for setting automatically focusing the popover when opened

Open/close behavior

• [ ] API for setting how it opens: on anchor click (default?), on anchor hover, manual
• [ ] API for setting how it closes: on outside click and Esc (default?), on mouseout/Esc, manual
• [ ] Configurable hover and hide delays

Accessibility

• [ ] ARIA: role="dialog", APIs for setting aria-label and aria-labelledby
• [ ] Restores focus to previous element when closed

Styling

• [ ] Optional "wedge" pointing at anchor (maybe as theme variant?)
• [ ] Lumo styling: background --lumo-base-color, --lumo-box-shadow-m.

Miscellaneous

• [ ] API for setting popover dimensions
• [ ] API for setting popover classname

Possible later enhancements:

• Optional static header and footer, with scrollable content are in between (like Dialog)
• Optional title in header (like Dialog)
• (Feel free to propose more in comments)

General criteria

• [ ] APIs reviewed

• [ ] Design

• [ ] Performance

• [ ] UX/DX tests in Alpha

• [ ] Documentation:

• [ ] How to test?

• [ ] Limitations:

Security

• [ ] Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)