diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx index 66d6b52e646171..f19b66d5be70db 100644 --- a/docs/src/app/components/pages/components/buttons.jsx +++ b/docs/src/app/components/pages/components/buttons.jsx @@ -70,6 +70,12 @@ export default class ButtonPage extends React.Component { header: 'optional', desc: 'Override the inline-styles of the button\'s label element.', }, + { + name: 'labelPosition', + type: 'oneOf ["before", "after"]', + header: 'default: "before"', + desc: 'Place label before or after the passed children', + }, { name: 'linkButton', type: 'bool', @@ -319,7 +325,6 @@ export default class ButtonPage extends React.Component { height: '100%', display: 'inline-block', verticalAlign: 'middle', - float: 'left', paddingLeft: '12px', lineHeight: '36px', color: Colors.cyan500, @@ -375,7 +380,17 @@ export default class ButtonPage extends React.Component { + + + +
+ @@ -420,6 +435,15 @@ export default class ButtonPage extends React.Component {
+
+ + + +
diff --git a/docs/src/app/components/raw-code/flat-button-code.txt b/docs/src/app/components/raw-code/flat-button-code.txt index 4a22cf57b6502f..3bc6aa4d4b760c 100644 --- a/docs/src/app/components/raw-code/flat-button-code.txt +++ b/docs/src/app/components/raw-code/flat-button-code.txt @@ -1,15 +1,19 @@ -//Flat Buttons + + -
- - - -
-
- - - -
+ + + + + + + + + + + + + diff --git a/docs/src/app/components/raw-code/raised-button-code.txt b/docs/src/app/components/raw-code/raised-button-code.txt index aa2b5361fccd20..93eb6c4509650b 100644 --- a/docs/src/app/components/raw-code/raised-button-code.txt +++ b/docs/src/app/components/raw-code/raised-button-code.txt @@ -1,16 +1,19 @@ -//Raised Buttons + + -
- - - -
-
- - - -
- + + + + + + + + + + + + + diff --git a/src/flat-button.jsx b/src/flat-button.jsx index 57391c922e5555..bc16c7483fe8e6 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -67,7 +67,10 @@ const FlatButton = React.createClass({ disabled: React.PropTypes.bool, hoverColor: React.PropTypes.string, label: validateLabel, - labelPosition: React.PropTypes.oneOf(['before', 'after']), + labelPosition: React.PropTypes.oneOf([ + 'before', + 'after', + ]), labelStyle: React.PropTypes.object, onKeyboardFocus: React.PropTypes.func, onMouseEnter: React.PropTypes.func, @@ -81,7 +84,7 @@ const FlatButton = React.createClass({ getDefaultProps() { return { labelStyle: {}, - labelPosition: 'before', + labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes) onKeyboardFocus: () => {}, onMouseEnter: () => {}, onMouseLeave: () => {}, @@ -123,7 +126,7 @@ const FlatButton = React.createClass({ secondary, style, ...other, - } = this.props; + } = this.props; const { buttonColor, @@ -172,11 +175,14 @@ const FlatButton = React.createClass({ const labelElement = label ? ( ) : undefined; + // Place label before or after children. - const childrenFragment = labelPosition === 'before' ? { labelElement, children } : { children, labelElement }; + const childrenFragment = labelPosition === 'before' ? + { labelElement, children } + : + { children, labelElement }; const enhancedButtonChildren = Children.create(childrenFragment); - return ( + {label} ); @@ -190,6 +205,13 @@ const RaisedButton = React.createClass({ onKeyboardFocus: this._handleKeyboardFocus, }; + // Place label before or after children. + const childrenFragment = labelPosition === 'before' ? + { labelElement, children } + : + { children, labelElement }; + const enhancedButtonChildren = Children.create(childrenFragment); + return ( - {labelElement} - {this.props.children} + {enhancedButtonChildren}