Use children instead of special label and avatar props in Chip component

react-toolbox · Apr 4, 2016 · dff8a07 · dff8a07
1 parent 08675d6
commit dff8a07
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 49 deletions.
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
@@ -154,7 +154,16 @@ class Autocomplete extends React.Component {
  renderSelected () {
    if (this.props.multiple) {
      const selectedItems = [...this.values()].map(([key, value]) => {
-       return <Chip key={key} className={style.value} onDeleteClick={this.unselect.bind(this, key)} label={value} deletable />;
+       return (
+         <Chip
+           key={key}
+           className={style.value}
+           deletable
+           onDeleteClick={this.unselect.bind(this, key)}
+         >
+           {value}
+         </Chip>
+       );
      });
 
      return <ul className={style.values}>{selectedItems}</ul>;

diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
@@ -3,16 +3,21 @@ import FontIcon from '../font_icon';
 import style from './style';
 import ClassNames from 'classnames';
 
-const Chip = ({className, deletable, avatar, label, onDeleteClick, ...other}) => {
+const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
+  let hasAvatar = false;
+  if (React.Children.count(children)) {
+    const firstChild = children[0];
+    hasAvatar = firstChild && firstChild.type && firstChild.type.name === 'Avatar';
+  }
+
   const classes = ClassNames(style.chip, {
       [style.deletable]: !!deletable,
-      [style.contactChip]: !!avatar
+      [style.avatar]: !!hasAvatar
   }, className);
 
   return (
     <div data-react-toolbox='chip' className={classes} {...other}>
-      {avatar ? avatar : null}
-      <span className={style.label}>{label}</span>
+      {typeof children === 'string' ? <span>{children}</span> : children}
       {
         deletable ? (
           <span className={style.delete} onClick={onDeleteClick}>
@@ -25,18 +30,15 @@ const Chip = ({className, deletable, avatar, label, onDeleteClick, ...other}) =>
 };
 
 Chip.propTypes = {
-  avatar: PropTypes.element,
+  children: PropTypes.string,
   className: PropTypes.string,
   deletable: PropTypes.bool,
-  label: PropTypes.string,
   onDeleteClick: PropTypes.func
 };
 
 Chip.defaultProps = {
-  avatar: null,
   className: '',
-  deletable: false,
-  label: ''
+  deletable: false
 };
 
 export default Chip;
diff --git a/components/chip/readme.md b/components/chip/readme.md
@@ -2,27 +2,36 @@
 
 Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
 
+To add an icon or contact image to a chip, include an `Avatar` element as the first child.
+
 <!-- example -->
 ```jsx
+import Avatar from 'react-toolbox/lib/avatar';
 import Chip from 'react-toolbox/lib/chip';
 
 const ChipTest = () => (
   <div>
-        <Chip label="Example Chip" />
-        <Chip label="Deletable Chip" deletable />
-        <Chip
-          label="Avatar Chip"
-          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
-        />
-        <Chip
-          label="Initial chip"
-          avatar={<Avatar title="A" />}
-          deletable
-        />
-        <Chip
-          label="Image contact chip"
-          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
-        />
+    <Chip>Example chip</Chip>
+    <Chip>
+      <span style={{textDecoration: 'line-through'}}>Standard</span>
+      <strong>Custom</strong> chip <small>(custom markup)</small>
+    </Chip>
+
+    <Chip deletable>Deletable Chip</Chip>
+
+    <Chip avatar>
+      <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+      <span>Avatar Chip</span>
+    </Chip>
+
+    <Chip avatar>
+      <Avatar title="A" /><span>Initial chip</span>
+    </Chip>
+
+    <Chip avatar>
+      <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+      <span>Image contact chip</span>
+    </Chip>
   </div>
 );
 ```
@@ -31,8 +40,7 @@ const ChipTest = () => (
 
 | Name            | Type        | Default         | Description|
 |:----------------|:------------|:----------------|:-----------|
-| `avatar`        | `element`   |                 | An `Avatar` component to use in a contact chip. |
+| `avatar`        | `Boolean`   | `false`         | If true, the chip will include styles to accommodate an `Avatar`. |
 | `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
 | `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
-| `label`         | `String`    | `''`            | label for the chip. |
 | `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
diff --git a/components/chip/style.scss b/components/chip/style.scss
@@ -9,9 +9,12 @@
   line-height: $chip-height;
   padding: 0 $chip-padding;
   margin-right: $chip-margin-right;
+
+  color: $chip-label-color;
+  font-size: $chip-label-font-size;
 }
 
-.contactChip {
+.avatar {
   padding-left: 0;
 
   > [data-react-toolbox="avatar"] {
@@ -27,11 +30,6 @@
   }
 }
 
-.label {
-  color: $chip-label-color;
-  font-size: $chip-label-font-size;
-}
-
 .deletable {
   padding-right: 0;
   cursor: pointer;

diff --git a/spec/components/chip.jsx b/spec/components/chip.jsx
@@ -19,32 +19,40 @@ class ChipTest extends React.Component {
         <h5>Chips</h5>
         <p>Chips can be deletable and have an avatar.</p>
 
-        <Chip label="Example Chip" />
+        <Chip>Example chip</Chip>
+        <Chip>
+          <span style={{textDecoration: 'line-through'}}>Standard</span>
+          <strong>Custom</strong> chip <small>(custom markup)</small>
+        </Chip>
+
         {
           this.state.deleted ? null : (
             <Chip
-              label="Deletable Chip"
               deletable
               onDeleteClick={this.handleDeleteClick}
-            />
+            >
+              Deletable Chip
+            </Chip>
           )
         }
-        <Chip
-          label="Avatar Chip"
-          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
-        />
-        <Chip
-          label="Initial chip"
-          avatar={<Avatar title="A" />}
-          deletable
-        />
-        <Chip
-          label="Image contact chip"
-          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
-        />
+
+        <Chip>
+          <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+          <span>Avatar Chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar title="A" /><span>Initial chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+          <span>Image contact chip</span>
+        </Chip>
       </section>
     );
   }
 }
 
 export default ChipTest;
+