[core] Change style API (mui#6892)

Propose the following improvments:
- allow all the classnames to be extended with the classes property
- remove the duplication between the theme and the styleManager

.eslintrc.js

@@ -44,8 +44,10 @@ module.exports = {
     'no-prototype-builtins': 'off', // airbnb use error
     'object-curly-spacing': 'off', // use babel plugin rule
     'operator-linebreak': ['error', 'after'], // aibnb is disabling this rule
-    'babel/object-curly-spacing': ['error', 'always'],
     'no-restricted-properties': 'off', // To remove once react-docgen support ** operator.
+    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }], // airbnb use ignoreRestSiblings
+
+    'babel/object-curly-spacing': ['error', 'always'],
 
     'import/unambiguous': 'off',
     'import/no-unresolved': 'off',

docs/src/components/AppDrawer.js

@@ -121,7 +121,6 @@ AppDrawer.propTypes = {
 };
 
 AppDrawer.contextTypes = {
-  theme: PropTypes.object.isRequired,
   styleManager: PropTypes.object.isRequired,
 };
 

docs/src/components/Demo.js

@@ -61,7 +61,6 @@ const styleSheet = createStyleSheet('Demo', (theme) => {
 
 class Demo extends Component {
   static contextTypes = {
-    theme: PropTypes.object.isRequired,
     styleManager: PropTypes.object.isRequired,
   };
 

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

@@ -1,15 +1,25 @@
-AppBar
-======
+# AppBar
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | accent | bool | false | If `true`, the AppBar will use the theme's accent color. |
 | children | node |  | The content of the component. |
-| className | string |  | The CSS class name of the root 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:
+- `appBar`
+- `primary`
+- `accent`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiAppBar`.

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

@@ -1,19 +1,29 @@
-Avatar
-======
+# Avatar
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | alt | string | '' | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
 | children | node |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
-| className | string |  | The CSS class name of the root element. |
 | component | union:&nbsp;string<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | sizes | string |  | The `sizes` attribute for the `img` element. |
 | src | string |  | The `src` attribute for the `img` element. |
 | 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.
+This property accepts the following keys:
+- `root`
+- `defaultColor`
+- `img`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiAvatar`.

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

@@ -1,22 +1,33 @@
-Badge
-=====
+# Badge
 
 ```jsx
 <Badge badgeContent={4}>
   <Icon>folder</Icon>
 </Badge>
 ```
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | accent | bool | false | If `true`, the badge will use the accent badge colors. |
 | badgeClassName | string |  | The CSS class name of the badge element. |
 | <span style="color: #31a148">badgeContent *</span> | node |  | The content rendered within the badge. |
 | <span style="color: #31a148">children *</span> | node |  | The badge will be added relative to this node. |
-| className | string |  | The CSS class name of the root element. |
 | 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.
+This property accepts the following keys:
+- `root`
+- `badge`
+- `primary`
+- `accent`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiBadge`.

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

@@ -1,17 +1,25 @@
-BottomNavigation
-================
+# BottomNavigation
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| className | string |  | The CSS class name of the root element. |
 | index | number |  | The index of the currently selected `BottomNavigationButton`. |
 | onChange | function |  | Function called when the index changes. |
 | 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.
+This property accepts the following keys:
+- `root`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiBottomNavigation`.

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

@@ -1,16 +1,30 @@
-BottomNavigationButton
-======================
+# BottomNavigationButton
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| className | string |  | The CSS class name of the root element. |
 | icon | node |  | The icon element. If a string is provided, it will be used as a font ligature. |
 | label | node |  | The label element. |
 | 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.
+This property accepts the following keys:
+- `root`
+- `selected`
+- `selectedIconOnly`
+- `label`
+- `selectedLabel`
+- `hiddenLabel`
+- `icon`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiBottomNavigationButton`.

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

@@ -1,18 +1,14 @@
-Button
-======
+# Button
 
 ```jsx
 <Button>Hello World</Button>
 ```
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | accent | bool | false | If `true`, the button will use the theme's accent color. |
 | <span style="color: #31a148">children *</span> | node |  | The content of the button. |
-| className | string |  | The CSS class name of the root element. |
 | compact | bool | false | Uses a smaller minWidth, ideal for things like card actions. |
 | component | union:&nbsp;string<br>&nbsp;func<br> | 'button' | The component used for the root node. Either a string to use a DOM element or a component. |
 | contrast | bool | false | If `true`, the button will use the theme's contrast color. |
@@ -25,3 +21,27 @@ Props
 | 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.
+This property accepts the following keys:
+- `root`
+- `compact`
+- `label`
+- `primary`
+- `accent`
+- `contrast`
+- `raised`
+- `keyboardFocused`
+- `raisedPrimary`
+- `raisedAccent`
+- `raisedContrast`
+- `disabled`
+- `fab`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiButton`.

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

@@ -1,14 +1,22 @@
-Card
-====
+# Card
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| className | string |  | The CSS class name of the root element. |
 | 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`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiCard`.

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

@@ -1,15 +1,24 @@
-CardActions
-===========
+# CardActions
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | children | node |  | The content of the component. |
-| className | string |  | The CSS class name of the root element. |
 | 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`
+- `actionSpacing`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiCardActions`.

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

@@ -1,13 +1,21 @@
-CardContent
-===========
+# CardContent
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| className | string |  | The CSS class name of the root 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:
+- `cardContent`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiCardContent`.

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

@@ -1,16 +1,26 @@
-CardHeader
-==========
+# CardHeader
 
 
 
-Props
------
-
+## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | avatar | node |  | The Avatar  for the Card Header. |
-| className | string |  | The CSS class name of the root element. |
 | subheader | node |  | The content of the component. |
 | 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`
+- `avatar`
+- `content`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiCardHeader`.