Migrate Chip to themr

components/chip/Chip.js

@@ -1,18 +1,18 @@
 import React, {PropTypes} from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Avatar from '../avatar';
-import style from './style';
 
-const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
+const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
   let hasAvatar = false;
   if (React.Children.count(children)) {
     const firstChild = children[0];
     hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
   }
 
-  const classes = ClassNames(style.chip, {
-      [style.deletable]: !!deletable,
-      [style.avatar]: !!hasAvatar
+  const classes = classnames(theme.chip, {
+      [theme.deletable]: !!deletable,
+      [theme.avatar]: !!hasAvatar
   }, className);
 
   return (
@@ -20,9 +20,9 @@ const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
       {typeof children === 'string' ? <span>{children}</span> : children}
       {
         deletable ? (
-          <span className={style.delete} onClick={onDeleteClick}>
-            <svg viewBox="0 0 40 40" className={style.deleteIcon}>
-              <path className={style.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
+          <span className={theme.delete} onClick={onDeleteClick}>
+            <svg viewBox="0 0 40 40" className={theme.deleteIcon}>
+              <path className={theme.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
             </svg>
           </span>
         ) : null
@@ -35,7 +35,15 @@ Chip.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   deletable: PropTypes.bool,
-  onDeleteClick: PropTypes.func
+  onDeleteClick: PropTypes.func,
+  theme: React.PropTypes.shape({
+    avatar: React.PropTypes.string.isRequired,
+    chip: React.PropTypes.string.isRequired,
+    deletable: React.PropTypes.string.isRequired,
+    delete: React.PropTypes.string.isRequired,
+    deleteIcon: React.PropTypes.string.isRequired,
+    deleteX: React.PropTypes.string.isRequired
+  })
 };
 
 Chip.defaultProps = {
@@ -43,4 +51,4 @@ Chip.defaultProps = {
   deletable: false
 };
 
-export default Chip;
+export default themr('ToolboxChip')(Chip);

components/chip/readme.md

@@ -44,3 +44,16 @@ const ChipTest = () => (
 | `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
 | `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
 | `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
+
+## Theming
+
+You can take a look to the configuration variables at the `_config.scss` file. The component implements the following class interface:
+
+| Name       | Description|
+|:-----------|:-----------|
+| `avatar`     | Used in the root when the component includes an avatar.|
+| `chip` | Root class.|
+| `deletable` | Used in the root when the component is deletable.|
+| `delete` | Used for the delete element wrapper.|
+| `deleteIcon` | Used for the delete icon wrapper.|
+| `deleteX` | Used for the delete svg inner layer.|

spec/theme.js

@@ -3,6 +3,7 @@ import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
+import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
 export default defineTheme({
@@ -10,5 +11,6 @@ export default defineTheme({
   ToolboxAvatar,
   ToolboxButton,
   ToolboxCard,
+  ToolboxChip,
   ToolboxRipple
 });