Skip to content

Commit 0770cad

Browse files
author
Hai Nguyen
committed
Merge pull request #323 from gabdallah222/master
Allow nesting in Raised/Flat Buttons
2 parents 906605b + a504499 commit 0770cad

File tree

6 files changed

+131
-26
lines changed

6 files changed

+131
-26
lines changed

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

+57-8
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ var mui = require('mui');
33
var FlatButton = mui.FlatButton;
44
var FloatingActionButton = mui.FloatingActionButton;
55
var RaisedButton = mui.RaisedButton;
6+
var FontIcon = mui.FontIcon;
67
var ComponentDoc = require('../../component-doc.jsx');
78

89
var ButtonPage = React.createClass({
@@ -14,11 +15,31 @@ var ButtonPage = React.createClass({
1415
'<FlatButton label="Default" />\n' +
1516
'<FlatButton label="Primary" primary={true} />\n' +
1617
'<FlatButton label="Secondary" secondary={true} />\n' +
18+
'<FlatButton secondary={true}>\n' +
19+
' <span className="mui-flat-button-label example-image-button">Choose an Image</span>\n' +
20+
' <input type="file" id="imageButton" className="example-image-input"></input>\n' +
21+
'</FlatButton>\n' +
22+
'<div className="button-example-container">\n' +
23+
' <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>\n' +
24+
' <FontIcon className="muidocs-icon-custom-github example-flat-button-icon"/>\n' +
25+
' <span className="mui-flat-button-label">Github</span>\n' +
26+
' </FlatButton>\n' +
27+
'</div>\n' +
1728
'<FlatButton label="Disabled" disabled={true} />\n\n' +
1829
'//Raised Buttons\n' +
1930
'<RaisedButton label="Default" />\n' +
2031
'<RaisedButton label="Primary" primary={true} />\n' +
2132
'<RaisedButton label="Secondary" secondary={true} />\n' +
33+
'<RaisedButton secondary={true}>\n' +
34+
' <span className="mui-raised-button-label example-image-button">Choose an Image</span>\n' +
35+
' <input type="file" id="imageButton" className="example-image-input"></input>\n' +
36+
'</RaisedButton>\n' +
37+
'<div className="button-example-container">\n' +
38+
' <RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>\n' +
39+
' <FontIcon className="muidocs-icon-custom-github example-button-icon"/>\n' +
40+
' <span className="mui-raised-button-label example-icon-button-label">Github</span>\n' +
41+
' </RaisedButton>\n' +
42+
'</div>\n' +
2243
'<RaisedButton label="Disabled" disabled={true} />\n\n' +
2344
'//Floating Action Buttons\n' +
2445
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" />\n' +
@@ -37,11 +58,13 @@ var ButtonPage = React.createClass({
3758
name: 'Flat Button',
3859
infoArray: [
3960
{
40-
name: 'label',
41-
type: 'string',
61+
name: 'label or children',
62+
type: 'string (label) or HTML/React elements (children)',
4263
header: 'required',
43-
desc: 'This is the text to display inside the button. This only applies to flat and ' +
44-
'raised buttons.'
64+
desc: 'This is what will be displayed inside the button. If a label is specified, the text within the label prop will be displayed.'+
65+
' Otherwise, the component will expect children which will then be displayed (in our example, we are nesting an <input type="file" />'+
66+
'and a span that acts as our label to be displayed.) '+
67+
'This only applies to flat and raised buttons.'
4568
},
4669
{
4770
name: 'linkButton',
@@ -67,11 +90,13 @@ var ButtonPage = React.createClass({
6790
name: 'Raised Button',
6891
infoArray: [
6992
{
70-
name: 'label',
71-
type: 'string',
93+
name: 'label or children',
94+
type: 'string (label) or HTML/React elements (children)',
7295
header: 'required',
73-
desc: 'This is the text to display inside the button. This only applies to flat and ' +
74-
'raised buttons.'
96+
desc: 'This is what will be displayed inside the button. If a label is specified, the text within the label prop will be displayed.'+
97+
' Otherwise, the component will expect children which will then be displayed (in our example, we are nesting an <input type="file" />'+
98+
'and a span that acts as our label to be displayed.) '+
99+
'This only applies to flat and raised buttons.'
75100
},
76101
{
77102
name: 'linkButton',
@@ -145,6 +170,18 @@ var ButtonPage = React.createClass({
145170
<div className="button-example-container">
146171
<FlatButton label="Secondary" secondary={true} />
147172
</div>
173+
<div className="button-example-container">
174+
<FlatButton secondary={true}>
175+
<span className="mui-flat-button-label example-image-button">Choose an Image</span>
176+
<input type="file" id="imageButton" className="example-image-input"></input>
177+
</FlatButton>
178+
</div>
179+
<div className="button-example-container">
180+
<FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>
181+
<FontIcon className="muidocs-icon-custom-github example-flat-button-icon"/>
182+
<span className="mui-flat-button-label">Github</span>
183+
</FlatButton>
184+
</div>
148185
<div className="button-example-container">
149186
<FlatButton label="Disabled" disabled={true} />
150187
</div>
@@ -160,6 +197,18 @@ var ButtonPage = React.createClass({
160197
<div className="button-example-container">
161198
<RaisedButton label="Secondary" secondary={true} />
162199
</div>
200+
<div className="button-example-container">
201+
<RaisedButton secondary={true}>
202+
<span className="mui-raised-button-label example-image-button">Choose an Image</span>
203+
<input type="file" className="example-image-input"></input>
204+
</RaisedButton>
205+
</div>
206+
<div className="button-example-container">
207+
<RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>
208+
<FontIcon className="muidocs-icon-custom-github example-button-icon"/>
209+
<span className="mui-raised-button-label example-icon-button-label">Github</span>
210+
</RaisedButton>
211+
</div>
163212
<div className="button-example-container">
164213
<RaisedButton label="Disabled" disabled={true} />
165214
</div>

‎docs/src/less/pages/components/buttons.less

+46
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,50 @@
1616
width: 25%;
1717
}
1818
}
19+
}
20+
21+
.example-image-button {
22+
white-space: pre;
23+
cursor: pointer;
24+
position: relative;
25+
text-align: center;
26+
line-height: 24px;
27+
width: 50%;
28+
top: 0px;
29+
left: 0px;
30+
margin-top: 24px;
31+
margin-right: auto;
32+
margin-left: auto;
33+
}
34+
35+
.example-image-input {
36+
cursor: pointer;
37+
position: absolute;
38+
top: 0;
39+
bottom: 0;
40+
right: 0;
41+
left: 0;
42+
width: 100%;
43+
opacity: 0;
44+
}
45+
46+
.example-button-icon {
47+
.mui-text-full-white;
48+
height: 100%;
49+
display: inline-block;
50+
vertical-align: middle;
51+
float: left;
52+
padding-left: 6px;
53+
line-height: 36px;
54+
}
55+
56+
.example-icon-button-label {
57+
padding-left: 6px!important;
58+
}
59+
60+
.example-flat-button-icon {
61+
display: inline-block;
62+
float: left;
63+
line-height: 36px;
64+
padding-right: 6px;
1965
}

‎src/js/enhanced-button.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ var EnhancedButton = React.createClass({
5252
<TouchRipple
5353
ref="touchRipple"
5454
key="touchRipple"
55-
centerRipple={centerRipple} />
55+
centerRipple={centerRipple}>
56+
{this.props.children}
57+
</TouchRipple>
5658
);
5759
var focusRipple = (
5860
<FocusRipple
@@ -67,8 +69,7 @@ var EnhancedButton = React.createClass({
6769
onTouchTap: this._handleTouchTap
6870
};
6971
var buttonChildren = [
70-
this.props.children,
71-
disabled || disableTouchRipple ? null : touchRipple,
72+
disabled || disableTouchRipple ? this.props.children : touchRipple,
7273
disabled || disableFocusRipple ? null : focusRipple
7374
];
7475

‎src/js/flat-button.jsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ var FlatButton = React.createClass({
88

99
propTypes: {
1010
className: React.PropTypes.string,
11-
label: React.PropTypes.string.isRequired,
11+
label: function(props, propName, componentName){
12+
if (!props.children && !props.label) {
13+
return new Error('Warning: Required prop `label` or `children` was not specified in `'+ componentName + '`.')
14+
}
15+
},
1216
primary: React.PropTypes.bool,
1317
secondary: React.PropTypes.bool
1418
},
@@ -24,11 +28,15 @@ var FlatButton = React.createClass({
2428
'mui-is-primary': primary,
2529
'mui-is-secondary': !primary && secondary
2630
});
31+
var children;
32+
33+
if (label) children = <span className="mui-flat-button-label">{label}</span>;
34+
else children = this.props.children;
2735

2836
return (
2937
<EnhancedButton {...other}
3038
className={classes}>
31-
<span className="mui-flat-button-label">{label}</span>
39+
{children}
3240
</EnhancedButton>
3341
);
3442
}

‎src/js/raised-button.jsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ var RaisedButton = React.createClass({
99

1010
propTypes: {
1111
className: React.PropTypes.string,
12-
label: React.PropTypes.string.isRequired,
12+
label: function(props, propName, componentName){
13+
if (!props.children && !props.label) {
14+
return new Error('Warning: Required prop `label` or `children` was not specified in `'+ componentName + '`.')
15+
}
16+
},
1317
onMouseDown: React.PropTypes.func,
1418
onMouseUp: React.PropTypes.func,
1519
onMouseOut: React.PropTypes.func,
@@ -45,6 +49,10 @@ var RaisedButton = React.createClass({
4549
'mui-is-primary': primary,
4650
'mui-is-secondary': !primary && secondary
4751
});
52+
var children;
53+
54+
if (label) children = <span className="mui-raised-button-label">{label}</span>;
55+
else children = this.props.children;
4856

4957
return (
5058
<Paper className={classes} zDepth={this.state.zDepth}>
@@ -55,7 +63,7 @@ var RaisedButton = React.createClass({
5563
onMouseOut={this._handleMouseOut}
5664
onTouchStart={this._handleTouchStart}
5765
onTouchEnd={this._handleTouchEnd}>
58-
<span className="mui-raised-button-label">{label}</span>
66+
{children}
5967
</EnhancedButton>
6068
</Paper>
6169
);

‎src/js/ripples/touch-ripple.jsx

+4-11
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,17 @@ var TouchRipple = React.createClass({
2525
render: function() {
2626
var classes = this.getClasses('mui-touch-ripple');
2727

28-
//This is needed to keep click events from getting lost
29-
//in safari. Without it, onClick won't fire.
30-
var shieldStyle = {
31-
position: 'absolute',
32-
height: '100%',
33-
width: '100%'
34-
};
35-
3628
return (
3729
<div
38-
className={classes}
3930
onMouseUp={this._handleMouseUp}
4031
onMouseDown={this._handleMouseDown}
4132
onMouseOut={this._handleMouseOut}
4233
onTouchStart={this._handleTouchStart}
4334
onTouchEnd={this._handleTouchEnd}>
44-
{this._getRippleElements()}
45-
<div style={shieldStyle} />
35+
<div className={classes}>
36+
{this._getRippleElements()}
37+
</div>
38+
{this.props.children}
4639
</div>
4740
);
4841
},

0 commit comments

Comments
 (0)