primitives

primitives copied to clipboard

When no container is provided to a Portal'd element (eg. Dialog), it is portal'd to the body through the use of a hard coded default location globalThis?.document?.body.

It would be nice if there was a way to override this default location, even if only in non-prod environments.

Use Case: Testing dialogs (or any portal'd content) in Storybook leads to a lot of frustrations if you have applied any custom styles. Storybook will load your stories under "storybook-root", but the portal'd content (obviously) loads under body and not the "storybook-root".

Not really sure what this would look like, but it would be great if you could set some kind of global (eg. globalThis.RADIX_PORTAL_ROOT = '#storybook-root') with a selector. Then before falling back to the body, the portal could attempt to find the selector if any was provided.

For now I've gotten around this issue using a preview-body.html, but having this feature would be a lot easier.

🙏🏻