experiment: native dialog component

[lee-chase]

This adds an unstable_dialog component.

Created while investigating the possibility of creating a dialog component based on native dialog.

I included a side panel and tearsheet kind as part of the experiment.

Previously some questions have been raised here, perhaps it can be used to answer some of them.

#13807

Of note is that the modal form blocks the whole page. The modal dialogs can be nested.

Also quite a bit of the code added was to cope with the lack of support for
Unfortunately needed quite a bit of code to cope with the lack of support for some of the in/out styling

https://caniuse.com/mdn-css_at-rules_starting-style
https://caniuse.com/mdn-css_properties_display_is_transitionable

This much simpler code pen achieves a similar effect in Chrome and Edge
https://codepen.io/lee-chase/pen/QWPbRLp/9c8c3f23b42a395dc519839e12f5d647

NOTE: Use of :where([data-attri="xyz"]) done to see how it compares with BEM modifier overload. :where keeps the specificity low.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	f66b9ee
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/663bdb0a811de500083977be
😎 Deploy Preview	https://deploy-preview-15926--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[lee-chase]

The following branch contains nested dialogs. This appears to be problematic for various styling reasons:

1. Dialog sizes are based on their containers (easiest to see in non-modal)
2. Child dialogs sit obey normal stacking rules, so only appear over the top of content before them (see secondary button in image below).
3. The child dialogs cause layout issues in their parents (plain dialog with 3 open see image).

4. Several other styling issues not resolved try stacking tearsheet or side panel kinds. Although these are probably just a case of additional styling.

Modal versions work better.

https://github.com/lee-chase/carbon/tree/nativeDialogNest

[tay1orjones]

Thanks so much for looking into this, I agree - it answers quite a few questions!

The tooltip on the close button appears on top of the modal as intended, so that's great news. Once we get the autoAlign stuff in I'll be eager to test how it works with this.

I have a few other thoughts below. I wouldn't be opposed to eventually merging this in, not exporting it for now, and hiding the stories from the storybook. I think it's valuable to keep this on deck and continue to experiment, and merging it in would avoid PRs sitting around getting stale.

[tay1orjones]

I think this puts the Dialog component on a much better track than it was previously! I still think we should keep it internal-only at this point and not export it or include it in storybook. If those changes are made I'd personally love to see this merged.

From here we can continue to iterate on this and explore the extra areas like building a new Modal implementation atop it, etc.

[lee-chase]

@tay1orjones accepted/made changes to remove from storybook.

[tay1orjones]

I know it's silly but I'm genuinely excited about this one 😄
Native elements and standards feel so good.

[alisonjoseph]

Thanks for adding this 🥳