Dialog: Support a responsive value for `isOpen`

primer / react

An implementation of GitHub's Primer Design System using React

https://primer.style/guides/react

MIT License

3.16k stars 536 forks source link

Dialog: Support a responsive value for `isOpen` #4755

Open maximedegreve opened 3 months ago

maximedegreve commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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.