[All Popover Elements]: Investigate if the new Popover and Anchor API can replace Popper.js
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
This ticket is to investigate if it is possible to use the up and coming native Popover and Anchor API over Popper.js.
## 💬 Description
PopperJS is a third party package which is used to create popover functionality in components such as IcMenu, IcPopoverMenu and IcTooltip. The issue with PopperJS is that it is hard to diagnose any issues due to the support for native HTML elements. For example, if the popover is cut of from the viewport, it is difficult to find a solution without looking into the business logic of the component.
The placement of the popover in relation to the viewport is still an issue.
## 💰 Use value
This will allow us to move away from a third party tool and use the browser API which will be applied across all major browsers. In addition to this, removing a third party package will reduce package size.
## Additional info
Examples:
https://css-irl.info/anchor-positioning-and-the-popover-api/
https://css-tricks.com/almanac/properties/p/position-try-fallbacks/
caniuse anchor: https://caniuse.com/?search=anchor
caniuse popover: https://caniuse.com/?search=popover
Contributor guide
Research direction
Start by reviewing IcMenu, IcPopoverMenu, and IcTooltip, where PopperJS is used, then compare their placement behavior with the native Popover and Anchor APIs. Check browser support and viewport placement constraints using the linked compatibility references. Done means documenting whether the native APIs can replace PopperJS across these components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100