[docs][Dialog] Add non-modal dialog docs & demo (#38684)

mui · Sep 18, 2023 · 436801b · 436801b
1 parent 1895fc3
commit 436801b
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 0 deletions.
diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import CssBaseline from '@mui/material/CssBaseline';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import Paper from '@mui/material/Paper';
+import Fade from '@mui/material/Fade';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export default function CookiesBanner() {
+  const [bannerOpen, setBannerOpen] = React.useState(true);
+
+  const closeBanner = () => {
+    setBannerOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <AppBar position="fixed" component="nav">
+        <Toolbar>
+          <IconButton size="large" edge="start" color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Container component="main" sx={{ pt: 3 }}>
+        <Toolbar />
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet.
+        </Typography>
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet.
+        </Typography>
+      </Container>
+      <TrapFocus open disableAutoFocus disableEnforceFocus>
+        <Fade appear={false} in={bannerOpen}>
+          <Paper
+            role="dialog"
+            aria-modal="false"
+            aria-label="Cookie banner"
+            square
+            variant="outlined"
+            tabIndex={-1}
+            sx={{
+              position: 'fixed',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              m: 0,
+              p: 2,
+              borderWidth: 0,
+              borderTopWidth: 1,
+            }}
+          >
+            <Stack
+              direction={{ xs: 'column', sm: 'row' }}
+              justifyContent="space-between"
+              gap={2}
+            >
+              <Box
+                sx={{
+                  flexShrink: 1,
+                  alignSelf: { xs: 'flex-start', sm: 'center' },
+                }}
+              >
+                <Typography fontWeight="bold">This website uses cookies</Typography>
+                <Typography variant="body2">
+                  example.com relies on cookies to improve your experience.
+                </Typography>
+              </Box>
+              <Stack
+                gap={2}
+                direction={{
+                  xs: 'row-reverse',
+                  sm: 'row',
+                }}
+                sx={{
+                  flexShrink: 0,
+                  alignSelf: { xs: 'flex-end', sm: 'center' },
+                }}
+              >
+                <Button size="small" onClick={closeBanner} variant="contained">
+                  Allow all
+                </Button>
+                <Button size="small" onClick={closeBanner}>
+                  Reject all
+                </Button>
+              </Stack>
+            </Stack>
+          </Paper>
+        </Fade>
+      </TrapFocus>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/CookiesBanner.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import CssBaseline from '@mui/material/CssBaseline';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import Paper from '@mui/material/Paper';
+import Fade from '@mui/material/Fade';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export default function CookiesBanner() {
+  const [bannerOpen, setBannerOpen] = React.useState(true);
+
+  const closeBanner = () => {
+    setBannerOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <AppBar position="fixed" component="nav">
+        <Toolbar>
+          <IconButton size="large" edge="start" color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Container component="main" sx={{ pt: 3 }}>
+        <Toolbar />
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet.
+        </Typography>
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet.
+        </Typography>
+      </Container>
+      <TrapFocus open disableAutoFocus disableEnforceFocus>
+        <Fade appear={false} in={bannerOpen}>
+          <Paper
+            role="dialog"
+            aria-modal="false"
+            aria-label="Cookie banner"
+            square
+            variant="outlined"
+            tabIndex={-1}
+            sx={{
+              position: 'fixed',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              m: 0,
+              p: 2,
+              borderWidth: 0,
+              borderTopWidth: 1,
+            }}
+          >
+            <Stack
+              direction={{ xs: 'column', sm: 'row' }}
+              justifyContent="space-between"
+              gap={2}
+            >
+              <Box
+                sx={{
+                  flexShrink: 1,
+                  alignSelf: { xs: 'flex-start', sm: 'center' },
+                }}
+              >
+                <Typography fontWeight="bold">This website uses cookies</Typography>
+                <Typography variant="body2">
+                  example.com relies on cookies to improve your experience.
+                </Typography>
+              </Box>
+              <Stack
+                gap={2}
+                direction={{
+                  xs: 'row-reverse',
+                  sm: 'row',
+                }}
+                sx={{
+                  flexShrink: 0,
+                  alignSelf: { xs: 'flex-end', sm: 'center' },
+                }}
+              >
+                <Button size="small" onClick={closeBanner} variant="contained">
+                  Allow all
+                </Button>
+                <Button size="small" onClick={closeBanner}>
+                  Reject all
+                </Button>
+              </Stack>
+            </Stack>
+          </Paper>
+        </Fade>
+      </TrapFocus>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
@@ -108,6 +108,15 @@ Touching "Cancel" in a confirmation dialog, or pressing Back, cancels the action
 
 {{"demo": "ConfirmationDialog.js"}}
 
+## Non-modal dialog
+
+Dialogs can also be non-modal, meaning they don't interrupt user interaction behind it.
+Visit [the Nielsen Norman Group article](https://www.nngroup.com/articles/modal-nonmodal-dialog/) for more in-depth guidance about modal vs. non-modal dialog usage.
+
+The demo below shows a persistent cookie banner, a common non-modal dialog use case.
+
+{{"demo": "CookiesBanner.js", "iframe": true}}
+
 ## Draggable dialog
 
 You can create a draggable dialog by using [react-draggable](https://github.com/react-grid-layout/react-draggable).