Thoughts on using dialog element?

[barbinbrad]

Just curious if anyone has any thoughts on converting some things like modal, tooltip, dialog to the native HTML dialog element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Looks like there isn't acceptable browser support, but there is a polyfill.

https://github.com/GoogleChrome/dialog-polyfill

I'm not advocating for this as much as I'm trying to understand the decision-making process for these kinds of changes.

[tcolinpa]

up

[benoitgrelard]

Just curious if anyone has any thoughts on converting some things like modal, tooltip, dialog to the native HTML dialog element.

Whilst Dialog and AlertDialog and possibly Popover could be good candidates, Tooltip wouldn't I don't think as it's not a dialog element.

I think the biggest issue would be overall system cohesion, as at the moment all the relevant primitives are based on the same underlying system to ensure correct layering, etc.

In a way, I feel like they should give use lower-level primitives like access to the "top-layer" promotion mechanism that the dialog uses, etc. It might be hard to unify otherwise.

Other concerns are around flexibility around styling, for example the ability to have a scrollable dialog where the outer is scrollable (this can be achieved by nesting the Content inside the Overlay part).

So all in all, perhaps something we can look at when it matures a bit more, but I don't see it being replaced in the short term.

[tcolinpa]

Just one more comment.

The recent (and experimental) Popover API (https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) gives more control over the dialog html element, and in some use cases, I think it's better suited if it ever gets stable.

[benoitgrelard]

Yes, the new popover API is also definitely something we'll keep under the radar in the future. There's also things like anchor positioning that are slowly making their way in the platform: https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning/. It's great to see but it will undoubtedly take time.

[penx]

@benoitgrelard have you had a chance to use the Popover API, now it's "baseline 2024"? I'm wondering if there are any significant issues you forsee in switching the Radix Popover and Menu, to using this (or making it opt in via a prop on the Popover/Menu Root), or if it's just a case of time/prioritisation?

[penx]

for context, I'd like to be able to build a top nav with dropdowns that are interactive before hydration - the popover API looks ideal for this