design-system
design-system copied to clipboard
CMSgov
ModalDialog 'Portal' Id
What
Give a brief description of the style, component or pattern you want to propose.
Add a prop to the Dialog component to pass an id for the react portal root div.
Please include screenshots, code or guidance.
Why
Explain why you think this should be added to the Design System.
We only apply our styles when the div has an id starting with our app's name. This is to avoid potential collisions with the consistent header that the app runs within itself. We're looking at using the Dialog component instead of the custom one we have, but we can't pass an id to the Dialog's react portal div to make the styling distinction.
- Identify the need the item solves.
It solves the issue above, where we're able to reference the root react portal directly for styling. If there's another solution to this, we're open to it.
- Have you checked that it doesn't already exist in the Design System?
I saw the the dialogId prop, but that affects a lower level div. Our code means the element with the id needs to at least enclose the div containing the ds-c-dialog-wrap class.
- Can it serve more than one use case and be reusable in multiple scenarios? Please explain.
I could see other apps using this to do a similar separation of styles.
- Please include links to any examples, research or code to support your proposal, if available.
Hey @anthony-kopczyk,
We're in the process of swapping out the implementation of our Dialog component to use the native <dialog> element. That would mean it would no longer be in a separate React Portal in a different part of the DOM. It would instead be right where you render it under this component's parent React root. Does that sound like it would solve your problem?
@forrestbaer Haven't tested yet, but from inspecting the code it looks like what we need. Can probably close this issue, and we'll put in another issue if it turns out we need a modification when we're looking at that upgrade.