diff --git a/docs/package.json b/docs/package.json
index bed2c6f18b03a6..7fd5c214b43958 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -38,16 +38,16 @@
"json-loader": "^0.5.4",
"marked": "^0.3.5",
"raw-loader": "^0.5.1",
- "react-addons-perf": "^0.14.0",
- "react-addons-pure-render-mixin": "^0.14.0",
+ "react-addons-perf": "^15.0.1",
+ "react-addons-pure-render-mixin": "^15.0.1",
"react-docgen": "^2.4.0",
"react-hot-loader": "^1.2.8",
"react-motion": "^0.4.2",
"react-native": "^0.17.0",
"react-router": "^2.0.0",
- "react-swipeable-views": "^0.4.0",
- "recast": "^0.10.41",
- "style-loader": "0.13.0",
+ "react-swipeable-views": "^0.5.0",
+ "recast": "^0.11.4",
+ "style-loader": "0.13.1",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"
diff --git a/docs/src/app/components/CodeExample/index.js b/docs/src/app/components/CodeExample/index.js
index 73760b0f778b67..73ecab20c15fd2 100644
--- a/docs/src/app/components/CodeExample/index.js
+++ b/docs/src/app/components/CodeExample/index.js
@@ -8,11 +8,16 @@ class CodeExample extends React.Component {
static propTypes = {
children: React.PropTypes.node,
code: React.PropTypes.string.isRequired,
+ component: React.PropTypes.bool,
description: React.PropTypes.string,
layoutSideBySide: React.PropTypes.bool,
title: React.PropTypes.string,
};
+ static defaultProps = {
+ component: true,
+ };
+
static contextTypes = {
muiTheme: React.PropTypes.object,
};
@@ -21,6 +26,7 @@ class CodeExample extends React.Component {
const {
children,
code,
+ component,
layoutSideBySide,
} = this.props;
@@ -41,7 +47,7 @@ class CodeExample extends React.Component {
},
};
- const docs = parse(code);
+ const docs = component ? parse(code) : {};
return (
diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleToggle.js b/docs/src/app/components/pages/components/DatePicker/ExampleToggle.js
index e195e150807221..d5f849f5e4c87b 100644
--- a/docs/src/app/components/pages/components/DatePicker/ExampleToggle.js
+++ b/docs/src/app/components/pages/components/DatePicker/ExampleToggle.js
@@ -59,26 +59,26 @@ export default class DatePickerExampleToggle extends React.Component {
diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleAction.js b/docs/src/app/components/pages/components/Snackbar/ExampleAction.js
index 028b397df91b8a..976d6769c18aa3 100644
--- a/docs/src/app/components/pages/components/Snackbar/ExampleAction.js
+++ b/docs/src/app/components/pages/components/Snackbar/ExampleAction.js
@@ -65,5 +65,3 @@ export default class SnackbarExampleSimple extends React.Component {
);
}
}
-
-export default SnackbarExampleSimple;
diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js b/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js
index a57a164b9abe6e..7465e4d6d3f092 100644
--- a/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js
+++ b/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js
@@ -40,5 +40,3 @@ export default class SnackbarExampleSimple extends React.Component {
);
}
}
-
-export default SnackbarExampleSimple;
diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleTwice.js b/docs/src/app/components/pages/components/Snackbar/ExampleTwice.js
index 7720c7ebd48001..45731744287651 100644
--- a/docs/src/app/components/pages/components/Snackbar/ExampleTwice.js
+++ b/docs/src/app/components/pages/components/Snackbar/ExampleTwice.js
@@ -53,5 +53,3 @@ export default class SnackbarExampleTwice extends React.Component {
);
}
}
-
-export default SnackbarExampleTwice;
diff --git a/docs/src/app/components/pages/customization/Colors.js b/docs/src/app/components/pages/customization/Colors.js
index eab570f86a330f..9d2d2f366978df 100644
--- a/docs/src/app/components/pages/customization/Colors.js
+++ b/docs/src/app/components/pages/customization/Colors.js
@@ -39,7 +39,7 @@ const ColorsPage = React.createClass({
lineHeight: '32px',
paddingTop: 16,
marginBottom: 12,
- letterSpacing: '0',
+ letterSpacing: 0,
fontWeight: typography.fontWeightNormal,
color: typography.textDarkBlack,
},
diff --git a/docs/src/app/components/pages/customization/InlineStyles.js b/docs/src/app/components/pages/customization/InlineStyles.js
index 29c3a0fc0632f4..1618ac85d39dec 100644
--- a/docs/src/app/components/pages/customization/InlineStyles.js
+++ b/docs/src/app/components/pages/customization/InlineStyles.js
@@ -12,7 +12,7 @@ class InlineStyles extends React.Component {
lineHeight: '32px',
paddingTop: 16,
marginBottom: 12,
- letterSpacing: '0',
+ letterSpacing: 0,
fontWeight: typography.fontWeightNormal,
color: typography.textDarkBlack,
},
@@ -21,7 +21,7 @@ class InlineStyles extends React.Component {
lineHeight: '28px',
paddingTop: 19,
marginBottom: 13,
- letterSpacing: '0',
+ letterSpacing: 0,
fontWeight: typography.fontWeightMedium,
color: typography.textDarkBlack,
},
@@ -73,7 +73,7 @@ class InlineStyles extends React.Component {
Overriding Inline Styles
-
+
Mixing Inline and CSS Styles
-
+
diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js
index 735b8e4313229c..21683c87c25c8b 100644
--- a/src/Toggle/Toggle.js
+++ b/src/Toggle/Toggle.js
@@ -70,6 +70,9 @@ class Toggle extends React.Component {
static propTypes = {
/**
* Determines whether the Toggle is initially turned on.
+ * **Warning:** This cannot be used in conjunction with `toggled`.
+ * Decide between using a controlled or uncontrolled input element and remove one of these props.
+ * More info: https://fb.me/react-controlled-components
*/
defaultToggled: React.PropTypes.bool,
@@ -182,7 +185,9 @@ class Toggle extends React.Component {
render() {
const {
+ defaultToggled,
onToggle, // eslint-disable-line no-unused-vars
+ toggled,
...other,
} = this.props;
@@ -204,7 +209,7 @@ class Toggle extends React.Component {
);
if (this.state.switched) {
- thumbStyles.marginLeft = `-${thumbStyles.width}`;
+ thumbStyles.marginLeft = 0 - thumbStyles.width;
}
const toggleElementStyles = Object.assign({},
@@ -247,11 +252,14 @@ class Toggle extends React.Component {
switched: this.state.switched,
onSwitch: this.handleToggle,
onParentShouldUpdate: this.handleStateChange,
- defaultSwitched: this.props.defaultToggled,
labelPosition: this.props.labelPosition,
};
- if (this.props.hasOwnProperty('toggled')) enhancedSwitchProps.checked = this.props.toggled;
+ if (this.props.hasOwnProperty('toggled')) {
+ enhancedSwitchProps.checked = toggled;
+ } else if (this.props.hasOwnProperty('defaultToggled')) {
+ enhancedSwitchProps.defaultChecked = defaultToggled;
+ }
return (
{
const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg');
const checkMarkNode = svgs[1];
- expect(input.hasAttribute('checked')).to.be.true;
+ expect(input.checked).to.be.true;
expect(checkMarkNode.style.opacity).to.equal('1');
expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH);
});
@@ -32,7 +32,7 @@ describe('Checkbox', () => {
const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg');
const checkMarkNode = svgs[1];
- expect(input.hasAttribute('checked')).to.be.false;
+ expect(input.checked).to.be.false;
expect(checkMarkNode.style.opacity).to.equal('0');
expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH);
});