Migrate Radio to themr

components/radio/Radio.js

@@ -1,21 +1,30 @@
 import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
 import Ripple from '../ripple';
-import style from './style';
 
-const Radio = ({checked, children, onMouseDown}) => {
-  const className = style[checked ? 'radio-checked' : 'radio'];
-  return <div data-react-toolbox='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
-};
+const Radio = ({checked, onMouseDown, theme, ...other}) => (
+  <div
+    data-react-toolbox='radio'
+    className={theme[checked ? 'radioChecked' : 'radio']}
+    onMouseDown={onMouseDown}
+    {...other}
+  />
+);
 
 Radio.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.any,
-  onMouseDown: PropTypes.func
+  onMouseDown: PropTypes.func,
+  theme: PropTypes.shape({
+    radio: PropTypes.string.isRequired,
+    radioChecked: PropTypes.string.isRequired,
+    ripple: PropTypes.string.isRequired
+  })
 };
 
-export default Ripple({
-  className: style.ripple,
+const RawRadio = themr('ToolboxRadio')(Radio);
+export default themr('ToolboxRadio')(Ripple({
   spread: 2.6,
   centered: true
-})(Radio);
-export {Radio as RawRadio};
+})(Radio));
+export {RawRadio as RawRadio};

components/radio/RadioButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Radio from './Radio';
-import style from './style';
 
 class RadioButton extends React.Component {
   static propTypes = {
@@ -13,6 +13,12 @@ class RadioButton extends React.Component {
     onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
     onFocus: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      disabled: React.PropTypes.string.isRequired,
+      field: React.PropTypes.string.isRequired,
+      input: React.PropTypes.string.isRequired,
+      text: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.any
   };
 
@@ -37,24 +43,23 @@ class RadioButton extends React.Component {
   }
 
   render () {
-    const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
-    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
-
+    const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
+    const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
     return (
-      <label data-react-toolbox='radio-button' className={className}>
+      <label data-react-toolbox='radio-button' className={_className}>
         <input
           {...others}
-          className={style.input}
+          className={theme.input}
           onClick={this.handleClick}
           readOnly
           ref='input'
           type='radio'
         />
-        <Radio checked={this.props.checked} disabled={this.props.disabled}/>
-        {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
+        <Radio checked={checked} disabled={disabled}/>
+        {label ? <span className={theme.text}>{label}</span> : null}
       </label>
     );
   }
 }
 
-export default RadioButton;
+export default themr('ToolboxRadio')(RadioButton);

components/radio/readme.md

@@ -2,6 +2,8 @@
 
 [Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
 
+You can provide the theme for this component using the key `ToolboxButton`
+
 <!-- example -->
 ```jsx
 import { RadioGroup, RadioButton } from 'react-toolbox/lib/radio';
@@ -32,6 +34,8 @@ class RadioTest extends React.Component {
 
 A radio selector is mean to get a value from a set of choices, that's why a radio group is needed. It can take some properties and actions that will be transferred to the children, but they also can behave independently.
 
+### Properties
+
 | Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`      | `''`        | Set a class to give custom styles to the group.|
@@ -40,14 +44,13 @@ A radio selector is mean to get a value from a set of choices, that's why a radi
 | `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
 | `value`       | `Any`         |             | Default value selected in the radio group. |
 
-This component has state to keep the currently selected value and that's why it exposes to methods to work from the code with it:
-- `getValue` used to retrieve the currently selected value.
-- `setValue` used to set a new value.
 
 ## Radio Button
 
 The inner component to compose radio selectors. They will be rendered as radio input elements of HTML transferring the given properties that concerns to them.
 
+### Properties
+
 | Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `checked`     | `Boolean`     | `false`     | If true, the input element will be selected by default. Transferred from the parent. |
@@ -59,3 +62,15 @@ The inner component to compose radio selectors. They will be rendered as radio i
 | `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
 | `onFocus`     | `Function`    |             | Callback function that will be invoked when the input is focused. |
 | `value`       | `Any`         |             | Value for the radio button. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Added to the root of the Radio in case it's disabled.|
+| `field` | Used as the root class of the component.|
+| `input` | Used for the input element.|
+| `radio` | Used to for the radio element.|
+| `radioChecked` | Used for the radio element when it's checked.|
+| `ripple` | To provide styles for the ripple.|
+| `text` | Used to style the text label element.|

components/radio/theme.scss

@@ -1,6 +1,44 @@
 @import "../base";
 @import "./config";
 
+.radio {
+  position: relative;
+  display: inline-block;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  vertical-align: top;
+  cursor: pointer;
+  border: .2 * $unit solid $radio-text-color;
+  border-radius: 50%;
+  &:before {
+    @include material-animation-default();
+    position: absolute;
+    top: $radio-inner-margin - .2 * $unit;
+    left: $radio-inner-margin - .2 * $unit;
+    width: $radio-button-size - $radio-inner-margin * 2;
+    height: $radio-button-size - $radio-inner-margin * 2;
+    content: "";
+    background-color: $radio-inner-color;
+    border-radius: 50%;
+    transition: transform;
+    transform: scale(0);
+  }
+
+  .ripple {
+    background-color: $radio-inner-color;
+    opacity: .3;
+    transition-duration: 650ms;
+  }
+}
+
+.radioChecked {
+  @extend .radio;
+  border: .2 * $unit solid $radio-inner-color;
+  &:before {
+    transform: scale(1);
+  }
+}
+
 .field {
   position: relative;
   display: block;
@@ -32,49 +70,11 @@
   &:focus ~ .radio {
     box-shadow: 0 0 0 $unit $radio-focus-color;
   }
-  &:focus ~ .radio-checked {
+  &:focus ~ .radioChecked {
     box-shadow: 0 0 0 $unit $radio-checked-focus-color;
   }
 }
 
-.radio {
-  position: relative;
-  display: inline-block;
-  width: $radio-button-size;
-  height: $radio-button-size;
-  vertical-align: top;
-  cursor: pointer;
-  border: .2 * $unit solid $radio-text-color;
-  border-radius: 50%;
-  &:before {
-    @include material-animation-default();
-    position: absolute;
-    top: $radio-inner-margin - .2 * $unit;
-    left: $radio-inner-margin - .2 * $unit;
-    width: $radio-button-size - $radio-inner-margin * 2;
-    height: $radio-button-size - $radio-inner-margin * 2;
-    content: "";
-    background-color: $radio-inner-color;
-    border-radius: 50%;
-    transition: transform;
-    transform: scale(0);
-  }
-}
-
-.radio-checked {
-  @extend .radio;
-  border: .2 * $unit solid $radio-inner-color;
-  &:before {
-    transform: scale(1);
-  }
-}
-
-.ripple {
-  background-color: $radio-inner-color;
-  opacity: .3;
-  transition-duration: 650ms;
-}
-
 .disabled {
   @extend .field;
   .text {
@@ -84,7 +84,7 @@
     cursor: auto;
     border-color: $radio-disabled-color;
   }
-  .radio-checked {
+  .radioChecked {
     cursor: auto;
     border-color: $radio-disabled-color;
     &:before {

spec/theme.js

@@ -18,6 +18,7 @@ import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
+import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
@@ -41,6 +42,7 @@ export default defineTheme({
   ToolboxNavigation,
   ToolboxOverlay,
   ToolboxProgress,
+  ToolboxRadio,
   ToolboxRipple,
   ToolboxTimePicker
 });