[Chip] Add color prop to chip component (#12378)

* [Chip]: add color prop to chip component

* fix size limit

* rebase

* let's merge

.size-limit.js

@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.5 KB',
+    limit: '95.6 KB',
   },
   {
     name: 'The main bundle of the docs',

docs/src/pages/demos/chips/Chips.js

@@ -67,6 +67,32 @@ function Chips(props) {
         href="#chip"
         clickable
       />
+      <Chip
+        avatar={<Avatar>MB</Avatar>}
+        label="Clickable Link Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        label="Clickable Link Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="primary"
+      />
+      <Chip
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Clickable Link Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
     </div>
   );
 }

docs/src/pages/demos/chips/ChipsPlayground.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MarkdownElement from '@material-ui/docs/MarkdownElement';
+import Grid from '@material-ui/core/Grid';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import Paper from '@material-ui/core/Paper';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  control: {
+    padding: theme.spacing.unit * 2,
+  },
+  chipWrapper: {
+    marginBottom: theme.spacing.unit * 5,
+  },
+});
+
+class ChipsPlayground extends React.Component {
+  state = {
+    color: 'default',
+    onDelete: 'none',
+    avatar: 'none',
+  };
+
+  handleChange = key => (event, value) => {
+    this.setState({
+      [key]: value,
+    });
+  };
+
+  handleDeleteExample = () => {
+    alert('You clicked the delete icon.'); // eslint-disable-line no-alert
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { color, onDelete, avatar } = this.state;
+
+    const colorToCode = color !== 'default' ? `color=${color} ` : '';
+
+    let onDeleteToCode;
+    switch (onDelete) {
+      case 'none':
+        onDeleteToCode = '';
+        break;
+      case 'custom':
+        onDeleteToCode = 'deleteIcon={<DoneIcon />} onDelete={handleDelete} ';
+        break;
+      default:
+        onDeleteToCode = 'onDelete={handleDelete} ';
+        break;
+    }
+
+    let avatarToCode;
+    let avatarToPlayground;
+    switch (avatar) {
+      case 'none':
+        avatarToCode = '';
+        break;
+      case 'img':
+        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>} ';
+        avatarToPlayground = <Avatar>FH</Avatar>;
+        break;
+      default:
+        avatarToCode = 'avatar={<Avatar><FaceIcon /></Avatar>} ';
+        avatarToPlayground = (
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        );
+        break;
+    }
+
+    const code = `
+\`\`\`jsx
+<Chip ${colorToCode}${onDeleteToCode}${avatarToCode}/>
+\`\`\`
+`;
+
+    return (
+      <Grid container className={classes.root}>
+        <Grid item xs={12}>
+          <Grid container justify="center" alignItems="center" spacing={40}>
+            <Grid item className={classes.chipWrapper}>
+              <Chip
+                label="Awesome Chip Component"
+                color={color}
+                deleteIcon={onDelete === 'custom' && <DoneIcon />}
+                onDelete={onDelete !== 'none' && this.handleDeleteExample}
+                avatar={avatarToPlayground}
+              />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.control}>
+            <Grid container spacing={24}>
+              <Grid item xs={12}>
+                <FormControl component="fieldset">
+                  <FormLabel>color</FormLabel>
+                  <RadioGroup
+                    row
+                    name="color"
+                    aria-label="color"
+                    value={color}
+                    onChange={this.handleChange('color')}
+                  >
+                    <FormControlLabel value="default" control={<Radio />} label="default" />
+                    <FormControlLabel value="primary" control={<Radio />} label="primary" />
+                    <FormControlLabel value="secondary" control={<Radio />} label="secondary" />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+              <Grid item xs={12}>
+                <FormControl component="fieldset">
+                  <FormLabel>onDelete</FormLabel>
+                  <RadioGroup
+                    row
+                    name="onDelete"
+                    aria-label="onDelete"
+                    value={onDelete}
+                    onChange={this.handleChange('onDelete')}
+                  >
+                    <FormControlLabel value="none" control={<Radio />} label="none" />
+                    <FormControlLabel value="default" control={<Radio />} label="default" />
+                    <FormControlLabel value="custom" control={<Radio />} label="custom" />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+              <Grid item xs={12}>
+                <FormControl component="fieldset">
+                  <FormLabel>avatar</FormLabel>
+                  <RadioGroup
+                    row
+                    name="avatar"
+                    aria-label="avatar"
+                    value={avatar}
+                    onChange={this.handleChange('avatar')}
+                  >
+                    <FormControlLabel value="none" control={<Radio />} label="none" />
+                    <FormControlLabel value="letter" control={<Radio />} label="letter" />
+                    <FormControlLabel value="img" control={<Radio />} label="img" />
+                    <FormControlLabel value="icon" control={<Radio />} label="icon" />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+        <Grid item xs={12}>
+          <MarkdownElement text={code} />
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+ChipsPlayground.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ChipsPlayground);

docs/src/pages/demos/chips/chips.md

@@ -17,14 +17,20 @@ not shown in context.
 
 Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter"
 and (string) Avatar.
+
 - Chips with the `onClick` property defined change appearance on focus,
-hover, and click.
+  hover, and click.
 - Chips with the `onDelete` property defined will display a delete
-icon which changes appearance on hover.
+  icon which changes appearance on hover.
 
 {{"demo": "pages/demos/chips/Chips.js"}}
 
+## Chip Playground
+
+{{"demo": "pages/demos/chips/ChipsPlayground.js"}}
+
 ## Chip array
+
 An example of rendering multiple Chips from an array of values.
 Deleting a chip removes it from the array. Note that since no
 `onClick` property is defined, the Chip can be focused, but does not

packages/material-ui/src/Chip/Chip.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { StandardProps, PropTypes } from '..';
 
 export interface ChipProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
+  color?: PropTypes.Color;
   avatar?: React.ReactElement<any>;
   clickable?: boolean;
   component?: React.ReactType<ChipProps>;
@@ -15,11 +16,19 @@ export interface ChipProps
 export type ChipClassKey =
   | 'root'
   | 'clickable'
+  | 'clickablePrimary'
+  | 'clickableSecondary'
   | 'deletable'
+  | 'deletablePrimary'
+  | 'deletableSecondary'
   | 'avatar'
+  | 'avatarPrimary'
+  | 'avatarSecondary'
   | 'avatarChildren'
   | 'label'
-  | 'deleteIcon';
+  | 'deleteIcon'
+  | 'deleteIconPrimary'
+  | 'deleteIconSecondary';
 
 declare const Chip: React.ComponentType<ChipProps>;