Popover position improvement idea

[ellatrix]

Alternative to the idea proposed in #21275.

The popover position API is very clunky and it tries to satisfy a lot of different positioning needs.

What if we provide a base rectangle and allow popovers to be positioned from there, purely in CSS? Why reinvent the wheel and maintain or introduce a positioning API if CSS provides a great one?

How could this be done?

Instead of positioning a popover immediately at the target position, we position the wrapper popover div element exactly over the anchor element so that it has the same dimensions and positions (base rectangle).

^= Imagine a the popover div overlays the anchor div.

From there, the popover content div can take any relative position it wants through the CSS positioning API. You can even stretch it as an overlay (imagine a block overlay through a popover).

That's pretty much it. :)

Of course we can map the existing position API with CSS, and we can provide better JS shortcuts if we want. The point is for it to be powered by CSS under the hood and allow all the flexibility of CSS.

Cc @youknowriad.

[youknowriad]

I think a good position API would be good, I think in the ideal world, we'd compose UI components without writing any bit of CSS. That said, the current position API is definitely bad and also, this doesn't prevent us from actually basing the implementation of the Popover component the way you suggest above. (I'd also like a prop to not do anything aside cover the anchor) :P

Also cc @sarayourfriend @ItsJonQ since they integrated a new Popover component on the code base that needs to be brought in sync with the current one as well.

[ellatrix]

Right, it doesn't prevent us from making an API in JS that is powered by CSS under the hood. We can still use props as shortcuts.