Merge pull request #3870 from mbrookes/chip

[Chip] New component

docs/src/app/AppRoutes.js

@@ -24,6 +24,7 @@ import AutoCompletePage from './components/pages/components/AutoComplete/Page';
 import AvatarPage from './components/pages/components/Avatar/Page';
 import BadgePage from './components/pages/components/Badge/Page';
 import CardPage from './components/pages/components/Card/Page';
+import ChipPage from './components/pages/components/Chip/Page';
 import CircularProgressPage from './components/pages/components/CircularProgress/Page';
 import CheckboxPage from './components/pages/components/Checkbox/Page';
 import DatePicker from './components/pages/components/DatePicker/Page';
@@ -98,6 +99,7 @@ const AppRoutes = (
       <Route path="avatar" component={AvatarPage} />
       <Route path="badge" component={BadgePage} />
       <Route path="card" component={CardPage} />
+      <Route path="chip" component={ChipPage} />
       <Route path="circular-progress" component={CircularProgressPage} />
       <Route path="checkbox" component={CheckboxPage} />
       <Route path="date-picker" component={DatePicker} />

docs/src/app/components/AppNavDrawer.js

@@ -181,6 +181,7 @@ class AppNavDrawer extends Component {
                 ]}
               />,
               <ListItem primaryText="Card" value="/components/card" />,
+              <ListItem primaryText="Chip" value="/components/chip" />,
               <ListItem primaryText="Date Picker" value="/components/date-picker" />,
               <ListItem primaryText="Dialog" value="/components/dialog" />,
               <ListItem primaryText="Divider" value="/components/divider" />,

docs/src/app/components/pages/components/Chip/ExampleArray.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Chip from 'material-ui/Chip';
+
+/**
+ * An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array.
+ * Note that since no `onTouchTap` property is defined, the Chip can be focused, but does not gain depth
+ * while clicked or touched.
+ */
+export default class ChipExampleArray extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {chipData: [
+      {key: 0, label: 'Angular'},
+      {key: 1, label: 'JQuery'},
+      {key: 2, label: 'Polymer'},
+      {key: 3, label: 'ReactJS'},
+    ]};
+    this.styles = {
+      chip: {
+        margin: 4,
+      },
+      wrapper: {
+        display: 'flex',
+        flexWrap: 'wrap',
+      },
+    };
+  }
+
+  handleRequestDelete = (key) => {
+    if (key === 3) {
+      alert('Why would you want to delete React?! :)');
+      return;
+    }
+
+    this.chipData = this.state.chipData;
+    const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
+    this.chipData.splice(chipToDelete, 1);
+    this.setState({chipData: this.chipData});
+  };
+
+  renderChip(data) {
+    return (
+      <Chip
+        key={data.key}
+        onRequestDelete={() => this.handleRequestDelete(data.key)}
+        style={this.styles.chip}
+      >
+        {data.label}
+      </Chip>
+    );
+  }
+
+  render() {
+    return (
+      <div style={this.styles.wrapper}>
+        {this.state.chipData.map(this.renderChip, this)}
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/Chip/ExampleSimple.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import Avatar from 'material-ui/Avatar';
+import Chip from 'material-ui/Chip';
+import FontIcon from 'material-ui/FontIcon';
+import SvgIconFace from 'material-ui/svg-icons/action/face';
+import {blue300, indigo900} from 'material-ui/styles/colors';
+
+const styles = {
+  chip: {
+    margin: 4,
+  },
+  wrapper: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+};
+
+function handleRequestDelete() {
+  alert('You clicked the delete button.');
+}
+
+function handleTouchTap() {
+  alert('You clicked the Chip.');
+}
+
+/**
+ * Examples of Chips, using an image [Avatar](/#/components/font-icon), [Font Icon](/#/components/font-icon) Avatar,
+ * [SVG Icon](/#/components/svg-icon) Avatar, "Letter" (string) Avatar, and with custom colors.
+ *
+ * Chips with the `onRequestDelete` property defined will display a delete icon.
+ */
+export default class ChipExampleSimple extends React.Component {
+
+  render() {
+    return (
+      <div style={styles.wrapper}>
+
+        <Chip
+          style={styles.chip}
+        >
+          Text Chip
+        </Chip>
+
+        <Chip
+          onRequestDelete={handleRequestDelete}
+          onTouchTap={handleTouchTap}
+          style={styles.chip}
+        >
+          Deletable Text Chip
+        </Chip>
+
+        <Chip
+          onTouchTap={handleTouchTap}
+          style={styles.chip}
+        >
+          <Avatar src="images/uxceo-128.jpg" />
+          Image Avatar Chip
+        </Chip>
+
+        <Chip
+          onRequestDelete={handleRequestDelete}
+          onTouchTap={handleTouchTap}
+          style={styles.chip}
+        >
+          <Avatar src="images/ok-128.jpg" />
+          Deletable Avatar Chip
+        </Chip>
+
+        <Chip
+          onTouchTap={handleTouchTap}
+          style={styles.chip}
+        >
+          <Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} />
+          FontIcon Avatar Chip
+        </Chip>
+
+        <Chip
+          onRequestDelete={handleRequestDelete}
+          onTouchTap={handleTouchTap}
+          style={styles.chip}
+        >
+          <Avatar color="#444" icon={<SvgIconFace />} />
+          SvgIcon Avatar Chip
+        </Chip>
+
+        <Chip onTouchTap={handleTouchTap} style={styles.chip}>
+          <Avatar size={32}>A</Avatar>
+          Text Avatar Chip
+        </Chip>
+
+        <Chip
+          backgroundColor={blue300}
+          onRequestDelete={handleRequestDelete}
+          onTouchTap={handleTouchTap}
+          style={styles.chip}
+        >
+          <Avatar size={32} color={blue300} backgroundColor={indigo900}>
+            MB
+          </Avatar>
+          Colored Chip
+        </Chip>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/Chip/Page.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Title from 'react-title-component';
+
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import chipReadmeText from './README';
+import ChipExampleSimple from './ExampleSimple';
+import chipExampleSimpleCode from '!raw!./ExampleSimple';
+import ChipExampleArray from './ExampleArray';
+import chipExampleArrayCode from '!raw!./ExampleArray';
+import chipCode from '!raw!material-ui/Chip/Chip';
+
+const ChipPage = () => (
+  <div>
+    <Title render={(previousTitle) => `Chip - ${previousTitle}`} />
+    <MarkdownElement text={chipReadmeText} />
+    <CodeExample
+      code={chipExampleSimpleCode}
+      title="Example Chips"
+    >
+      <ChipExampleSimple />
+    </CodeExample>
+    <CodeExample
+      code={chipExampleArrayCode}
+      title="Example array"
+    >
+      <ChipExampleArray />
+    </CodeExample>
+    <PropTypeDescription code={chipCode} />
+  </div>
+);
+
+export default ChipPage;

docs/src/app/components/pages/components/Chip/README.md

@@ -0,0 +1,10 @@
+## Chip
+
+[Chips](https://www.google.com/design/spec/components/chips.html) 
+represent complex entities in small blocks, such as a contact.
+
+While included here as a standalone component, the most common use will
+be in some form of input, so some of the behaviour demonstrated is not
+shown in context.
+
+### Examples

src/Avatar/Avatar.js

@@ -47,6 +47,8 @@ function getStyles(props, context) {
 }
 
 class Avatar extends Component {
+  static muiName = 'Avatar';
+
   static propTypes = {
     /**
      * The backgroundColor of the avatar. Does not apply to image avatars.