Skip to content

Commit f9f718a

Browse files
donniebergdonnieberg
committed
Make button component handle inverse and disabled states
1 parent 36ec304 commit f9f718a

File tree

6 files changed

+87
-53
lines changed

6 files changed

+87
-53
lines changed

‎components/SLDSButton/index.js‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ class Button extends React.Component {
1919

2020
constructor(props) {
2121
super(props);
22+
this.displayName = 'SLDSButton';
2223
this.state = { active: false };
2324
};
2425

@@ -51,7 +52,10 @@ class Button extends React.Component {
5152
<ButtonIcon
5253
name={this.props.iconName}
5354
size={this.props.iconSize}
54-
position={this.props.iconPosition || 'left'} />
55+
inverse={this.props.inverse}
56+
position={this.props.iconPosition}
57+
variant={this.props.variant}
58+
/>
5559
);
5660
}
5761
}
@@ -60,31 +64,16 @@ class Button extends React.Component {
6064
render() {
6165
const props = omit('className', this.props);
6266
const click = createChainedFunction(this.props.onClick, this.onClick.bind(this));
67+
const labelClasses = this.props.variant === 'icon' ? 'slds-assistive-text': '';
6368
if (this.props.disabled) { props['disabled'] = 'disabled' };
6469

65-
//If the button is only an icon render this:
66-
if(this.props.variant === 'icon'){
67-
return (
68-
<button className={this.getClassName()} {...props} onClick={click}>
69-
<Icon
70-
name={this.props.iconName}
71-
category='utility'
72-
size={this.props.iconSize}
73-
/>
74-
<span className="slds-assistive-text">{this.props.label}</span>
75-
</button>
76-
);
77-
}
78-
//Else we assume the button has a visible label (with or without an icon):
79-
else{
80-
return (
81-
<button className={this.getClassName()} {...props} onClick={click}>
82-
{this.props.iconPosition === 'right' ? this.props.label : null}
83-
{this.renderIcon()}
84-
{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}
85-
</button>
86-
);
87-
}
70+
return (
71+
<button className={this.getClassName()} {...props} onClick={click}>
72+
{this.props.iconPosition === 'right' ? <span className={labelClasses}>{this.props.label}</span>: null}
73+
{this.renderIcon()}
74+
{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? <span className={labelClasses}>{this.props.label}</span>: null}
75+
</button>
76+
);
8877
}
8978
}
9079

‎components/SLDSIcons.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,21 @@ export const ButtonIcon = React.createClass({
2828

2929
const useTag = '<use xlink:href="'+SLDSSettings.getAssetsPath()+'/icons/' + this.props.category + '-sprite/svg/symbols.svg#' + this.props.name + '" />';
3030
let className = 'slds-button__icon';
31-
if (this.props.stateful) {
32-
className += '--stateful';
33-
}
34-
if (this.props.position) {
35-
className = className + ' slds-button__icon--' + this.props.position;
31+
if (this.props.variant !== 'icon') {
32+
//If no position prop given, default to left
33+
this.props.position ? className += ' slds-button__icon--' + this.props.position : className += ' slds-button__icon--left';
3634
}
3735
if (this.props.size) {
38-
className = className + ' slds-button__icon--' + this.props.size;
36+
className += ' slds-button__icon--' + this.props.size;
3937
}
4038
if (this.props.inverse) {
41-
className = className + ' slds-button__icon--inverse';
39+
className += ' slds-button__icon--inverse';
40+
}
41+
if (this.props.stateful) {
42+
className += ' slds-button__icon--stateful';
4243
}
4344
if (this.props.hint) {
44-
className = className + ' slds-button__icon--hint';
45+
className += ' slds-button__icon--hint';
4546
}
4647
if(this.props.category === 'utility'){
4748
return <SLDSUtilityIcon name={this.props.name} aria-hidden='true' className={className} />;

‎components/SLDSModal/index.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ module.exports = React.createClass( {
134134
label='Close'
135135
variant='icon'
136136
iconName='close'
137-
iconSize='small'
137+
iconSize='large'
138+
inverse={true}
138139
className='slds-modal__close'
139140
onClick={this.closeModal} />
140141
</div>

‎demo/code-snippets/SLDSButton.txt‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11

2-
<SLDSButton
3-
label='Neutral'
4-
variant='neutral'
5-
disabled={false}
6-
iconName='download'
7-
iconSize='small'
8-
iconPosition='right'
9-
onClick={this.handleButtonClick} />
10-
11-
* Only label is required
12-
132
Below are component prop defaults and available options:
14-
* variant='base' ('neutral', 'brand', 'icon')
15-
* disabled='false'
16-
* iconSize='medium' ('x-small', 'medium', 'small', 'large')
17-
* iconPosition='left'('left', 'right', 'large')
3+
* label='' *required
4+
* variant='base' ['neutral', 'brand', 'icon']
5+
* disabled={false}
6+
* inverse={false}
7+
* iconName='' //see https://www.lightningdesignsystem.com/resources/icons#utility
8+
* iconSize='medium' ['x-small', 'medium', 'small', 'large']
9+
* iconPosition='left' ['left', 'right', 'large']
10+
11+
<SLDSButton label='Neutral' variant='neutral' onClick={this.handleNeutralClick} />
1812

‎demo/pages/HomePage/ButtonSection.jsx‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,18 @@ module.exports = React.createClass( {
3232
alert('Neutral Button Clicked');
3333
},
3434

35+
handleBrandClick () {
36+
alert('Brand Button Clicked');
37+
},
38+
3539
handleDisabledClick () {
3640
alert('Disabled Button Clicked');
3741
},
3842

43+
handleIconClick(){
44+
alert('Icon Button Clicked');
45+
},
46+
3947
render() {
4048
return (
4149

@@ -51,18 +59,29 @@ module.exports = React.createClass( {
5159
<SLDSButton
5260
label='Neutral'
5361
variant='neutral'
54-
disabled={false}
55-
iconName='download'
56-
iconSize='small'
57-
iconPosition='right'
5862
onClick={this.handleNeutralClick} />
5963

6064
<SLDSButton
6165
label='Disabled'
6266
variant='neutral'
6367
disabled={true}
64-
onClick={this.handleButtonClick} />
68+
onClick={this.handleDisabledClick} />
6569

70+
<SLDSButton
71+
label='Brand'
72+
variant='brand'
73+
iconName='download'
74+
iconSize='small'
75+
iconPosition='right'
76+
inverse={true}
77+
onClick={this.handleBrandClick} />
78+
79+
<SLDSButton
80+
label='Settings'
81+
variant='icon'
82+
iconName='settings'
83+
iconSize='large'
84+
onClick={this.handleIconClick} />
6685
</div>
6786
</div>
6887

‎lib/SLDSToast/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
12+
'use strict';
13+
14+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
15+
16+
var _react = require('react');
17+
18+
var _react2 = _interopRequireDefault(_react);
19+
20+
module.exports = _react2['default'].createClass({
21+
displayName: 'exports',
22+
23+
render: function render() {
24+
return _react2['default'].createElement(
25+
'div',
26+
null,
27+
'TOAST!!!'
28+
);
29+
}
30+
});

0 commit comments

Comments
 (0)