Dialog content inside of overlay?

[csenio]

Centering the dialog content would be much easier if it could be a child of the dialog overlay (since you could just flex center it). Here's a demo of where the current system falls a bit short:
https://codesandbox.io/s/alert-dialog-si7vz?file=/src/App.js

The border shows where the Content component is. I can't put the padding (which is needed on mobile) on another parent because of the way the modal is rendered.

So just curious if there is a specific reason these are rendered separately, really excited about this library!

[benoitgrelard]

Hey @jescowuester!

Super interesting that you are pointing that out.

We did think about this originally but decided not to do that because it complicates things like animating the overlay and the content separately (because for example if you're fading the overlay, your content would also be part of that fade because it's inside).

That said, we intended it in a way that would be possible to do both, because there's no reason you couldn't nest if you don't care about that animation/opacity issue with the overlay as a container.

But it seems since we added more and more functionality, we did put both the overlay and the content inside a portal each so that they stack properly without needing z-index trickery. The problem with that is that now even if you were to nest your content inside the overlay, they would still both be appended as separate nodes.

One thing could consider doing to allow your use case would be to add a portalled prop (similar to what we have in Popover), letting you decide if you want it in a portal. This way you could deactivate the portal on the Content part, and rely on the fact that the overlay will render in a portal.

Does that make sense? Would it help?

[csenio]

I think that could be helpful. On the other hand the default way it works is probably good enough, it just required a bit of a mindset shift for me at first :)

[benoitgrelard]

Thanks for your reply. We'll keep things as is for now then and monitor if other users are looking for this.

[benoitgrelard]

Btw, sorry I didn't get to your question earlier, not sure why but GitHub didn't notify me of it.

[csenio]

@benoitgrelard coming back to this one since I need to build some Dialogs that are larger than the viewport. For those I need to be able to scroll the overlay (with the modal inside it). This time I couldn't figure out a way to make this work without nesting the content inside the overlay.

[csenio]

played around a bit with the source code and it looks like this is not that straightforward since pretty much all mouse interactions (including scrolling) are blocked whenever the content is mounted.