mi6 / mi6/ic-ui-kit

[ic-menu]: Investigate using Floating UI as an upgrade to Popper JS

Open
#462 0 comments 0 reactions 1 assignee Claimed by @GCHQ-Developer-112 View on GitHub
spike
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
Floating UI has replaced Popper JS. This ticket is to investigate whether it is worth moving to Floating UI.

## 💬 Description
PopperJS provides the pop-out functionality used in `ic-tooltips` and `ic-menu`. This has worked well but it can be difficult to resolve any problems caused by popper due to the methods available. Everything works underneath the `createPopper` method. Floating UI has separated out functionality into more granular methods providing more control. Floating UI is also a smaller package which will reduce the component library bundle size.

This may help with z-index issues. At the time of writing, adding an `ic-select` to `ic-dialog` cuts off the menu options due to how the menu is rendered. It's worth exploring if the menu can be rendered elsewhere but still be attached to its control. Similar to how `Portals` work with MUI

## 💰 Use value
This gives us more control over how our pop-out elements behave. By using more granular methods, it will be easier to spot and fix problems as well as reduce the bundle size of the component library.

## Additional info
Maybe a POC would be useful with a demo of what was found so a decision can be made.

Time boxed: 3 days

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.