Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dialog][joy] Add DialogActions, DialogTitle and DialogContent #38382

Merged
merged 20 commits into from
Sep 7, 2023
Merged

[Dialog][joy] Add DialogActions, DialogTitle and DialogContent #38382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1de031f
use Card styles in ModalDialog
siriwatknp Aug 8, 2023
a231828
wip
siriwatknp Aug 8, 2023
18d0e70
add invertedColors
siriwatknp Aug 8, 2023
4aaa914
fix demos
siriwatknp Aug 8, 2023
134a00e
add min max width props
siriwatknp Aug 8, 2023
6ff5516
add DialogActions
siriwatknp Aug 8, 2023
0bdd93d
adjust DialogTitle and Content
siriwatknp Aug 8, 2023
286b561
Fix demos
siriwatknp Aug 8, 2023
c66a7b1
complete
siriwatknp Aug 8, 2023
d734d3a
fix CardActions and demos
siriwatknp Aug 9, 2023
f3e24a2
run scripts
siriwatknp Aug 9, 2023
d389e10
fix lint
siriwatknp Aug 9, 2023
3b64a54
Merge branch 'master' of https://github.com/mui/material-ui into joy/…
siriwatknp Aug 22, 2023
f122a04
styles adjustment
siriwatknp Aug 22, 2023
2b0f805
run scripts
siriwatknp Aug 22, 2023
148d32e
Fix demo
siriwatknp Aug 22, 2023
8cc6b2a
Tiny design tweaks
zanivan Sep 6, 2023
a37ca3f
Merge branch 'joy/dialog-titlecontent' of https://github.com/siriwatk…
zanivan Sep 6, 2023
105d699
Merge branch 'master' of https://github.com/mui/material-ui into joy/…
siriwatknp Sep 7, 2023
c20cc7e
run scripts
siriwatknp Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions docs/data/joy/components/divider/DividerInModalDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
36 changes: 16 additions & 20 deletions docs/data/joy/components/divider/DividerInModalDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
35 changes: 14 additions & 21 deletions docs/data/joy/components/modal/AlertDialogModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
Expand Down
35 changes: 14 additions & 21 deletions docs/data/joy/components/modal/AlertDialogModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
Expand Down
11 changes: 1 addition & 10 deletions docs/data/joy/components/modal/BasicModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 1 addition & 10 deletions docs/data/joy/components/modal/BasicModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 5 additions & 12 deletions docs/data/joy/components/modal/BasicModalDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
Expand Down
17 changes: 5 additions & 12 deletions docs/data/joy/components/modal/BasicModalDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
Expand Down
8 changes: 3 additions & 5 deletions docs/data/joy/components/modal/DialogVerticalScroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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' }}
Expand Down
8 changes: 3 additions & 5 deletions docs/data/joy/components/modal/DialogVerticalScroll.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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' }}
Expand Down
Loading