Dialog: Support a responsive value for `isOpen`

[maximedegreve]

Description

In some cases you want to display data in a dialog on mobile but on desktop keep it on the page. This is currently not possible with this component due to the lack of responsive support on the isOpen value. Wrapping the dialog in a div and setting display: none on smaller breakpoints neither works.

Steps to reproduce

<Box sx={{ display: ['block', 'block', 'none'] }}>
     <Dialog title={TITLE} onClose={onClickClose}>test</Dialog
</Box>

Version

Latest

Browser

Safari

[joshblack]

Notes from Maintainer Sync (July 22nd)

Context from Slack: https://github.slack.com/archives/GACAW0NPM/p1721383080023129

We're going to leave this in the inbox this week while waiting for the conversation in Slack to resolve 👀

[lesliecdubs]

Notes from Maintainer Sync (August 5th)

It might be a good idea to experiment / prototype how this would work, testing focus management, declarative buttons of a Dialog, etc.

We should revisit this in a future planning cycle to see if we can dedicate some time to the explorations mentioned. Please let us know if there is any urgency around this sooner.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.