[Dialog][joy] Add DialogActions, DialogTitle and DialogContent (m…

…ui#38382)
dhaub-exelixis · Sep 7, 2023 · 76a3521 · 76a3521
1 parent 8bf7458
commit 76a3521
Show file tree

Hide file tree

Showing 64 changed files with 1,763 additions and 446 deletions.
diff --git a/docs/data/joy/components/divider/DividerInModalDialog.js b/docs/data/joy/components/divider/DividerInModalDialog.js
@@ -1,45 +1,41 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import CardOverflow from '@mui/joy/CardOverflow';
 import ModalDialog from '@mui/joy/ModalDialog';
+import DialogTitle from '@mui/joy/DialogTitle';
+import DialogContent from '@mui/joy/DialogContent';
+import DialogActions from '@mui/joy/DialogActions';
 import Divider from '@mui/joy/Divider';
-import Typography from '@mui/joy/Typography';
 
 export default function DividerInModalDialog() {
   return (
     <ModalDialog
-      aria-labelledby="divider-modal-title"
-      aria-describedby="divider-modal-desc"
       sx={{
         // this custom styles is for demonstration purpose, you might not need them in your app
         position: 'static',
         transform: 'none',
         maxWidth: 300,
       }}
     >
-      <Typography fontSize="lg" fontWeight="lg" id="divider-modal-title">
-        Modal Title
-      </Typography>
+      <DialogTitle>Modal Title</DialogTitle>
       <Divider inset="none" />
-      <Typography level="body-sm" id="divider-modal-desc" fontSize="sm">
+      <DialogContent>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         Lorem Ipsum has been the industry standard dummy text ever since the 1500s
-      </Typography>
-      <Divider />
-      <Box
+      </DialogContent>
+      <CardOverflow
         sx={{
           bgcolor: 'background.level1',
-          px: 2,
-          py: 1.5,
-          m: 'calc(-1 * var(--ModalDialog-padding))',
-          mt: 0,
-          borderBottomLeftRadius: 'var(--ModalDialog-radius)',
-          borderBottomRightRadius: 'var(--ModalDialog-radius)',
-          textAlign: 'right',
         }}
       >
-        <Button size="sm">Got it!</Button>
-      </Box>
+        <Divider inset="context" />
+        <DialogActions
+          buttonFlex="none"
+          sx={{ pt: 1.5, justifyContent: 'flex-start' }}
+        >
+          <Button size="sm">Got it!</Button>
+        </DialogActions>
+      </CardOverflow>
     </ModalDialog>
   );
 }
diff --git a/docs/data/joy/components/divider/DividerInModalDialog.tsx b/docs/data/joy/components/divider/DividerInModalDialog.tsx
@@ -1,45 +1,41 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import CardOverflow from '@mui/joy/CardOverflow';
 import ModalDialog from '@mui/joy/ModalDialog';
+import DialogTitle from '@mui/joy/DialogTitle';
+import DialogContent from '@mui/joy/DialogContent';
+import DialogActions from '@mui/joy/DialogActions';
 import Divider from '@mui/joy/Divider';
-import Typography from '@mui/joy/Typography';
 
 export default function DividerInModalDialog() {
   return (
     <ModalDialog
-      aria-labelledby="divider-modal-title"
-      aria-describedby="divider-modal-desc"
       sx={{
         // this custom styles is for demonstration purpose, you might not need them in your app
         position: 'static',
         transform: 'none',
         maxWidth: 300,
       }}
     >
-      <Typography fontSize="lg" fontWeight="lg" id="divider-modal-title">
-        Modal Title
-      </Typography>
+      <DialogTitle>Modal Title</DialogTitle>
       <Divider inset="none" />
-      <Typography level="body-sm" id="divider-modal-desc" fontSize="sm">
+      <DialogContent>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         Lorem Ipsum has been the industry standard dummy text ever since the 1500s
-      </Typography>
-      <Divider />
-      <Box
+      </DialogContent>
+      <CardOverflow
         sx={{
           bgcolor: 'background.level1',
-          px: 2,
-          py: 1.5,
-          m: 'calc(-1 * var(--ModalDialog-padding))',
-          mt: 0,
-          borderBottomLeftRadius: 'var(--ModalDialog-radius)',
-          borderBottomRightRadius: 'var(--ModalDialog-radius)',
-          textAlign: 'right',
         }}
       >
-        <Button size="sm">Got it!</Button>
-      </Box>
+        <Divider inset="context" />
+        <DialogActions
+          buttonFlex="none"
+          sx={{ pt: 1.5, justifyContent: 'flex-start' }}
+        >
+          <Button size="sm">Got it!</Button>
+        </DialogActions>
+      </CardOverflow>
     </ModalDialog>
   );
 }
diff --git a/docs/data/joy/components/modal/AlertDialogModal.js b/docs/data/joy/components/modal/AlertDialogModal.js
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Divider from '@mui/joy/Divider';
+import DialogTitle from '@mui/joy/DialogTitle';
+import DialogContent from '@mui/joy/DialogContent';
+import DialogActions from '@mui/joy/DialogActions';
 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);
@@ -21,31 +22,23 @@ export default function AlertDialogModal() {
         Discard
       </Button>
       <Modal open={open} onClose={() => setOpen(false)}>
-        <ModalDialog
-          variant="outlined"
-          role="alertdialog"
-          aria-labelledby="alert-dialog-modal-title"
-          aria-describedby="alert-dialog-modal-description"
-        >
-          <Typography
-            id="alert-dialog-modal-title"
-            level="h2"
-            startDecorator={<WarningRoundedIcon />}
-          >
+        <ModalDialog variant="outlined" role="alertdialog">
+          <DialogTitle>
+            <WarningRoundedIcon />
             Confirmation
-          </Typography>
+          </DialogTitle>
           <Divider />
-          <Typography id="alert-dialog-modal-description" textColor="text.tertiary">
+          <DialogContent>
             Are you sure you want to discard all of your notes?
-          </Typography>
-          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', pt: 2 }}>
-            <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
+          </DialogContent>
+          <DialogActions>
             <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
               Discard notes
             </Button>
-          </Box>
+            <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+          </DialogActions>
         </ModalDialog>
       </Modal>
     </React.Fragment>

diff --git a/docs/data/joy/components/modal/AlertDialogModal.tsx b/docs/data/joy/components/modal/AlertDialogModal.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Divider from '@mui/joy/Divider';
+import DialogTitle from '@mui/joy/DialogTitle';
+import DialogContent from '@mui/joy/DialogContent';
+import DialogActions from '@mui/joy/DialogActions';
 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<boolean>(false);
@@ -21,31 +22,23 @@ export default function AlertDialogModal() {
         Discard
       </Button>
       <Modal open={open} onClose={() => setOpen(false)}>
-        <ModalDialog
-          variant="outlined"
-          role="alertdialog"
-          aria-labelledby="alert-dialog-modal-title"
-          aria-describedby="alert-dialog-modal-description"
-        >
-          <Typography
-            id="alert-dialog-modal-title"
-            level="h2"
-            startDecorator={<WarningRoundedIcon />}
-          >
+        <ModalDialog variant="outlined" role="alertdialog">
+          <DialogTitle>
+            <WarningRoundedIcon />
             Confirmation
-          </Typography>
+          </DialogTitle>
           <Divider />
-          <Typography id="alert-dialog-modal-description" textColor="text.tertiary">
+          <DialogContent>
             Are you sure you want to discard all of your notes?
-          </Typography>
-          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', pt: 2 }}>
-            <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
+          </DialogContent>
+          <DialogActions>
             <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
               Discard notes
             </Button>
-          </Box>
+            <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+          </DialogActions>
         </ModalDialog>
       </Modal>
     </React.Fragment>

diff --git a/docs/data/joy/components/modal/BasicModal.js b/docs/data/joy/components/modal/BasicModal.js
@@ -28,16 +28,7 @@ export default function BasicModal() {
             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.surface',
-            }}
-          />
+          <ModalClose variant="plain" sx={{ m: 1 }} />
           <Typography
             component="h2"
             id="modal-title"

diff --git a/docs/data/joy/components/modal/BasicModal.tsx b/docs/data/joy/components/modal/BasicModal.tsx
@@ -28,16 +28,7 @@ export default function BasicModal() {
             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.surface',
-            }}
-          />
+          <ModalClose variant="plain" sx={{ m: 1 }} />
           <Typography
             component="h2"
             id="modal-title"

diff --git a/docs/data/joy/components/modal/BasicModalDialog.js b/docs/data/joy/components/modal/BasicModalDialog.js
@@ -5,9 +5,10 @@ import FormLabel from '@mui/joy/FormLabel';
 import Input from '@mui/joy/Input';
 import Modal from '@mui/joy/Modal';
 import ModalDialog from '@mui/joy/ModalDialog';
+import DialogTitle from '@mui/joy/DialogTitle';
+import DialogContent from '@mui/joy/DialogContent';
 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);
@@ -22,17 +23,9 @@ export default function BasicModalDialog() {
         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 }}
-        >
-          <Typography id="basic-modal-dialog-title" level="h2">
-            Create new project
-          </Typography>
-          <Typography id="basic-modal-dialog-description">
-            Fill in the information of the project.
-          </Typography>
+        <ModalDialog>
+          <DialogTitle>Create new project</DialogTitle>
+          <DialogContent>Fill in the information of the project.</DialogContent>
           <form
             onSubmit={(event) => {
               event.preventDefault();

diff --git a/docs/data/joy/components/modal/BasicModalDialog.tsx b/docs/data/joy/components/modal/BasicModalDialog.tsx
@@ -5,9 +5,10 @@ import FormLabel from '@mui/joy/FormLabel';
 import Input from '@mui/joy/Input';
 import Modal from '@mui/joy/Modal';
 import ModalDialog from '@mui/joy/ModalDialog';
+import DialogTitle from '@mui/joy/DialogTitle';
+import DialogContent from '@mui/joy/DialogContent';
 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<boolean>(false);
@@ -22,17 +23,9 @@ export default function BasicModalDialog() {
         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 }}
-        >
-          <Typography id="basic-modal-dialog-title" level="h2">
-            Create new project
-          </Typography>
-          <Typography id="basic-modal-dialog-description">
-            Fill in the information of the project.
-          </Typography>
+        <ModalDialog>
+          <DialogTitle>Create new project</DialogTitle>
+          <DialogContent>Fill in the information of the project.</DialogContent>
           <form
             onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
               event.preventDefault();

diff --git a/docs/data/joy/components/modal/DialogVerticalScroll.js b/docs/data/joy/components/modal/DialogVerticalScroll.js
@@ -8,7 +8,7 @@ import Switch from '@mui/joy/Switch';
 import Modal from '@mui/joy/Modal';
 import ModalDialog from '@mui/joy/ModalDialog';
 import ModalClose from '@mui/joy/ModalClose';
-import Typography from '@mui/joy/Typography';
+import DialogTitle from '@mui/joy/DialogTitle';
 import Stack from '@mui/joy/Stack';
 
 export default function DialogVerticalScroll() {
@@ -42,11 +42,9 @@ export default function DialogVerticalScroll() {
           setLayout(undefined);
         }}
       >
-        <ModalDialog aria-labelledby="dialog-vertical-scroll-title" layout={layout}>
+        <ModalDialog layout={layout}>
           <ModalClose />
-          <Typography id="dialog-vertical-scroll-title" level="h2">
-            Vertical scroll example
-          </Typography>
+          <DialogTitle>Vertical scroll example</DialogTitle>
           <FormControl
             orientation="horizontal"
             sx={{ bgcolor: 'background.level2', p: 1, borderRadius: 'sm' }}

diff --git a/docs/data/joy/components/modal/DialogVerticalScroll.tsx b/docs/data/joy/components/modal/DialogVerticalScroll.tsx
@@ -8,7 +8,7 @@ import Switch from '@mui/joy/Switch';
 import Modal from '@mui/joy/Modal';
 import ModalDialog, { ModalDialogProps } from '@mui/joy/ModalDialog';
 import ModalClose from '@mui/joy/ModalClose';
-import Typography from '@mui/joy/Typography';
+import DialogTitle from '@mui/joy/DialogTitle';
 import Stack from '@mui/joy/Stack';
 
 export default function DialogVerticalScroll() {
@@ -44,11 +44,9 @@ export default function DialogVerticalScroll() {
           setLayout(undefined);
         }}
       >
-        <ModalDialog aria-labelledby="dialog-vertical-scroll-title" layout={layout}>
+        <ModalDialog layout={layout}>
           <ModalClose />
-          <Typography id="dialog-vertical-scroll-title" level="h2">
-            Vertical scroll example
-          </Typography>
+          <DialogTitle>Vertical scroll example</DialogTitle>
           <FormControl
             orientation="horizontal"
             sx={{ bgcolor: 'background.level2', p: 1, borderRadius: 'sm' }}