[RadioButton] Allow customising icons

docs/src/app/components/pages/components/Checkbox/ExampleSimple.jsx

@@ -24,14 +24,20 @@ const CheckboxExampleSimple = () => (
       style={styles.checkbox}
     />
     <Checkbox
-      label="Disabled"
+      checkedIcon={<ActionFavorite />}
+      uncheckedIcon={<ActionFavoriteBorder />}
+      label="Custom icon"
+      style={styles.checkbox}
+    />
+    <Checkbox
+      label="Disabled unchecked"
       disabled={true}
       style={styles.checkbox}
     />
     <Checkbox
-      checkedIcon={<ActionFavorite />}
-      unCheckedIcon={<ActionFavoriteBorder />}
-      label="Custom icon"
+      label="Disabled checked"
+      checked={true}
+      disabled={true}
       style={styles.checkbox}
     />
     <Checkbox

docs/src/app/components/pages/components/RadioButton/ExampleSimple.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import RadioButton from 'material-ui/lib/radio-button';
 import RadioButtonGroup from 'material-ui/lib/radio-button-group';
+import ActionFavorite from 'material-ui/lib/svg-icons/action/favorite';
+import ActionFavoriteBorder from 'material-ui/lib/svg-icons/action/favorite-border';
 
 const styles = {
   block: {
@@ -26,12 +28,26 @@ const RadioButtonExampleSimple = () => (
       />
       <RadioButton
         value="ludicrous"
-        label="Disabled"
+        label="Custom icon"
+        checkedIcon={<ActionFavorite/>}
+        uncheckedIcon={<ActionFavoriteBorder/>}
+        style={styles.radioButton}
+      />
+    </RadioButtonGroup>
+    <RadioButtonGroup name="shipName" defaultSelected="community">
+      <RadioButton
+        value="enterprise"
+        label="Disabled unchecked"
+        disabled={true}
+        style={styles.radioButton}
+      />
+      <RadioButton
+        value="community"
+        label="Disabled checked"
         disabled={true}
         style={styles.radioButton}
       />
     </RadioButtonGroup>
-
     <RadioButtonGroup name="notRight" labelPosition="left" style={styles.block}>
       <RadioButton
         value="reverse"

src/checkbox.jsx

@@ -4,6 +4,7 @@ import Transitions from './styles/transitions';
 import CheckboxOutline from './svg-icons/toggle/check-box-outline-blank';
 import CheckboxChecked from './svg-icons/toggle/check-box';
 import getMuiTheme from './styles/getMuiTheme';
+import deprecated from './utils/deprecatedPropType';
 
 function getStyles(props, state) {
   const {
@@ -114,7 +115,14 @@ const Checkbox = React.createClass({
      * The SvgIcon to use for the unchecked state.
      * This is useful to create icon toggles.
      */
-    unCheckedIcon: React.PropTypes.element,
+    unCheckedIcon: deprecated(React.PropTypes.element,
+      'Use uncheckedIcon instead.'),
+
+    /**
+     * The SvgIcon to use for the unchecked state.
+     * This is useful to create icon toggles.
+     */
+    uncheckedIcon: React.PropTypes.element,
 
     /**
      * ValueLink for when using controlled checkbox.
@@ -185,6 +193,7 @@ const Checkbox = React.createClass({
       iconStyle,
       onCheck,
       checkedIcon,
+      uncheckedIcon,
       unCheckedIcon,
       ...other,
     } = this.props;
@@ -208,8 +217,8 @@ const Checkbox = React.createClass({
       style: checkStyles,
     });
 
-    let unCheckedElement = unCheckedIcon ? React.cloneElement(unCheckedIcon, {
-      style: Object.assign(boxStyles, unCheckedIcon.props.style),
+    let unCheckedElement = (unCheckedIcon || uncheckedIcon) ? React.cloneElement((unCheckedIcon || uncheckedIcon), {
+      style: Object.assign(boxStyles, (unCheckedIcon || uncheckedIcon).props.style),
     }) : React.createElement(CheckboxOutline, {
       style: boxStyles,
     });

src/radio-button.jsx

@@ -63,6 +63,11 @@ const RadioButton = React.createClass({
      */
     checked: React.PropTypes.bool,
 
+    /**
+     * The icon element to show when radio button is checked.
+     */
+    checkedIcon: React.PropTypes.element,
+
     /**
      * Disabled if true.
      */
@@ -100,6 +105,11 @@ const RadioButton = React.createClass({
      */
     style: React.PropTypes.object,
 
+    /**
+     * The icon element to show when radio button is unchecked.
+     */
+    uncheckedIcon: React.PropTypes.element,
+
     /**
      * The value of our radio button component.
      */
@@ -167,60 +177,60 @@ const RadioButton = React.createClass({
   },
 
   render() {
-    let {
+    const {
+      checkedIcon,
+      checked,
+      iconStyle,
+      labelStyle,
+      labelPosition,
       onCheck,
+      uncheckedIcon,
+      disabled,
       ...other,
     } = this.props;
 
     const styles = getStyles(this.props, this.state);
 
-    let onStyles =
-      Object.assign(
-        styles.target,
-        this.props.checked && styles.targetWhenChecked,
-        this.props.iconStyle,
-        this.props.disabled && styles.targetWhenDisabled);
-    let offStyles =
-      Object.assign(
-        styles.fill,
-        this.props.checked && styles.fillWhenChecked,
-        this.props.iconStyle,
-        this.props.disabled && styles.fillWhenDisabled);
-
-    let radioButtonElement = (
-      <div>
-        <RadioButtonOff style={onStyles} />
-        <RadioButtonOn style={offStyles} />
-      </div>
+    const uncheckedStyles = Object.assign(
+      styles.target,
+      checked && styles.targetWhenChecked,
+      iconStyle,
+      disabled && styles.targetWhenDisabled
     );
 
-    const iconStyle = Object.assign(
-      styles.icon,
-      this.props.iconStyle
+    const checkedStyles = Object.assign(
+      styles.fill,
+      checked && styles.fillWhenChecked,
+      iconStyle,
+      disabled && styles.fillWhenDisabled
     );
 
-    const labelStyle = Object.assign(
-      styles.label,
-      this.props.labelStyle
-    );
+    const uncheckedElement = React.isValidElement(uncheckedIcon)
+      ? React.cloneElement(uncheckedIcon, {style: Object.assign(uncheckedStyles, uncheckedIcon.props.style)})
+      : <RadioButtonOff style={uncheckedStyles}/>;
 
-    let enhancedSwitchProps = {
-      ref: 'enhancedSwitch',
-      inputType: 'radio',
-      switched: this.props.checked,
-      switchElement: radioButtonElement,
-      rippleColor: styles.ripple.color,
-      iconStyle: iconStyle,
-      labelStyle: labelStyle,
-      onSwitch: this._handleCheck,
-      onParentShouldUpdate: this._handleStateChange,
-      labelPosition: this.props.labelPosition,
-    };
+    const checkedElement = React.isValidElement(checkedIcon)
+      ? React.cloneElement(checkedIcon, {style: Object.assign(checkedStyles, checkedIcon.props.style)})
+      : <RadioButtonOn style={checkedStyles}/>;
+
+    const mergedIconStyle = Object.assign(styles.icon, iconStyle);
+    const mergedLabelStyle = Object.assign(styles.label, labelStyle);
 
     return (
       <EnhancedSwitch
         {...other}
-        {...enhancedSwitchProps}
+        ref="enhancedSwitch"
+        inputType="radio"
+        checked={checked}
+        switched={checked}
+        disabled={disabled}
+        rippleColor={styles.ripple.color}
+        iconStyle={mergedIconStyle}
+        labelStyle={mergedLabelStyle}
+        labelPosition={labelPosition}
+        onSwitch={this._handleCheck}
+        onParentShouldUpdate={this._handleStateChange}
+        switchElement={<div>{uncheckedElement}{checkedElement}</div>}
       />
     );
   },