[Joy UI] Add Modal component (#34043)

mui · Sep 8, 2022 · c0424a5 · c0424a5
1 parent df0ebd5
commit c0424a5
Show file tree

Hide file tree

Showing 40 changed files with 2,819 additions and 5 deletions.
diff --git a/docs/data/joy/components/modal/AlertDialogModal.js b/docs/data/joy/components/modal/AlertDialogModal.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import DeleteForever from '@mui/icons-material/DeleteForever';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import Typography from '@mui/joy/Typography';
+
+export default function AlertDialogModal() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button
+        variant="outlined"
+        color="danger"
+        endIcon={<DeleteForever />}
+        onClick={() => setOpen(true)}
+      >
+        Discard
+      </Button>
+      <Modal
+        aria-labelledby="alert-dialog-modal-title"
+        aria-describedby="alert-dialog-modal-description"
+        open={open}
+        onClose={() => setOpen(false)}
+      >
+        <ModalDialog variant="outlined" role="alertdialog">
+          <Typography
+            id="alert-dialog-modal-title"
+            component="h2"
+            level="inherit"
+            fontSize="1.25em"
+            mb="0.25em"
+            startDecorator={<WarningRoundedIcon />}
+          >
+            Confirmation
+          </Typography>
+          <Typography
+            id="alert-dialog-modal-description"
+            textColor="text.tertiary"
+            mb={3}
+          >
+            Are you sure you want to discard all of your notes?
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+            <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
+              Discard notes
+            </Button>
+          </Box>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/joy/components/modal/BasicModal.js b/docs/data/joy/components/modal/BasicModal.js
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function BasicModal() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal
+        aria-labelledby="modal-title"
+        aria-describedby="modal-desc"
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+      >
+        <Sheet
+          variant="outlined"
+          sx={{
+            maxWidth: 500,
+            borderRadius: 'md',
+            p: 3,
+            boxShadow: 'lg',
+          }}
+        >
+          <ModalClose
+            variant="outlined"
+            sx={{
+              top: 'calc(-1/4 * var(--IconButton-size))',
+              right: 'calc(-1/4 * var(--IconButton-size))',
+              boxShadow: '0 2px 12px 0 rgba(0 0 0 / 0.2)',
+              borderRadius: '50%',
+              bgcolor: 'background.body',
+            }}
+          />
+          <Typography
+            component="h2"
+            id="modal-title"
+            level="h4"
+            textColor="inherit"
+            fontWeight="lg"
+            mb={1}
+          >
+            This is the modal title
+          </Typography>
+          <Typography id="modal-desc" textColor="text.tertiary">
+            Make sure to use <code>aria-labelledby</code> on the modal dialog with an
+            optional <code>aria-describedby</code> attribute.
+          </Typography>
+        </Sheet>
+      </Modal>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/joy/components/modal/BasicModalDialog.js b/docs/data/joy/components/modal/BasicModalDialog.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import TextField from '@mui/joy/TextField';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Stack from '@mui/joy/Stack';
+import Add from '@mui/icons-material/Add';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicModalDialog() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button
+        variant="outlined"
+        color="neutral"
+        startIcon={<Add />}
+        onClick={() => setOpen(true)}
+      >
+        New project
+      </Button>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <ModalDialog
+          aria-labelledby="basic-modal-dialog-title"
+          aria-describedby="basic-modal-dialog-description"
+          sx={{
+            maxWidth: 500,
+            borderRadius: 'md',
+            p: 3,
+            boxShadow: 'lg',
+          }}
+        >
+          <Typography
+            id="basic-modal-dialog-title"
+            component="h2"
+            level="inherit"
+            fontSize="1.25em"
+            mb="0.25em"
+          >
+            Create new project
+          </Typography>
+          <Typography
+            id="basic-modal-dialog-description"
+            mt={0.5}
+            mb={2}
+            textColor="text.tertiary"
+          >
+            Fill in the information of the project.
+          </Typography>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              setOpen(false);
+            }}
+          >
+            <Stack spacing={2}>
+              <TextField label="Name" autoFocus required />
+              <TextField label="Description" required />
+              <Button type="submit">Submit</Button>
+            </Stack>
+          </form>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/joy/components/modal/CloseModal.js b/docs/data/joy/components/modal/CloseModal.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function CloseModal() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal
+        aria-labelledby="close-modal-title"
+        open={open}
+        onClose={(event, reason) => {
+          alert(`Reason: ${reason}`);
+          setOpen(false);
+        }}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Sheet
+          variant="outlined"
+          sx={{
+            minWidth: 300,
+            borderRadius: 'md',
+            p: 3,
+          }}
+        >
+          <ModalClose variant="outlined" />
+          <Typography
+            component="h2"
+            id="close-modal-title"
+            level="h4"
+            textColor="inherit"
+            fontWeight="lg"
+          >
+            Modal title
+          </Typography>
+        </Sheet>
+      </Modal>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/joy/components/modal/FadeModalDialog.js b/docs/data/joy/components/modal/FadeModalDialog.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Transition } from 'react-transition-group';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+
+export default function FadeModalDialog() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Transition in={open} timeout={400}>
+        {(state) => (
+          <Modal
+            keepMounted
+            open={!['exited', 'exiting'].includes(state)}
+            onClose={() => setOpen(false)}
+            componentsProps={{
+              backdrop: {
+                sx: {
+                  opacity: 0,
+                  backdropFilter: 'none',
+                  transition: `opacity 400ms, backdrop-filter 400ms`,
+                  ...{
+                    entering: { opacity: 1, backdropFilter: 'blur(8px)' },
+                    entered: { opacity: 1, backdropFilter: 'blur(8px)' },
+                  }[state],
+                },
+              },
+            }}
+            sx={{
+              visibility: state === 'exited' ? 'hidden' : 'visible',
+            }}
+          >
+            <ModalDialog
+              aria-labelledby="fade-modal-dialog-title"
+              aria-describedby="fade-modal-dialog-description"
+              sx={{
+                opacity: 0,
+                transition: `opacity 300ms`,
+                ...{
+                  entering: { opacity: 1 },
+                  entered: { opacity: 1 },
+                }[state],
+              }}
+            >
+              <Typography
+                id="fade-modal-dialog-title"
+                component="h2"
+                level="inherit"
+                fontSize="1.25em"
+                mb="0.25em"
+              >
+                Transition modal
+              </Typography>
+              <Typography
+                id="fade-modal-dialog-description"
+                textColor="text.tertiary"
+              >
+                Using `react-transition-group` to create a fade animation.
+              </Typography>
+            </ModalDialog>
+          </Modal>
+        )}
+      </Transition>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/joy/components/modal/KeepMountedModal.js b/docs/data/joy/components/modal/KeepMountedModal.js
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+
+export default function KeepMountedModal() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal keepMounted open={open} onClose={() => setOpen(false)}>
+        <ModalDialog
+          aria-labelledby="keep-mounted-modal-title"
+          aria-describedby="keep-mounted-modal-description"
+        >
+          <Typography
+            id="keep-mounted-modal-title"
+            component="h2"
+            level="inherit"
+            fontSize="1.25em"
+            mb="0.25em"
+          >
+            Keep mounted modal
+          </Typography>
+          <Typography id="keep-mounted-modal-description" textColor="text.tertiary">
+            This modal is still in the DOM event though it is closed.
+          </Typography>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/joy/components/modal/LayoutModalDialog.js b/docs/data/joy/components/modal/LayoutModalDialog.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Stack from '@mui/joy/Stack';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+
+export default function LayoutModalDialog() {
+  const [open, setOpen] = React.useState('');
+  return (
+    <React.Fragment>
+      <Stack direction="row" spacing={1}>
+        <Button variant="outlined" color="neutral" onClick={() => setOpen('center')}>
+          Center
+        </Button>
+        <Button
+          variant="outlined"
+          color="neutral"
+          onClick={() => setOpen('fullscreen')}
+        >
+          Full screen
+        </Button>
+      </Stack>
+      <Modal open={!!open} onClose={() => setOpen('')}>
+        <ModalDialog
+          aria-labelledby="layout-modal-title"
+          aria-describedby="layout-modal-description"
+          layout={open || undefined}
+        >
+          <ModalClose />
+          <Typography
+            id="layout-modal-title"
+            component="h2"
+            level="inherit"
+            fontSize="1.25em"
+            mb="0.25em"
+          >
+            Modal Dialog
+          </Typography>
+          <Typography id="layout-modal-description" textColor="text.tertiary">
+            This is a <code>{open}</code> modal dialog. Press <code>esc</code> to
+            close it.
+          </Typography>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}