mi6 / mi6/ic-ui-kit

[All Popover Elements]: Investigate if the new Popover and Anchor API can replace Popper.js

Open
#2,434 4 comments 0 reactions 0 assignees View on GitHub
spike
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.