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); });