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)

[knoobie]

Possible later enhancements:

Allow lazy loading of popover content. The popover content on the server side should only instantiiate once the popover is opened; not on the initial page load.

This might need some styling within the popover? Like a spinner / loading indicator so that the popover opens with e.g. 10x10rem and a spinner until the content was fetched so that the user gets instant feedback even for slower server inquiries. (Or: add a loading property the user can use for styling)

[jouni]

Lumo styling: background --lumo-base-color, --lumo-box-shadow-m

Minor addition: box-shadow should include a 1px outline in addition to box-shadow-m, like other overlays, but that should like already come from here: https://github.com/vaadin/web-components/blob/main/packages/vaadin-lumo-styles/mixins/overlay.js#L27

[jouni]

This is clearly only a potential future refactoring option, but just want to remind that the CSS anchor positioning API is what we should eventually use. It’s available in Chrome today. Similarly as the popover attribute.

[knoobie]

@rolfsmeds Do you also plan to add first-class integration into the Grid like done with the Tooltip so that I can use the Popover as alternative in there? I can see a lot of business application needing this kind of Popover.

[rolfsmeds]

Hadn't thought about that, actually, but it's a good idea. Would you mind creating a ticket for it @knoobie?

[knoobie]

We could update this epic and sneak it in there 😏 half joking; creating one tomorrow