primitives

primitives copied to clipboard

Description

With the current menus if you have content that taller than the available space (ex: menu with many options) that menu will be cut off by the viewport

Example from docs website:

While this might be able to be cleaned up in user land it requires a whole bunch of spaghetti code and is hard to maintain.

Luckily the underlying popper library floating-ui has a middle ware that supports sizing the popper content based on available space.. This PR add a prop containHeight that enables this behavior. When passed true the size middleware get called without any options. containHeight can also take all the options of size as an object as well.

Result:

https://user-images.githubusercontent.com/1192452/189739968-272c50ac-a5c5-4407-887a-bc67f68cc7e6.mp4

now the menu will be fully on screen 🎉

This looks very similar to my PR #1597 which has also been kinda just sitting there. I don't actually care which get's merged but it would awesome for one of them to be merged.

Thanks for this @hipstersmoothie , I left a follow up in the linked PR explaining our current position regarding changes to these options.

Superseded by #1942