mui
[docs] Bordered popups and arrows
- [x] I have followed (at least) the PR section of the contributing guide.
There are various ways to create arrows, including bordered ones.
This demo uses CSS border and places Arrow inside Positioner instead of Popup. This is recommended as it prevents it from being cut off if Popup is scrollable.
The calculations to position the arrow correctly can get complex with small 1px or 2px differences, which the demo uses CSS variables for.
Floating UI has a rule that the layout box of the arrow should be a square with equal width and height, which this particular demo doesn't follow. However, the rule exists only for when the side axis flips from x to y or vice-versa, because the width or height of the arrow changing causes its position to be wrong on the very first update. However, this is rarely seen in practice when scrolling or resizing since more updates typically occur after the axis flip. Plus, given we likely don't want a popover or tooltip to flip its side axis when scrolling (which will be the case when https://github.com/mui/base-ui/pull/817 is merged), this won't be seen by default - if the side axis is only changed based on the available viewport width, it's unlikely for this to be seen in practice as well.
I also think we should make demos for SVG arrows.
