-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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.
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
[SnackbarUnstyled] Create component and useSnackbar
hook
#33227
Merged
mnajdova
merged 86 commits into
mui:master
from
ZeeshanTamboli:issue/27170-unstyled-snackbar
Oct 3, 2022
Merged
Changes from all commits
Commits
Show all changes
86 commits
Select commit
Hold shift + click to select a range
80ae697
SnackbarUnstyled initial commit
ZeeshanTamboli 93faaf9
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 4a723e6
fix api description
ZeeshanTamboli 47a69a4
add some more props
ZeeshanTamboli 9aa17ff
remove children prop description
ZeeshanTamboli f1d12be
add className in root props
ZeeshanTamboli d579e80
add some props
ZeeshanTamboli c38b6ee
add other event handlers
ZeeshanTamboli 1a78db1
support event handler callbacks from componentsProps.root
ZeeshanTamboli 22700a0
add other logic
ZeeshanTamboli 0946e49
add ref
ZeeshanTamboli adac738
add snackbarUnstyled classes
ZeeshanTamboli aba8c13
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 06a8e06
add SnackbarUnstyled describeConformanceUnstyled
ZeeshanTamboli d002a6f
yarn proptypes
ZeeshanTamboli 6a18a21
setup docs
ZeeshanTamboli 7c35ec2
add Basic usage docs
ZeeshanTamboli 53ee0a8
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 28e45ab
children prop should accept string
ZeeshanTamboli 0df128b
yarn proptypes
ZeeshanTamboli dd3714d
add Transition component demo
ZeeshanTamboli e53ba67
improve SnackbarUnstyled types
ZeeshanTamboli 8d3a9f7
refactor MUI Snackbar types to use types from SnackbarUnstyled
ZeeshanTamboli 873ee49
migrate MUI Core Snackbar component to use SnackbarUnstyled
ZeeshanTamboli d315491
fix types
ZeeshanTamboli 93b1260
yarn docs:i18n
ZeeshanTamboli 5626d6e
fix warning and add docs
ZeeshanTamboli 7db2c89
yarn docs:typescript:formatted
ZeeshanTamboli 29ddf1b
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 5e0eb9f
add OverrideableComponent
ZeeshanTamboli 73404d6
fix types
ZeeshanTamboli 31d7bb9
fix style identation
ZeeshanTamboli 79dbfb3
customize simple snackbar
danilo-leal 4274c96
customizing the second demo
danilo-leal 74b9fe5
typescript:formatted
danilo-leal 19cec80
resolve conflicts
ZeeshanTamboli a9d6dba
fix transition animation in demo
ZeeshanTamboli db26c45
revert changes in Material UI Snackbar component
ZeeshanTamboli b183f15
add useSnackbar hook
ZeeshanTamboli 6b48905
add useSnackbar demo
ZeeshanTamboli 63b5d45
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli f8fc88f
fix transition type
ZeeshanTamboli c079bd7
use Partial type instead
ZeeshanTamboli 9b0b01d
allow componentsProps callback and ownerState propagation
ZeeshanTamboli 769f592
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli f808f10
fix type
ZeeshanTamboli be61bbf
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 703581e
useSlotProps for Transition component as well
ZeeshanTamboli 11ba396
pass getTransitionProps to getSlotProps
ZeeshanTamboli a83e744
remove exited from dependency array
ZeeshanTamboli 1166248
Update packages/mui-base/src/SnackbarUnstyled/useSnackbar.ts
ZeeshanTamboli fec6230
resolve PR review changes
ZeeshanTamboli 14f01fc
yarn proptypes && yarn docs:api
ZeeshanTamboli 6a69771
remove Transition component and update demos
ZeeshanTamboli 8139c92
add return type of getRootProps
ZeeshanTamboli eb36dcf
add SnackbarUnstyled tests
ZeeshanTamboli 8ef2dd8
export UseSnackbarRootSlotOwnProps
ZeeshanTamboli 3790d12
Merge branch 'master' into issue/27170-unstyled-snackbar
mnajdova 263024c
Improve event handlers, resolve clickAwayListenerProps
mnajdova db053f3
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 7004d42
yarn proptypes && yarn docs:api
ZeeshanTamboli 88075fd
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 4c4716f
make the tests pass by passing props for event handlers
ZeeshanTamboli a23b408
docs: implement slide transition with react-transition-grou
ZeeshanTamboli 4433dc1
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli c315679
snackbar doc structure draft
samuelsycamore f2352c8
snackbar content first pass
samuelsycamore 4e99697
content second pass
samuelsycamore 3026d27
fix copypasta
samuelsycamore 07512b2
tweak frontmatter and tiny tense change
samuelsycamore d4585a0
introduce hook demo
samuelsycamore b4a091e
docs: class -> className
ZeeshanTamboli 62645e9
fix URL to ClickAwayListener component
ZeeshanTamboli 735c41e
docs: remove redundant line
ZeeshanTamboli a89fedc
expand basics section
samuelsycamore 5104048
typo
samuelsycamore 7cf394a
clarify what clickawaylistener does
samuelsycamore fccce93
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli eb5bbf2
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 6b57a10
yarn docs:api
ZeeshanTamboli e782ff3
change className signature pattern
ZeeshanTamboli f12673b
use optional chaining operator
ZeeshanTamboli 9408a8b
Merge branch 'master' into issue/27170-unstyled-snackbar
ZeeshanTamboli 28e7553
remove unnecessary type
ZeeshanTamboli 0a1e8ef
yarn docs:api
ZeeshanTamboli 6cb3dad
remove md specs and mention of position
samuelsycamore File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
163 changes: 163 additions & 0 deletions
163
docs/data/base/components/snackbar/TransitionComponentSnackbar.js
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,163 @@ | ||
import * as React from 'react'; | ||
import { Transition } from 'react-transition-group'; | ||
import { styled } from '@mui/system'; | ||
import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; | ||
import CloseIcon from '@mui/icons-material/Close'; | ||
import SnackbarUnstyled from '@mui/base/SnackbarUnstyled'; | ||
|
||
const blue = { | ||
50: '#F0F7FF', | ||
100: '#DAECFF', | ||
400: '#3399FF', | ||
600: '#0072E5', | ||
900: '#003A75', | ||
}; | ||
|
||
const grey = { | ||
200: '#E0E3E7', | ||
800: '#2D3843', | ||
}; | ||
|
||
const StyledSnackbar = styled(SnackbarUnstyled)` | ||
position: fixed; | ||
z-index: 5500; | ||
display: flex; | ||
bottom: 16px; | ||
right: 16px; | ||
max-width: 560px; | ||
min-width: 300px; | ||
`; | ||
|
||
const SnackbarContent = styled('div')( | ||
({ theme }) => ` | ||
display: flex; | ||
overflow: hidden; | ||
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; | ||
border-radius: 8px; | ||
border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]}; | ||
box-shadow: ${ | ||
theme.palette.mode === 'dark' | ||
? `0 5px 13px -3px rgba(0,0,0,0.4)` | ||
: `0 5px 13px -3px ${grey[200]}` | ||
}; | ||
padding: 0.875rem; | ||
color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]}; | ||
font-family: IBM Plex Sans, sans-serif; | ||
font-weight: 500; | ||
text-align: start; | ||
position: relative; | ||
|
||
& .snackbar-message { | ||
flex: 1 1 0%; | ||
max-width: 100%; | ||
} | ||
|
||
& .snackbar-title { | ||
line-height: 1.5rem; | ||
margin-right: 0.5rem; | ||
} | ||
|
||
& .snackbar-description { | ||
line-height: 1.5rem; | ||
font-weight: 400; | ||
color: ${theme.palette.mode === 'dark' ? blue[100] : grey[800]}; | ||
} | ||
|
||
& .snackbar-close-icon { | ||
cursor: pointer; | ||
font-size: 10px; | ||
position: absolute; | ||
top: 0.725rem; | ||
right: 0.725rem; | ||
width: 1.25rem; | ||
height: 1.5rem; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
`, | ||
); | ||
|
||
const positioningStyles = { | ||
entering: 'translateX(0)', | ||
entered: 'translateX(0)', | ||
exiting: 'translateX(500px)', | ||
exited: 'translateX(500px)', | ||
unmounted: 'translateX(500px)', | ||
}; | ||
|
||
export default function TransitionComponentSnackbar() { | ||
const [open, setOpen] = React.useState(false); | ||
const [exited, setExited] = React.useState(true); | ||
const nodeRef = React.useRef(null); | ||
|
||
const handleClose = (_, reason) => { | ||
if (reason === 'clickaway') { | ||
return; | ||
} | ||
|
||
setOpen(false); | ||
}; | ||
|
||
const handleClick = () => { | ||
setOpen(true); | ||
}; | ||
|
||
const handleOnEnter = () => { | ||
setExited(false); | ||
}; | ||
|
||
const handleOnExited = () => { | ||
setExited(true); | ||
}; | ||
|
||
return ( | ||
<React.Fragment> | ||
<button type="button" onClick={handleClick}> | ||
Open snackbar | ||
</button> | ||
<StyledSnackbar | ||
autoHideDuration={5000} | ||
open={open} | ||
onClose={handleClose} | ||
exited={exited} | ||
> | ||
<Transition | ||
timeout={{ enter: 400, exit: 400 }} | ||
in={open} | ||
appear | ||
unmountOnExit | ||
onEnter={handleOnEnter} | ||
onExited={handleOnExited} | ||
nodeRef={nodeRef} | ||
> | ||
{(status) => ( | ||
<SnackbarContent | ||
style={{ | ||
transform: positioningStyles[status], | ||
transition: 'transform 300ms ease', | ||
}} | ||
ref={nodeRef} | ||
> | ||
<CheckRoundedIcon | ||
sx={{ | ||
flexShrink: 0, | ||
marginRight: '0.75rem', | ||
width: '1.25rem', | ||
height: '1.5rem', | ||
}} | ||
/> | ||
<div className="snackbar-message"> | ||
<div className="snackbar-title">Notifications sent</div> | ||
<div className="snackbar-description"> | ||
All your notifications were sent to the desired address. | ||
</div> | ||
</div> | ||
<CloseIcon onClick={handleClose} className="snackbar-close-icon" /> | ||
</SnackbarContent> | ||
)} | ||
</Transition> | ||
</StyledSnackbar> | ||
</React.Fragment> | ||
); | ||
} |
163 changes: 163 additions & 0 deletions
163
docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
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,163 @@ | ||
import * as React from 'react'; | ||
import { Transition } from 'react-transition-group'; | ||
import { styled } from '@mui/system'; | ||
import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; | ||
import CloseIcon from '@mui/icons-material/Close'; | ||
import SnackbarUnstyled, { SnackbarCloseReason } from '@mui/base/SnackbarUnstyled'; | ||
|
||
const blue = { | ||
50: '#F0F7FF', | ||
100: '#DAECFF', | ||
400: '#3399FF', | ||
600: '#0072E5', | ||
900: '#003A75', | ||
}; | ||
|
||
const grey = { | ||
200: '#E0E3E7', | ||
800: '#2D3843', | ||
}; | ||
|
||
const StyledSnackbar = styled(SnackbarUnstyled)` | ||
position: fixed; | ||
z-index: 5500; | ||
display: flex; | ||
bottom: 16px; | ||
right: 16px; | ||
max-width: 560px; | ||
min-width: 300px; | ||
`; | ||
|
||
const SnackbarContent = styled('div')( | ||
({ theme }) => ` | ||
display: flex; | ||
overflow: hidden; | ||
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; | ||
border-radius: 8px; | ||
border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]}; | ||
box-shadow: ${ | ||
theme.palette.mode === 'dark' | ||
? `0 5px 13px -3px rgba(0,0,0,0.4)` | ||
: `0 5px 13px -3px ${grey[200]}` | ||
}; | ||
padding: 0.875rem; | ||
color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]}; | ||
font-family: IBM Plex Sans, sans-serif; | ||
font-weight: 500; | ||
text-align: start; | ||
position: relative; | ||
|
||
& .snackbar-message { | ||
flex: 1 1 0%; | ||
max-width: 100%; | ||
} | ||
|
||
& .snackbar-title { | ||
line-height: 1.5rem; | ||
margin-right: 0.5rem; | ||
} | ||
|
||
& .snackbar-description { | ||
line-height: 1.5rem; | ||
font-weight: 400; | ||
color: ${theme.palette.mode === 'dark' ? blue[100] : grey[800]}; | ||
} | ||
|
||
& .snackbar-close-icon { | ||
cursor: pointer; | ||
font-size: 10px; | ||
position: absolute; | ||
top: 0.725rem; | ||
right: 0.725rem; | ||
width: 1.25rem; | ||
height: 1.5rem; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
`, | ||
); | ||
|
||
const positioningStyles = { | ||
entering: 'translateX(0)', | ||
entered: 'translateX(0)', | ||
exiting: 'translateX(500px)', | ||
exited: 'translateX(500px)', | ||
unmounted: 'translateX(500px)', | ||
}; | ||
|
||
export default function TransitionComponentSnackbar() { | ||
const [open, setOpen] = React.useState(false); | ||
const [exited, setExited] = React.useState(true); | ||
const nodeRef = React.useRef(null); | ||
|
||
const handleClose = (_: any, reason: SnackbarCloseReason) => { | ||
if (reason === 'clickaway') { | ||
return; | ||
} | ||
|
||
setOpen(false); | ||
}; | ||
|
||
const handleClick = () => { | ||
setOpen(true); | ||
}; | ||
|
||
const handleOnEnter = () => { | ||
setExited(false); | ||
}; | ||
|
||
const handleOnExited = () => { | ||
setExited(true); | ||
}; | ||
|
||
return ( | ||
<React.Fragment> | ||
<button type="button" onClick={handleClick}> | ||
Open snackbar | ||
</button> | ||
<StyledSnackbar | ||
autoHideDuration={5000} | ||
open={open} | ||
onClose={handleClose} | ||
exited={exited} | ||
> | ||
<Transition | ||
timeout={{ enter: 400, exit: 400 }} | ||
in={open} | ||
appear | ||
unmountOnExit | ||
onEnter={handleOnEnter} | ||
onExited={handleOnExited} | ||
nodeRef={nodeRef} | ||
> | ||
{(status) => ( | ||
<SnackbarContent | ||
style={{ | ||
transform: positioningStyles[status], | ||
transition: 'transform 300ms ease', | ||
}} | ||
ref={nodeRef} | ||
> | ||
<CheckRoundedIcon | ||
sx={{ | ||
flexShrink: 0, | ||
marginRight: '0.75rem', | ||
width: '1.25rem', | ||
height: '1.5rem', | ||
}} | ||
/> | ||
<div className="snackbar-message"> | ||
<div className="snackbar-title">Notifications sent</div> | ||
<div className="snackbar-description"> | ||
All your notifications were sent to the desired address. | ||
</div> | ||
</div> | ||
<CloseIcon onClick={handleClose} className="snackbar-close-icon" /> | ||
</SnackbarContent> | ||
)} | ||
</Transition> | ||
</StyledSnackbar> | ||
</React.Fragment> | ||
); | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: I have copied the design for this demo from Chakra UI
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cc @danilo-leal maybe we want to re-adjust the styles so that we have our own instead of copied from another library :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done some tinkering on the demos there 👌
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @danilo-leal ! Can you also take a look at the third demo I added now for the
useSnackbar
hook? Perhaps you want to tweak it as well.