Skip to content

Commit

Permalink
feat(Snackbar): Modify default behavior of Snackbar and add Alert expl
Browse files Browse the repository at this point in the history
  • Loading branch information
JF-Cozy committed Jul 27, 2022
1 parent 1826b0e commit 6715212
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 2 deletions.
13 changes: 13 additions & 0 deletions react/MuiCozyTheme/makeOverrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -922,6 +922,12 @@ const makeOverrides = theme => ({
width: '100%',
fontWeight: 'bold'
}
},
MuiSnackbarContent: {
root: {
padding: '4px 12px',
backgroundColor: theme.palette.grey[600]
}
}
})

Expand Down Expand Up @@ -997,6 +1003,13 @@ const makeInvertedOverrides = invertedTheme => {
'&-info': makeAlertInvertedColor(invertedTheme, 'info')
}
}
},
MuiSnackbarContent: {
...makeOverrides(invertedTheme).MuiSnackbarContent,
root: {
...makeOverrides(invertedTheme).MuiSnackbarContent.root,
backgroundColor: invertedTheme.palette.grey[200]
}
}
}

Expand Down
82 changes: 81 additions & 1 deletion react/Snackbar/Readme.md
Original file line number Diff line number Diff line change
@@ -1 +1,81 @@
Re-export of @material-ui. See [the official API](https://v4.mui.com/api/snackbar/).
```jsx
import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
import Alert from 'cozy-ui/transpiled/react/Alert'
import Button from 'cozy-ui/transpiled/react/Buttons'
import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
import IconButton from 'cozy-ui/transpiled/react/IconButton'
import Typography from 'cozy-ui/transpiled/react/Typography'
import Icon from 'cozy-ui/transpiled/react/Icon'
import InfoIcon from 'cozy-ui/transpiled/react/Icons/Info'

initialState = { open: false }

const handleToggle = () => {setState(state => ({ open: !state.open }))}

;

<>
<Button
variant="ghost"
size="small"
label="Open snackbar"
onClick={handleToggle}
/>
<Snackbar
open={state.open}
message="This is a simple snackbar."
action={
<>
<Button variant="text" color="error" size="small" label="UNDO" onClick={handleToggle} />
<IconButton aria-label="close" color="inherit" onClick={handleToggle}>
<Icon icon={CrossIcon} size={14} />
</IconButton>
</>
}
onClose={handleToggle}
/>
</>
```

### With `Alert` inside the `Snackbar`

```jsx
import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
import Alert from 'cozy-ui/transpiled/react/Alert'
import Button from 'cozy-ui/transpiled/react/Buttons'
import Variants from 'cozy-ui/docs/components/Variants'

initialState = { open: isTesting() }

const handleToggle = () => {setState(state => ({ open: !state.open }))}

const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info']
const initialVariants = [{ primary: true, secondary: true, success: false, error: false, warning: false, info: false }]

;

<>
<Variants initialVariants={initialVariants} radio>
{variant => (
<>
<Snackbar open={state.open} onClose={handleToggle}>
<Alert
variant="filled"
elevation={6}
severity={Object.keys(variant).find(key => variant[key])}
onClose={handleToggle}
>
This is a {Object.keys(variant).find(key => variant[key])} message!
</Alert>
</Snackbar>
</>
)}
</Variants>
<Button
variant="ghost"
size="small"
label="Open snackbar"
onClick={handleToggle}
/>
</>
```
20 changes: 19 additions & 1 deletion react/Snackbar/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
import React, { forwardRef } from 'react'
import MuiSnackbar from '@material-ui/core/Snackbar'

export default MuiSnackbar
const Snackbar = forwardRef(({ children, ...props }, ref) => {
return (
<MuiSnackbar ref={ref} {...props}>
{children}
</MuiSnackbar>
)
})

Snackbar.displayName = 'Snackbar'

Snackbar.defaultProps = {
anchorOrigin: {
vertical: 'top',
horizontal: 'center'
}
}

export default Snackbar

0 comments on commit 6715212

Please sign in to comment.