[Dialog] Allow custom portal target for a dialog.

[juanfabrega]

🚀 Feature request

Current Behavior

Currently a Dialog is portaled to the document body by default, with no possibility of placing it anywhere else in the dom tree.

Desired Behavior

Ideally the portal could be rendered anywhere in the DOM tree (still defaulting to the body).

Just to add some additional context to this. Our current issue is specifically with theming. We are looking to apply a custom theme to certain pages in our application. As such we want to add custom CSS properties that are scoped to certain selectors, and not just added to the :root. This works well, but because the modal cannot be contained within our themed selectors, it falls outside of the scope of the theme. If we could render the Dialog specifically inside a themed DOM node, that would solve our problem.

Suggested Solution

The simplest solution is to expose the containerRef from from the Portal component in the Dialog prop interface so that if included, the Dialog would be rendered into a custom Node. Failing to include the containerRef will default to the current behavior of rendering it in the body.

Who does this impact? Who is this for?

This will likely only be useful for advanced users. Our team does have a specific need due to the theming issue mentioned above.

Describe alternatives you've considered

With our current use case, we have considered applying global themes on the :root element which will them encompass the modal, but this quickly creates problems since we don't want certain global elements to be subject to custom theming meant for lower-level pages/components.

Additional context

N/A