Skip to content

Commit c8e622e

Browse files
oliviertassinarioliviertassinari
committed
Merge pull request mui#2014 from oliviertassinari/button-label-position
[Button] Fix and add missing labelPosition
2 parents 08a7c6b + 3983146 commit c8e622e

File tree

5 files changed

+92
-34
lines changed

5 files changed

+92
-34
lines changed

‎docs/src/app/components/pages/components/buttons.jsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,12 @@ export default class ButtonPage extends React.Component {
7070
header: 'optional',
7171
desc: 'Override the inline-styles of the button\'s label element.',
7272
},
73+
{
74+
name: 'labelPosition',
75+
type: 'oneOf ["before", "after"]',
76+
header: 'default: "before"',
77+
desc: 'Place label before or after the passed children',
78+
},
7379
{
7480
name: 'linkButton',
7581
type: 'bool',
@@ -319,7 +325,6 @@ export default class ButtonPage extends React.Component {
319325
height: '100%',
320326
display: 'inline-block',
321327
verticalAlign: 'middle',
322-
float: 'left',
323328
paddingLeft: '12px',
324329
lineHeight: '36px',
325330
color: Colors.cyan500,
@@ -375,7 +380,17 @@ export default class ButtonPage extends React.Component {
375380
<FlatButton
376381
linkButton={true}
377382
href="https://github.com/callemall/material-ui"
378-
secondary={true} label="GitHub"
383+
secondary={true}
384+
label="GitHub"
385+
labelStyle={styles.buttonLabel}>
386+
<FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
387+
</FlatButton>
388+
</div>
389+
<div style={styles.container}>
390+
<FlatButton
391+
secondary={true}
392+
label="Label after"
393+
labelPosition="after"
379394
labelStyle={styles.buttonLabel}>
380395
<FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
381396
</FlatButton>
@@ -420,6 +435,15 @@ export default class ButtonPage extends React.Component {
420435
<FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
421436
</RaisedButton>
422437
</div>
438+
<div style={styles.container}>
439+
<RaisedButton
440+
secondary={true}
441+
label="Label after"
442+
labelPosition="after"
443+
labelStyle={styles.buttonLabel}>
444+
<FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
445+
</RaisedButton>
446+
</div>
423447
<div style={styles.container}>
424448
<RaisedButton label="Disabled" disabled={true} />
425449
</div>

‎docs/src/app/components/raw-code/flat-button-code.txt‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
//Flat Buttons
21
<FlatButton label="Default" />
2+
33
<FlatButton label="Primary" primary={true} />
4+
45
<FlatButton label="Secondary" secondary={true} />
5-
<div style={styles.container}>
6-
<FlatButton primary={true} label="Choose an Image">
7-
<input type="file" id="imageButton" style={styles.exampleImageInput}></input>
8-
</FlatButton>
9-
</div>
10-
<div style={styles.container}>
11-
<FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
12-
<FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
13-
</FlatButton>
14-
</div>
6+
7+
<FlatButton primary={true} label="Choose an Image">
8+
<input type="file" id="imageButton" style={styles.exampleImageInput} />
9+
</FlatButton>
10+
11+
<FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
12+
<FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github" />
13+
</FlatButton>
14+
15+
<FlatButton secondary={true} label="Label after" labelPosition="after">
16+
<FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github" />
17+
</FlatButton>
18+
1519
<FlatButton label="Disabled" disabled={true} />

‎docs/src/app/components/raw-code/raised-button-code.txt‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
//Raised Buttons
21
<RaisedButton label="Default" />
2+
33
<RaisedButton label="Primary" primary={true} />
4+
45
<RaisedButton label="Secondary" secondary={true} />
5-
<div style={styles.container}>
6-
<RaisedButton primary={true} label="Choose an Image">
7-
<input type="file" style={styles.exampleImageInput}></input>
8-
</RaisedButton>
9-
</div>
10-
<div style={styles.container}>
11-
<RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
12-
<FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
13-
</RaisedButton>
14-
</div>
15-
<RaisedButton label="Disabled" disabled={true} />
166

7+
<RaisedButton primary={true} label="Choose an Image">
8+
<input type="file" style={styles.exampleImageInput} />
9+
</RaisedButton>
10+
11+
<RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
12+
<FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github" />
13+
</RaisedButton>
14+
15+
<RaisedButton secondary={true} label="Label after" labelPosition="after">
16+
<FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github" />
17+
</RaisedButton>
18+
19+
<RaisedButton label="Disabled" disabled={true} />

‎src/flat-button.jsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,10 @@ const FlatButton = React.createClass({
6767
disabled: React.PropTypes.bool,
6868
hoverColor: React.PropTypes.string,
6969
label: validateLabel,
70-
labelPosition: React.PropTypes.oneOf(['before', 'after']),
70+
labelPosition: React.PropTypes.oneOf([
71+
'before',
72+
'after',
73+
]),
7174
labelStyle: React.PropTypes.object,
7275
onKeyboardFocus: React.PropTypes.func,
7376
onMouseEnter: React.PropTypes.func,
@@ -81,7 +84,7 @@ const FlatButton = React.createClass({
8184
getDefaultProps() {
8285
return {
8386
labelStyle: {},
84-
labelPosition: 'before',
87+
labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes)
8588
onKeyboardFocus: () => {},
8689
onMouseEnter: () => {},
8790
onMouseLeave: () => {},
@@ -123,7 +126,7 @@ const FlatButton = React.createClass({
123126
secondary,
124127
style,
125128
...other,
126-
} = this.props;
129+
} = this.props;
127130

128131
const {
129132
buttonColor,
@@ -172,11 +175,14 @@ const FlatButton = React.createClass({
172175
const labelElement = label ? (
173176
<FlatButtonLabel label={label} style={labelStyle} />
174177
) : undefined;
178+
175179
// Place label before or after children.
176-
const childrenFragment = labelPosition === 'before' ? { labelElement, children } : { children, labelElement };
180+
const childrenFragment = labelPosition === 'before' ?
181+
{ labelElement, children }
182+
:
183+
{ children, labelElement };
177184
const enhancedButtonChildren = Children.create(childrenFragment);
178185

179-
180186
return (
181187
<EnhancedButton
182188
{...other}

‎src/raised-button.jsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const ReactDOM = require('react-dom');
33
const StylePropable = require('./mixins/style-propable');
44
const Transitions = require('./styles/transitions');
55
const ColorManipulator = require('./utils/color-manipulator');
6+
const Children = require('./utils/children');
67
const Typography = require('./styles/typography');
78
const EnhancedButton = require('./enhanced-button');
89
const Paper = require('./paper');
@@ -40,6 +41,10 @@ const RaisedButton = React.createClass({
4041
className: React.PropTypes.string,
4142
disabled: React.PropTypes.bool,
4243
label: validateLabel,
44+
labelPosition: React.PropTypes.oneOf([
45+
'before',
46+
'after',
47+
]),
4348
onMouseDown: React.PropTypes.func,
4449
onMouseUp: React.PropTypes.func,
4550
onMouseLeave: React.PropTypes.func,
@@ -55,6 +60,12 @@ const RaisedButton = React.createClass({
5560
fullWidth: React.PropTypes.bool,
5661
},
5762

63+
getDefaultProps: function() {
64+
return {
65+
labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes)
66+
};
67+
},
68+
5869
getInitialState() {
5970
let zDepth = this.props.disabled ? 0 : 1;
6071
return {
@@ -160,18 +171,22 @@ const RaisedButton = React.createClass({
160171

161172
render() {
162173
let {
174+
children,
163175
disabled,
164176
label,
177+
labelPosition,
178+
labelStyle,
165179
primary,
166180
secondary,
167-
...other } = this.props;
181+
...other,
182+
} = this.props;
168183

169184
let styles = this.getStyles();
170185

171186
let labelElement;
172187
if (label) {
173188
labelElement = (
174-
<span style={this.prepareStyles(styles.label, this.props.labelStyle)}>
189+
<span style={this.prepareStyles(styles.label, labelStyle)}>
175190
{label}
176191
</span>
177192
);
@@ -190,6 +205,13 @@ const RaisedButton = React.createClass({
190205
onKeyboardFocus: this._handleKeyboardFocus,
191206
};
192207

208+
// Place label before or after children.
209+
const childrenFragment = labelPosition === 'before' ?
210+
{ labelElement, children }
211+
:
212+
{ children, labelElement };
213+
const enhancedButtonChildren = Children.create(childrenFragment);
214+
193215
return (
194216
<Paper
195217
style={this.mergeStyles(styles.root, this.props.style)}
@@ -208,8 +230,7 @@ const RaisedButton = React.createClass({
208230
styles.overlay,
209231
(this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
210232
)}>
211-
{labelElement}
212-
{this.props.children}
233+
{enhancedButtonChildren}
213234
</div>
214235
</EnhancedButton>
215236
</Paper>

0 commit comments

Comments
 (0)