-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into fix-variant-mapping
- Loading branch information
Showing
68 changed files
with
3,281 additions
and
498 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
Oops, something went wrong.