diff --git a/docs/src/pages/demos/chips/ChipsPlayground.js b/docs/src/pages/demos/chips/ChipsPlayground.js
index 61ec72ed081d5d..47697e4c1f6aa4 100644
--- a/docs/src/pages/demos/chips/ChipsPlayground.js
+++ b/docs/src/pages/demos/chips/ChipsPlayground.js
@@ -47,7 +47,7 @@ class ChipsPlayground extends React.Component {
     const { classes } = this.props;
     const { color, onDelete, avatar } = this.state;
 
-    const colorToCode = color !== 'default' ? `color=${color}` : '';
+    const colorToCode = color !== 'default' ? `color=${color} ` : '';
 
     let onDeleteToCode;
     switch (onDelete) {
@@ -55,10 +55,10 @@ class ChipsPlayground extends React.Component {
         onDeleteToCode = '';
         break;
       case 'custom':
-        onDeleteToCode = 'deleteIcon={<DoneIcon />} onDelete={handleDelete}';
+        onDeleteToCode = 'deleteIcon={<DoneIcon />} onDelete={handleDelete} ';
         break;
       default:
-        onDeleteToCode = 'onDelete={handleDelete}';
+        onDeleteToCode = 'onDelete={handleDelete} ';
         break;
     }
 
@@ -69,15 +69,15 @@ class ChipsPlayground extends React.Component {
         avatarToCode = '';
         break;
       case 'img':
-        avatarToCode = 'avatar={<Avatar src="/static/images/uxceo-128.jpg" />}';
+        avatarToCode = 'avatar={<Avatar src="/static/images/uxceo-128.jpg" />} ';
         avatarToPlayground = <Avatar src="/static/images/uxceo-128.jpg" />;
         break;
       case 'letter':
-        avatarToCode = 'avatar={<Avatar>FH</Avatar>}';
+        avatarToCode = 'avatar={<Avatar>FH</Avatar>} ';
         avatarToPlayground = <Avatar>FH</Avatar>;
         break;
       default:
-        avatarToCode = 'avatar={<Avatar><FaceIcon /></Avatar>}';
+        avatarToCode = 'avatar={<Avatar><FaceIcon /></Avatar>} ';
         avatarToPlayground = (
           <Avatar>
             <FaceIcon />
@@ -88,7 +88,7 @@ class ChipsPlayground extends React.Component {
 
     const code = `
 \`\`\`jsx
-<Chip ${colorToCode} ${onDeleteToCode} ${avatarToCode} />
+<Chip ${colorToCode}${onDeleteToCode}${avatarToCode}/>
 \`\`\`
 `;
 
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index 86692c1a213953..462618c2d323f2 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -49,8 +49,7 @@ export const styles = theme => {
     },
     /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
     clickable: {
-      // Remove grey highlight
-      WebkitTapHighlightColor: 'transparent',
+      WebkitTapHighlightColor: 'transparent', // Remove grey highlight
       cursor: 'pointer',
       '&:hover, &:focus': {
         backgroundColor: emphasize(backgroundColor, 0.08),
@@ -64,8 +63,7 @@ export const styles = theme => {
      * Styles applied to the root element if
      * `onClick` and `color="primary"` is defined or `clickable={true}`.
      */
-    clickablePrimary: {
-      // Remove grey highlight
+    clickableColorPrimary: {
       '&:hover, &:focus': {
         backgroundColor: emphasize(theme.palette.primary.main, 0.08),
       },
@@ -77,8 +75,7 @@ export const styles = theme => {
      * Styles applied to the root element if
      * `onClick` and `color="secondary"` is defined or `clickable={true}`.
      */
-    clickableSecondary: {
-      // Remove grey highlight
+    clickableColorSecondary: {
       '&:hover, &:focus': {
         backgroundColor: emphasize(theme.palette.secondary.main, 0.08),
       },
@@ -93,13 +90,13 @@ export const styles = theme => {
       },
     },
     /* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */
-    deletablePrimary: {
+    deletableColorPrimary: {
       '&:focus': {
         backgroundColor: emphasize(theme.palette.primary.main, 0.2),
       },
     },
     /* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
-    deletableSecondary: {
+    deletableColorSecondary: {
       '&:focus': {
         backgroundColor: emphasize(theme.palette.secondary.main, 0.2),
       },
@@ -113,12 +110,12 @@ export const styles = theme => {
       fontSize: theme.typography.pxToRem(16),
     },
     /* Styles applied to the `avatar` element if `checked={true}` and `color="primary"` */
-    avatarPrimary: {
+    avatarColorPrimary: {
       color: darken(theme.palette.primary.contrastText, 0.1),
       backgroundColor: theme.palette.primary.dark,
     },
     /* Styles applied to the `avatar` element if `checked={true}` and `color="secondary"` */
-    avatarSecondary: {
+    avatarColorSecondary: {
       color: darken(theme.palette.secondary.contrastText, 0.1),
       backgroundColor: theme.palette.secondary.dark,
     },
@@ -150,14 +147,14 @@ export const styles = theme => {
       },
     },
     /* Styles applied to the deleteIcon element if `color="primary"`. */
-    deleteIconPrimary: {
+    deleteIconColorPrimary: {
       color: fade(theme.palette.primary.contrastText, 0.65),
       '&:hover, &:active': {
         color: theme.palette.primary.contrastText,
       },
     },
     /* Styles applied to the deleteIcon element if `color="secondary"`. */
-    deleteIconSecondary: {
+    deleteIconColorSecondary: {
       color: fade(theme.palette.primary.contrastText, 0.65),
       '&:hover, &:active': {
         color: theme.palette.primary.contrastText,
@@ -214,13 +211,13 @@ class Chip extends React.Component {
       classes,
       className: classNameProp,
       clickable,
+      color,
       component: Component,
       deleteIcon: deleteIconProp,
       label,
       onClick,
       onDelete,
       onKeyDown,
-      color,
       tabIndex: tabIndexProp,
       ...other
     } = this.props;
@@ -229,9 +226,12 @@ class Chip extends React.Component {
       classes.root,
       { [classes[`color${capitalize(color)}`]]: color !== 'default' },
       { [classes.clickable]: onClick || clickable },
-      { [classes[`clickable${capitalize(color)}`]]: (onClick || clickable) && color !== 'default' },
+      {
+        [classes[`clickableColor${capitalize(color)}`]]:
+          (onClick || clickable) && color !== 'default',
+      },
       { [classes.deletable]: onDelete },
-      { [classes[`deletable${capitalize(color)}`]]: onDelete && color !== 'default' },
+      { [classes[`deletableColor${capitalize(color)}`]]: onDelete && color !== 'default' },
       classNameProp,
     );
 
@@ -241,14 +241,14 @@ class Chip extends React.Component {
         deleteIconProp && React.isValidElement(deleteIconProp) ? (
           React.cloneElement(deleteIconProp, {
             className: classNames(deleteIconProp.props.className, classes.deleteIcon, {
-              [classes[`deleteIcon${capitalize(color)}`]]: color !== 'default',
+              [classes[`deleteIconColor${capitalize(color)}`]]: color !== 'default',
             }),
             onClick: this.handleDeleteIconClick,
           })
         ) : (
           <CancelIcon
             className={classNames(classes.deleteIcon, {
-              [classes[`deleteIcon${capitalize(color)}`]]: color !== 'default',
+              [classes[`deleteIconColor${capitalize(color)}`]]: color !== 'default',
             })}
             onClick={this.handleDeleteIconClick}
           />
@@ -259,7 +259,7 @@ class Chip extends React.Component {
     if (avatarProp && React.isValidElement(avatarProp)) {
       avatar = React.cloneElement(avatarProp, {
         className: classNames(classes.avatar, avatarProp.props.className, {
-          [classes[`avatar${capitalize(color)}`]]: color !== 'default',
+          [classes[`avatarColor${capitalize(color)}`]]: color !== 'default',
         }),
         childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName),
       });
diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
index e7424ebe88d206..8c00587a51c4a2 100644
--- a/packages/material-ui/src/Chip/Chip.test.js
+++ b/packages/material-ui/src/Chip/Chip.test.js
@@ -24,161 +24,40 @@ describe('<Chip />', () => {
   });
 
   describe('text only', () => {
-    let wrapper;
-
-    before(() => {
-      wrapper = shallow(<Chip className="my-Chip" data-my-prop="woofChip" />);
-    });
-
     it('should render a div containing a span', () => {
+      const wrapper = shallow(<Chip className="my-Chip" data-my-prop="woofChip" />);
       assert.strictEqual(wrapper.name(), 'div');
       assert.strictEqual(wrapper.childAt(0).is('span'), true, 'should be a span');
-    });
-
-    it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-Chip'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofChip');
-    });
-
-    it('should have a tabIndex prop with value -1', () => {
+      assert.strictEqual(wrapper.props()['data-my-prop'], 'woofChip');
       assert.strictEqual(wrapper.props().tabIndex, -1);
-    });
 
-    it('should render with the root classes but no others', () => {
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        false,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorPrimary), false);
+      assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false);
+      assert.strictEqual(wrapper.hasClass(classes.clickable), false);
+      assert.strictEqual(wrapper.hasClass(classes.clickableColorPrimary), false);
+      assert.strictEqual(wrapper.hasClass(classes.clickableColorSecondary), false);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), false);
+      assert.strictEqual(wrapper.hasClass(classes.deletableColorPrimary), false);
+      assert.strictEqual(wrapper.hasClass(classes.deletableColorSecondary), false);
     });
 
     it('should render with the root and the primary class', () => {
-      wrapper = shallow(<Chip className="my-Chip" data-my-prop="woofChip" color="primary" />);
+      const wrapper = shallow(<Chip className="my-Chip" data-my-prop="woofChip" color="primary" />);
 
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        true,
-        'should have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        false,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
     });
 
     it('should render with the root and the secondary class', () => {
-      wrapper = shallow(<Chip className="my-Chip" data-my-prop="woofChip" color="secondary" />);
-
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        true,
-        'should have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        false,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
+      const wrapper = shallow(
+        <Chip className="my-Chip" data-my-prop="woofChip" color="secondary" />,
       );
+
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true);
     });
   });
 
@@ -216,47 +95,8 @@ describe('<Chip />', () => {
     });
 
     it('should render with the root and clickable class', () => {
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        true,
-        'should have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        false,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.clickable), true);
     });
 
     it('should render with the root and clickable primary class', () => {
@@ -264,47 +104,10 @@ describe('<Chip />', () => {
         <Chip className="my-Chip" data-my-prop="woofChip" onClick={handleClick} color="primary" />,
       );
 
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        true,
-        'should have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        true,
-        'should have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        true,
-        'should have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        false,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
+      assert.strictEqual(wrapper.hasClass(classes.clickable), true);
+      assert.strictEqual(wrapper.hasClass(classes.clickableColorPrimary), true);
     });
 
     it('should render with the root and clickable secondary class', () => {
@@ -317,47 +120,10 @@ describe('<Chip />', () => {
         />,
       );
 
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        true,
-        'should have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        true,
-        'should have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        true,
-        'should have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        false,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true);
+      assert.strictEqual(wrapper.hasClass(classes.clickable), true);
+      assert.strictEqual(wrapper.hasClass(classes.clickableColorSecondary), true);
     });
   });
 
@@ -417,73 +183,16 @@ describe('<Chip />', () => {
       wrapper.setProps({ onDelete: onDeleteSpy });
 
       wrapper.find('pure(Cancel)').simulate('click', { stopPropagation: stopPropagationSpy });
-      assert.strictEqual(
-        stopPropagationSpy.callCount,
-        1,
-        'should have called the stopPropagation handler',
-      );
+      assert.strictEqual(stopPropagationSpy.callCount, 1);
     });
 
     it('should render with the root, deletable classes', () => {
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        true,
-        'should have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), true);
 
       const avatarWrapper = wrapper.childAt(0);
 
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatar),
-        true,
-        'should have the avatar class',
-      );
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatarPrimary),
-        false,
-        'should not have the avatarPrimary class',
-      );
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatarSecondary),
-        false,
-        'should not have the avatarSecondary class',
-      );
+      assert.strictEqual(avatarWrapper.hasClass(classes.avatar), true);
     });
 
     it('should render with the root, deletable and avatar primary classes', () => {
@@ -501,65 +210,15 @@ describe('<Chip />', () => {
           color="primary"
         />,
       );
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        true,
-        'should have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        true,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        true,
-        'should have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletableColorPrimary), true);
 
       const avatarWrapper = wrapper.childAt(0);
 
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatar),
-        true,
-        'should have the avatar class',
-      );
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatarPrimary),
-        true,
-        'should have the avatarPrimary class',
-      );
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatarSecondary),
-        false,
-        'should not have the avatarSecondary class',
-      );
+      assert.strictEqual(avatarWrapper.hasClass(classes.avatar), true);
+      assert.strictEqual(avatarWrapper.hasClass(classes.avatarColorPrimary), true);
     });
 
     it('should render with the root, deletable and avatar secondary classes', () => {
@@ -577,65 +236,15 @@ describe('<Chip />', () => {
           color="secondary"
         />,
       );
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        true,
-        'should have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        true,
-        'should not have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        true,
-        'should have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletableColorSecondary), true);
 
       const avatarWrapper = wrapper.childAt(0);
 
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatar),
-        true,
-        'should have the avatar class',
-      );
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatarPrimary),
-        false,
-        'should not have the avatarPrimary class',
-      );
-      assert.strictEqual(
-        avatarWrapper.hasClass(classes.avatarSecondary),
-        true,
-        'should have the avatarSecondary class',
-      );
+      assert.strictEqual(avatarWrapper.hasClass(classes.avatar), true);
+      assert.strictEqual(avatarWrapper.hasClass(classes.avatarColorSecondary), true);
     });
   });
 
@@ -658,192 +267,39 @@ describe('<Chip />', () => {
 
     it('should render a default icon with the root, deletable and deleteIcon classes', () => {
       const wrapper = shallow(<Chip label="Custom delete icon Chip" onDelete={() => {}} />);
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        true,
-        'should have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), true);
 
       const iconWrapper = wrapper.find(CancelIcon);
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIcon),
-        true,
-        'should have the deleteIcon class',
-      );
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIconPrimary),
-        false,
-        'should not have the deleteIcon class',
-      );
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIconSecondary),
-        false,
-        'should not have the deleteIcon class',
-      );
+      assert.strictEqual(iconWrapper.hasClass(classes.deleteIcon), true);
     });
 
     it('should render default icon with the root, deletable and deleteIcon primary class', () => {
       const wrapper = shallow(
         <Chip label="Custom delete icon Chip" onDelete={() => {}} color="primary" />,
       );
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        true,
-        'should have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        false,
-        'should not have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        true,
-        'should have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        true,
-        'should have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        false,
-        'should not have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletableColorPrimary), true);
 
       const iconWrapper = wrapper.find(CancelIcon);
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIcon),
-        true,
-        'should have the deleteIcon class',
-      );
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIconPrimary),
-        true,
-        'should have the deleteIconPrimary class',
-      );
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIconSecondary),
-        false,
-        'should not have the deleteIconSecondary class',
-      );
+      assert.strictEqual(iconWrapper.hasClass(classes.deleteIcon), true);
+      assert.strictEqual(iconWrapper.hasClass(classes.deleteIconColorPrimary), true);
     });
 
     it('should render a default icon with the root, deletable, deleteIcon secondary class', () => {
       const wrapper = shallow(
         <Chip label="Custom delete icon Chip" onDelete={() => {}} color="secondary" />,
       );
-      assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorPrimary),
-        false,
-        'should not have the colorPrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.colorSecondary),
-        true,
-        'should have the colorSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickable),
-        false,
-        'should not have the clickable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickablePrimary),
-        false,
-        'should not have the clickablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.clickableSecondary),
-        false,
-        'should not have the clickableSecondary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletable),
-        true,
-        'should have the deletable class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletablePrimary),
-        false,
-        'should not have the deletablePrimary class',
-      );
-      assert.strictEqual(
-        wrapper.hasClass(classes.deletableSecondary),
-        true,
-        'should have the deletableSecondary class',
-      );
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletable), true);
+      assert.strictEqual(wrapper.hasClass(classes.deletableColorSecondary), true);
 
       const iconWrapper = wrapper.find(CancelIcon);
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIcon),
-        true,
-        'should have the deleteIcon class',
-      );
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIconPrimary),
-        false,
-        'should not have the deleteIconPrimary class',
-      );
-      assert.strictEqual(
-        iconWrapper.hasClass(classes.deleteIconSecondary),
-        true,
-        'should not have the deleteIconSecondary class',
-      );
+      assert.strictEqual(iconWrapper.hasClass(classes.deleteIcon), true);
+      assert.strictEqual(iconWrapper.hasClass(classes.deleteIconColorSecondary), true);
     });
   });
 
diff --git a/pages/api/chip.md b/pages/api/chip.md
index 0bcbb3311ab78b..eb812552670737 100644
--- a/pages/api/chip.md
+++ b/pages/api/chip.md
@@ -39,19 +39,19 @@ This property accepts the following keys:
 | <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">clickable</span> | Styles applied to the root element if `onClick` is defined or `clickable={true}`.
-| <span class="prop-name">clickablePrimary</span> | 
-| <span class="prop-name">clickableSecondary</span> | 
+| <span class="prop-name">clickableColorPrimary</span> | 
+| <span class="prop-name">clickableColorSecondary</span> | 
 | <span class="prop-name">deletable</span> | Styles applied to the root element if `onDelete` is defined.
-| <span class="prop-name">deletablePrimary</span> | Styles applied to the root element if `onDelete` and `color="primary"` is defined.
-| <span class="prop-name">deletableSecondary</span> | Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
+| <span class="prop-name">deletableColorPrimary</span> | Styles applied to the root element if `onDelete` and `color="primary"` is defined.
+| <span class="prop-name">deletableColorSecondary</span> | Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
 | <span class="prop-name">avatar</span> | Styles applied to the `avatar` element.
-| <span class="prop-name">avatarPrimary</span> | Styles applied to the `avatar` element if `checked={true}` and `color="primary"`
-| <span class="prop-name">avatarSecondary</span> | Styles applied to the `avatar` element if `checked={true}` and `color="secondary"`
+| <span class="prop-name">avatarColorPrimary</span> | Styles applied to the `avatar` element if `checked={true}` and `color="primary"`
+| <span class="prop-name">avatarColorSecondary</span> | Styles applied to the `avatar` element if `checked={true}` and `color="secondary"`
 | <span class="prop-name">avatarChildren</span> | Styles applied to the `avatar` elements children.
 | <span class="prop-name">label</span> | Styles applied to the label `span` element`.
 | <span class="prop-name">deleteIcon</span> | Styles applied to the `deleteIcon` element.
-| <span class="prop-name">deleteIconPrimary</span> | Styles applied to the deleteIcon element if `color="primary"`.
-| <span class="prop-name">deleteIconSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"`.
+| <span class="prop-name">deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"`.
+| <span class="prop-name">deleteIconColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"`.
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Chip/Chip.js)
diff --git a/pages/demos/chips.js b/pages/demos/chips.js
index ea497f4ae5880c..454798df0af69f 100644
--- a/pages/demos/chips.js
+++ b/pages/demos/chips.js
@@ -15,18 +15,18 @@ module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/chips/Chips'), 'utf8')
 `,
         },
-        'pages/demos/chips/ChipsArray.js': {
-          js: require('docs/src/pages/demos/chips/ChipsArray').default,
+        'pages/demos/chips/ChipsPlayground.js': {
+          js: require('docs/src/pages/demos/chips/ChipsPlayground').default,
           raw: preval`
 module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/demos/chips/ChipsArray'), 'utf8')
+  .readFileSync(require.resolve('docs/src/pages/demos/chips/ChipsPlayground'), 'utf8')
 `,
         },
-        'pages/demos/chips/ChipsPlayground.js': {
-          js: require('docs/src/pages/demos/chips/ChipsPlayground').default,
+        'pages/demos/chips/ChipsArray.js': {
+          js: require('docs/src/pages/demos/chips/ChipsArray').default,
           raw: preval`
 module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/demos/chips/ChipsPlayground'), 'utf8')
+  .readFileSync(require.resolve('docs/src/pages/demos/chips/ChipsArray'), 'utf8')
 `,
         },
       }}