[popup]: extend light dismiss capabilities

[yinonov]

The problem

https://github.com/Vonage/vivid-3/blob/b4c9b0af36f787cfc47f13de6a3f144921c5a6be/libs/components/src/lib/popup/README.md?plain=1#L72-L74

Light dismiss implementation in popup isn't sufficient according to the open-ui spec and other explainers - There's more to it than click outside

behavior should support closing when click outside, click on close button, click on anchor, click on escape, resize, scroll etc'.

question: should we add indication on how popup was closed in the fired closing event? such detail on closing exist in a dialog pattern.

see also

@yinonov When the anchor is in focus, pressing ESC closes the popup. I am not sure it is part of the light dismiss. I made a research, don't remember all of it, but tooltip should close on ESC. Here for example: https://www.lightningdesignsystem.com/accessibility/patterns/tooltip/

_Originally posted by @rinaok in https://github.com/Vonage/vivid-3/pull/676#discussion_r970682471_

https://open-ui.org/components/popup.research (Search page for light dismiss)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/

The solution

as native popup seem to gain support and attention, we should adopt a polyfill and set our course towards using the specified interface instead of patching in all its requirements ourselves.

https://github.com/oddbird/popup-polyfill

Business priority

Medium Priority = upcoming release but is not pressing

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[yinonov]

needs triage

[rinaok]

Steps to add popup-polyfill:

• Install it with npm install @oddbird/popup-polyfill
• Add popup attribute to our popup component (It should be named data-popup because this feature is still experimental).
• The popup attribute can take the following values: auto, hint, manual.
• Implement all popup APIs and document it.
• Use the :open and ::backdrop features.

API

• The method show() will call showPopup() and hide() will call hidePopup().
• Use the popuptoggletarget, popupshowtarget and popuphidetarget on the trigger elements.
• Light-dismiss attribute will apply manual value to the popup attribute.

[rinaok]

https://docs.google.com/document/d/1NTiftSlmfq1ntwPK_9mPECiGg6Eo98l37PiiAwoT5j8/edit#heading=h.x623h7v63x38

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.