[core] Normalize the API (#7099)

docs/src/components/ApiMenuComponents.js

@@ -31,7 +31,7 @@ class ApiMenuComponents extends Component {
     return (
       <div>
         <IconButton
-          contrast
+          color="contrast"
           onClick={this.handleMenuClick}
           aria-owns="api-menu"
           aria-haspopup="true"

docs/src/components/AppDrawer.js

@@ -88,7 +88,7 @@ function AppDrawer(props) {
       <div className={classes.nav}>
         <Toolbar className={classes.toolbar}>
           <Link className={classes.title} to="/" onClick={props.onRequestClose}>
-            <Typography type="title" gutterBottom colorInherit>
+            <Typography type="title" gutterBottom color="inherit">
               Material-UI
             </Typography>
           </Link>

docs/src/components/AppFrame.js

@@ -124,24 +124,32 @@ class AppFrame extends Component {
       <div className={classes.appFrame}>
         <AppBar className={appBarClassName}>
           <Toolbar>
-            <IconButton contrast onClick={this.handleDrawerToggle} className={navIconClassName}>
+            <IconButton
+              color="contrast"
+              onClick={this.handleDrawerToggle}
+              className={navIconClassName}
+            >
               <MenuIcon />
             </IconButton>
             {title !== null &&
-              <Typography className={classes.title} type="title" colorInherit noWrap>
+              <Typography className={classes.title} type="title" color="inherit" noWrap>
                 {title}
               </Typography>}
             <div className={classes.grow} />
             <AppSearch />
             <DemoButton routes={routes} />
             <ApiMenu routes={routes} />
-            <IconButton title="Toggle light/dark theme" contrast onClick={this.handleToggleShade}>
+            <IconButton
+              title="Toggle light/dark theme"
+              color="contrast"
+              onClick={this.handleToggleShade}
+            >
               <LightbulbOutline />
             </IconButton>
             <IconButton
               component="a"
               title="GitHub"
-              contrast
+              color="contrast"
               href="https://github.com/callemall/material-ui/tree/next"
             >
               <Github />

docs/src/components/DemoButton.js

@@ -25,7 +25,11 @@ function DemoButton(props) {
   }
 
   return (
-    <IconButton contrast component={Link} to={`/component-demos/${kebabCase(item.demo.name)}`}>
+    <IconButton
+      color="contrast"
+      component={Link}
+      to={`/component-demos/${kebabCase(item.demo.name)}`}
+    >
       <PlayCircleOutlineIcon />
     </IconButton>
   );

docs/src/pages/Home.js

@@ -49,10 +49,10 @@ function Home(props) {
       <div className={classes.hero}>
         <div className={classes.content}>
           <img src={muiLogo} alt="Material-UI Logo" className={classes.logo} />
-          <Typography type="display2" component="h1" colorInherit>
+          <Typography type="display2" component="h1" color="inherit">
             {'Material-UI'}
           </Typography>
-          <Typography type="subheading" component="h2" colorInherit>
+          <Typography type="subheading" component="h2" color="inherit">
             {"A React component library implementing Google's Material Design"}
           </Typography>
           <Button

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

@@ -5,23 +5,23 @@
 ## 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. |
 | classes | object |  | Useful to extend the style applied to components. |
+| color | enum:&nbsp;'inherit'<br>&nbsp;'primary'<br>&nbsp;'accent'<br> | 'primary' | The color of the component. It's using the theme palette when that makes sense. |
 | 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
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
-- `position-fixed`
-- `position-absolute`
-- `position-static`
-- `primary`
-- `accent`
+- `positionFixed`
+- `positionAbsolute`
+- `positionStatic`
+- `colorPrimary`
+- `colorAccent`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

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

@@ -16,12 +16,12 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
-- `defaultColor`
+- `colorDefault`
 - `img`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)

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

@@ -5,23 +5,21 @@
 ## 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. |
 | classes | object |  | Useful to extend the style applied to components. |
-| primary | bool | false | If `true`, the badge will use the primary badge colors. |
+| color | enum:&nbsp;'default'<br>&nbsp;'primary'<br>&nbsp;'accent'<br> | 'default' | The color of the component. It's using the theme palette when that makes sense. |
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 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`
+- `colorPrimary`
+- `colorAccent`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.

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

@@ -13,7 +13,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -12,7 +12,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -5,32 +5,31 @@
 ## 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. |
 | classes | object |  | Useful to extend the style applied to components. |
+| color | enum:&nbsp;'default', 'inherit', 'primary', 'accent', 'contrast'<br> | 'default' | The color of the component. It's using the theme palette when that makes sense. |
 | compact | bool | false | Uses a smaller minWidth, ideal for things like card actions. |
 | component | union:&nbsp;string<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
-| contrast | bool | false | If `true`, the button will use the theme's contrast color. |
 | disabled | bool | false | If `true`, the button will be disabled. |
 | disableFocusRipple | bool | false | If `true`, the  keyboard focus ripple will be disabled. `ripple` must also be true. |
 | disableRipple | bool | false | If `true`, the ripple effect will be disabled. |
 | fab | bool | false | If `true`, well use floating action button styling. |
 | href | string |  | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
-| primary | bool | false | If `true`, the button will use the theme's primary color. |
 | raised | bool | false | If `true`, the button will use raised styling. |
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 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`
+- `flatPrimary`
+- `flatAccent`
+- `flatContrast`
+- `colorInherit`
 - `raised`
 - `keyboardFocused`
 - `raisedPrimary`

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

@@ -10,7 +10,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -11,7 +11,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -9,7 +9,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -12,7 +12,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -9,7 +9,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -20,7 +20,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -7,14 +7,12 @@ Chips represent complex entities in small blocks, such as a contact.
 |:-----|:-----|:--------|:------------|
 | avatar | node |  | Avatar element. |
 | classes | object |  | Useful to extend the style applied to components. |
-| deleteIconClassName | string |  | The CSS class name of the delete icon element. |
 | label | node |  | The content of the label. |
-| labelClassName | string |  | The CSS `className` of the label. |
 | 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
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -28,15 +28,15 @@ Dialogs are overlaid modal paper based components with a backdrop.
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
 - `dialog`
-- `dialogWidth-xs`
-- `dialogWidth-sm`
-- `dialogWidth-md`
+- `dialogWidthXs`
+- `dialogWidthSm`
+- `dialogWidthMd`
 - `fullScreen`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)

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

@@ -10,7 +10,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -10,7 +10,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -10,7 +10,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -11,7 +11,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -12,7 +12,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -17,15 +17,15 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `paper`
-- `anchor-left`
-- `anchor-right`
-- `anchor-top`
-- `anchor-bottom`
+- `anchorLeft`
+- `anchorRight`
+- `anchorTop`
+- `anchorBottom`
 - `docked`
 - `modal`
 

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

@@ -13,7 +13,7 @@ Provides context such as dirty/focused/error/required for form inputs.
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -13,7 +13,7 @@ Upon focusing on one of the child controls, it will propagate `focused` to the l
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:

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

@@ -12,7 +12,7 @@
 
 Any other properties supplied will be spread to the root element.
 
-## Classes
+## CSS API
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys: