[IcSelect / IcMenu]: Add a placement prop to control the placement of IcMenu
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
Sometimes, the IcMenu will initially appear anchored to the bottom of an IcSelect while being cut off by the viewport. This ticket to add a placement prop so the position of the IcMenu can be explicitly set.
## 💬 Description
Clicking on IcSelect while it is positioned at the bottom of a viewport sometimes anchors the IcMenu below even if there is not enough space. As a result of this, the IcMenu is cut off. By having a placement prop, the position of IcMenu can be explicitly set to appear above IcMenu if required. This puts less onus on PopperJS which can, at times, be temperamental when dealing with the viewport.
## 💰 Use value
By explicitly positioning the popover element (i.e. IcMenu), consumers are able to avoid situations where the IcMenu is being cut off by the viewport
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given that I have clicked on an IcSelect*
*When the placement prop has been set to a particular position*
*Then the IcMenu should render in that position*
## ✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.
## Additional info
This is an issue caused by PopperJS which doesn't happen in all environments so it may potentially be a browser issue.
In the future, there is a desire to move away from PopperJS and use the Browser API for Popover and Anchor. There is currently a ticket to investigate this: https://github.com/mi6/ic-ui-kit/issues/2434
Contributor guide
Research direction
Locate the IcSelect and IcMenu implementations and trace how PopperJS currently determines placement. Review issue 2434 before starting, since it investigates moving away from PopperJS. Done means a placement prop can explicitly position IcMenu above or below IcSelect and the menu is not cut off in the described viewport case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100