Merge pull request mui#2014 from oliviertassinari/button-label-position

[Button] Fix and add missing labelPosition
tyfoo · Nov 3, 2015 · c8e622e · c8e622e
2 parents 08a7c6b + 3983146
commit c8e622e
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 34 deletions.
diff --git 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 {
                     <FlatButton
                       linkButton={true}
                       href="https://github.com/callemall/material-ui"
-                      secondary={true} label="GitHub"
+                      secondary={true}
+                      label="GitHub"
+                      labelStyle={styles.buttonLabel}>
+                      <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
+                    </FlatButton>
+                  </div>
+                  <div style={styles.container}>
+                    <FlatButton
+                      secondary={true}
+                      label="Label after"
+                      labelPosition="after"
                       labelStyle={styles.buttonLabel}>
                       <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
                     </FlatButton>
@@ -420,6 +435,15 @@ export default class ButtonPage extends React.Component {
                       <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
                     </RaisedButton>
                   </div>
+                  <div style={styles.container}>
+                    <RaisedButton
+                      secondary={true}
+                      label="Label after"
+                      labelPosition="after"
+                      labelStyle={styles.buttonLabel}>
+                      <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
+                    </RaisedButton>
+                  </div>
                   <div style={styles.container}>
                     <RaisedButton label="Disabled" disabled={true} />
                   </div>

diff --git 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
 <FlatButton label="Default" />
+
 <FlatButton label="Primary" primary={true} />
+
 <FlatButton label="Secondary" secondary={true} />
-<div style={styles.container}>
-  <FlatButton primary={true} label="Choose an Image">
-    <input type="file" id="imageButton" style={styles.exampleImageInput}></input>
-  </FlatButton>
-</div>
-<div style={styles.container}>
-  <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
-    <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
-  </FlatButton>
-</div>
+
+<FlatButton primary={true} label="Choose an Image">
+  <input type="file" id="imageButton" style={styles.exampleImageInput} />
+</FlatButton>
+
+<FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
+  <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github" />
+</FlatButton>
+
+<FlatButton secondary={true} label="Label after" labelPosition="after">
+  <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github" />
+</FlatButton>
+
 <FlatButton label="Disabled" disabled={true} />
diff --git 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
 <RaisedButton label="Default" />
+
 <RaisedButton label="Primary" primary={true} />
+
 <RaisedButton label="Secondary" secondary={true} />
-<div style={styles.container}>
-  <RaisedButton primary={true} label="Choose an Image">
-    <input type="file" style={styles.exampleImageInput}></input>
-  </RaisedButton>
-</div>
-<div style={styles.container}>
-  <RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
-    <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
-  </RaisedButton>
-</div>
-<RaisedButton label="Disabled" disabled={true} />
 
+<RaisedButton primary={true} label="Choose an Image">
+  <input type="file" style={styles.exampleImageInput} />
+</RaisedButton>
+
+<RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
+  <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github" />
+</RaisedButton>
+
+<RaisedButton secondary={true} label="Label after" labelPosition="after">
+  <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github" />
+</RaisedButton>
+
+<RaisedButton label="Disabled" disabled={true} />
diff --git 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 ? (
       <FlatButtonLabel label={label} style={labelStyle} />
     ) : 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 (
       <EnhancedButton
         {...other}

diff --git a/src/raised-button.jsx b/src/raised-button.jsx
@@ -3,6 +3,7 @@ const ReactDOM = require('react-dom');
 const StylePropable = require('./mixins/style-propable');
 const Transitions = require('./styles/transitions');
 const ColorManipulator = require('./utils/color-manipulator');
+const Children = require('./utils/children');
 const Typography = require('./styles/typography');
 const EnhancedButton = require('./enhanced-button');
 const Paper = require('./paper');
@@ -40,6 +41,10 @@ const RaisedButton = React.createClass({
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: validateLabel,
+    labelPosition: React.PropTypes.oneOf([
+      'before',
+      'after',
+    ]),
     onMouseDown: React.PropTypes.func,
     onMouseUp: React.PropTypes.func,
     onMouseLeave: React.PropTypes.func,
@@ -55,6 +60,12 @@ const RaisedButton = React.createClass({
     fullWidth: React.PropTypes.bool,
   },
 
+  getDefaultProps: function() {
+    return {
+      labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes)
+    };
+  },
+
   getInitialState() {
     let zDepth = this.props.disabled ? 0 : 1;
     return {
@@ -160,18 +171,22 @@ const RaisedButton = React.createClass({
 
   render() {
     let {
+      children,
       disabled,
       label,
+      labelPosition,
+      labelStyle,
       primary,
       secondary,
-      ...other } = this.props;
+      ...other,
+    } = this.props;
 
     let styles = this.getStyles();
 
     let labelElement;
     if (label) {
       labelElement = (
-        <span style={this.prepareStyles(styles.label, this.props.labelStyle)}>
+        <span style={this.prepareStyles(styles.label, labelStyle)}>
           {label}
         </span>
       );
@@ -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 (
       <Paper
         style={this.mergeStyles(styles.root, this.props.style)}
@@ -208,8 +230,7 @@ const RaisedButton = React.createClass({
                   styles.overlay,
                   (this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
                 )}>
-                  {labelElement}
-                  {this.props.children}
+                  {enhancedButtonChildren}
               </div>
           </EnhancedButton>
       </Paper>