[Snackbar] Implement the component on the next branch (#7059)

docs/src/components/AppDrawer.js

@@ -77,7 +77,9 @@ function AppDrawer(props) {
   return (
     <Drawer
       className={props.className}
-      paperClassName={classes.paper}
+      classes={{
+        paper: classes.paper,
+      }}
       open={props.open}
       onRequestClose={props.onRequestClose}
       docked={props.docked}

docs/src/pages/component-api/AppBar/AppBar.md

@@ -11,6 +11,7 @@
 | position | enum:&nbsp;'static'<br>&nbsp;'fixed'<br>&nbsp;'absolute'<br> | 'fixed' | The positioning type. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Avatar/Avatar.md

@@ -14,6 +14,7 @@
 | srcSet | string |  | The `srcSet` attribute for the `img` element. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Badge/Badge.md

@@ -13,6 +13,7 @@
 | primary | bool | false | If `true`, the badge will use the primary badge colors. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/BottomNavigation/BottomNavigation.md

@@ -12,6 +12,7 @@
 | showLabels | bool | false | If `true`, all `BottomNavigationButton`s will show their labels. By default only the selected `BottomNavigationButton` will show its label. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md

@@ -11,6 +11,7 @@
 | showLabel | bool |  | If `true`, the BottomNavigationButton will show its label. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Button/Button.md

@@ -20,6 +20,7 @@
 | raised | bool | false | If `true`, the button will use raised styling. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Card/Card.md

@@ -9,11 +9,12 @@
 | raised | bool | false | If `true`, the card will use raised styling. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `card`
+- `root`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

docs/src/pages/component-api/Card/CardActions.md

@@ -10,11 +10,12 @@
 | disableActionSpacing | bool | false | If `true`, the card actions do not have additional margin. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `cardActions`
+- `root`
 - `actionSpacing`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)

docs/src/pages/component-api/Card/CardContent.md

@@ -8,11 +8,12 @@
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `cardContent`
+- `root`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

docs/src/pages/component-api/Card/CardHeader.md

@@ -11,11 +11,12 @@
 | title | node |  | The content of the Card Title. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `cardHeader`
+- `root`
 - `avatar`
 - `content`
 

docs/src/pages/component-api/Card/CardMedia.md

@@ -8,11 +8,12 @@
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `cardMedia`
+- `root`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

docs/src/pages/component-api/Checkbox/Checkbox.md

@@ -19,6 +19,7 @@
 | value | string |  | The value of the component. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Chip/Chip.md

@@ -13,6 +13,7 @@ Chips represent complex entities in small blocks, such as a contact.
 | onRequestDelete | function |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* `onClick` event targeting the delete icon element. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Dialog/Dialog.md

@@ -27,11 +27,12 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | transition | union:&nbsp;Function<br>&nbsp;Element<*><br> | Fade | Transition component. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `modal`
+- `root`
 - `dialog`
 - `dialogWidth-xs`
 - `dialogWidth-sm`

docs/src/pages/component-api/Dialog/DialogActions.md

@@ -9,6 +9,7 @@
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Dialog/DialogContent.md

@@ -9,6 +9,7 @@
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Dialog/DialogContentText.md

@@ -9,6 +9,7 @@
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Dialog/DialogTitle.md

@@ -10,6 +10,7 @@
 | disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, that can be usefull to can render an h4 instead of a |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Divider/Divider.md

@@ -11,6 +11,7 @@
 | light | bool | false | If `true`, the divider will have a lighter color. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Drawer/Drawer.md

@@ -14,18 +14,18 @@
 | leaveTransitionDuration | number | duration.leavingScreen | Customizes duration of leave animation (ms) |
 | onRequestClose | function |  | Callback fired when the internal modal requests to be closed. |
 | open | bool | false | If `true`, the drawer is open. |
-| paperClassName | string |  | The CSS class name of the paper element. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `paper`
-- `left`
-- `right`
-- `top`
-- `bottom`
+- `anchor-left`
+- `anchor-right`
+- `anchor-top`
+- `anchor-bottom`
 - `docked`
 - `modal`
 

docs/src/pages/component-api/Form/FormControl.md

@@ -12,6 +12,7 @@ Provides context such as dirty/focused/error/required for form inputs.
 | required | bool | false | If `true`, the label will indicate that the input is required. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Form/FormGroup.md

@@ -12,6 +12,7 @@ Upon focusing on one of the child controls, it will propagate `focused` to the l
 | row | bool | false | Display group of elements in a compact row. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Form/FormHelperText.md

@@ -11,6 +11,7 @@
 | error | bool |  | If `true`, helper text should be displayed in an error state. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Form/FormLabel.md

@@ -13,6 +13,7 @@
 | required | bool |  | If `true`, the label will indicate that the input is required. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Grid/Grid.md

@@ -23,6 +23,7 @@
 | xl | union:&nbsp;boolean, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Icon/Icon.md

@@ -15,6 +15,7 @@
 | primary | bool | false | If `true`, the button will use the theme's primary color. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/IconButton/IconButton.md

@@ -9,20 +9,23 @@ regarding the available icon options.
 | accent | bool | false | If `true`, will use the theme's accent color. |
 | children | node |  | The icon element. If a string is provided, it will be used as an icon font ligature. |
 | classes | object |  | Useful to extend the style applied to components. |
+| color | enum:&nbsp;'inherit'<br> |  | Determines the color of the `IconButton`. |
 | contrast | bool | false | If `true`, the icon button will use the theme's contrast color. |
 | disabled | bool | false | If `true`, the button will be disabled. |
 | disableRipple | bool | false | If `true`, the ripple will be disabled. |
-| iconClassName | string |  | The CSS class name of the icon element if child is a string. |
+| rootRef | function |  | Use that property to pass a ref callback to the root component. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `iconButton`
+- `root`
 - `disabled`
 - `accent`
 - `contrast`
+- `color-inherit`
 - `label`
 - `icon`
 - `keyboardFocused`

docs/src/pages/component-api/Input/Input.md

@@ -23,11 +23,12 @@
 | value | union:&nbsp;string<br>&nbsp;number<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `wrapper`
+- `root`
 - `formControl`
 - `inkbar`
 - `focused`

docs/src/pages/component-api/Input/InputLabel.md

@@ -15,6 +15,7 @@
 | shrink | bool |  | If `true`, the label is shrunk. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/Input/Textarea.md

@@ -18,6 +18,7 @@
 | value | string |  |  |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/List/List.md

@@ -14,6 +14,7 @@
 | subheader | node |  | The content of the component, normally `ListItem`. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/List/ListItem.md

@@ -14,12 +14,13 @@
 | divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `listItem`
-- `listItemContainer`
+- `root`
+- `container`
 - `keyboardFocused`
 - `default`
 - `dense`

docs/src/pages/component-api/List/ListItemAvatar.md

@@ -9,12 +9,13 @@ It's a simple wrapper to apply the `dense` mode styles to `Avatar`.
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `denseAvatar`
-- `denseAvatarIcon`
+- `root`
+- `icon`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

docs/src/pages/component-api/List/ListItemIcon.md

@@ -9,6 +9,7 @@ A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.

docs/src/pages/component-api/List/ListItemSecondaryAction.md

@@ -9,11 +9,12 @@
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `secondaryAction`
+- `root`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

docs/src/pages/component-api/List/ListItemText.md

@@ -11,6 +11,7 @@
 | secondary | node | false |  |
 
 Any other properties supplied will be spread to the root element.
+
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.