Skip to content

Commit b6bd7ef

Browse files
donniebergdonnieberg
committed
Add stateful button and refactor button icon to require a position prop
1 parent 21b4198 commit b6bd7ef

File tree

5 files changed

+210
-98
lines changed

5 files changed

+210
-98
lines changed

‎components/SLDSButton/SLDSButtonStateful/index.jsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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+
import React from "react";
13+
import {ButtonIcon, Icon} from '../../SLDSIcons';
14+
const classNames = require("classnames");
15+
16+
const displayName = "SLDSButtonStateful";
17+
const propTypes = {
18+
19+
};
20+
const defaultProps = {};
21+
22+
class SLDSButtonStateful extends React.Component {
23+
24+
constructor(props) {
25+
super(props);
26+
this.state = {active: false};
27+
}
28+
29+
handleClick() {
30+
this.setState({ active: !this.state.active });
31+
}
32+
33+
getClassName() {
34+
return classNames(this.props.className, "slds-button", {
35+
["slds-button--neutral"]: this.props.type !== "icon",
36+
["slds-button--inverse"]: this.props.variant === "inverse",
37+
["slds-not-selected"]: !this.state.active,
38+
["slds-is-selected"]: this.state.active,
39+
["slds-button--icon-border"]: this.props.type === "icon",
40+
});
41+
}
42+
43+
render() {
44+
if(this.props.type === "follow") {
45+
return (
46+
<button className={this.getClassName()} aria-live="assertive" onClick={this.handleClick.bind(this)}>
47+
<span className="slds-text-not-selected">
48+
<ButtonIcon disabled={this.props.disabled} name="add" size="small" position="left" className="slds-button__icon--stateful" />
49+
Follow
50+
</span>
51+
<span className="slds-text-selected">
52+
<ButtonIcon disabled={this.props.disabled} name="check" size="small" position="left" className="slds-button__icon--stateful" />
53+
Following
54+
</span>
55+
<span className="slds-text-selected-focus">
56+
<ButtonIcon disabled={this.props.disabled} name="close" size="small" position="left" className="slds-button__icon--stateful" />
57+
Unfollow
58+
</span>
59+
</button>
60+
)
61+
}
62+
else if(this.props.type === "join") {
63+
return (
64+
<button className={this.getClassName()} aria-live="assertive" onClick={this.handleClick.bind(this)}>
65+
<span className="slds-text-not-selected">
66+
<ButtonIcon disabled={this.props.disabled} name="add" size="small" position="left" className="slds-button__icon--stateful" />
67+
Join
68+
</span>
69+
<span className="slds-text-selected">
70+
<ButtonIcon disabled={this.props.disabled} name="check" size="small" position="left" className="slds-button__icon--stateful" />
71+
Member
72+
</span>
73+
<span className="slds-text-selected-focus">
74+
<ButtonIcon disabled={this.props.disabled} name="close" size="small" position="left" className="slds-button__icon--stateful" />
75+
Leave
76+
</span>
77+
</button>
78+
)
79+
}
80+
else if(this.props.type === "icon") {
81+
return (
82+
<button className={this.getClassName()} onClick={this.handleClick.bind(this)}>
83+
<ButtonIcon disabled={this.props.disabled} name="like" size="large" className="slds-button__icon--stateful" />
84+
</button>
85+
)
86+
}
87+
else {
88+
return (
89+
<div className="">SLDS Stateful Button needs proper type prop: follow, join, or icon.</div>
90+
)
91+
}
92+
93+
}
94+
}
95+
96+
SLDSButtonStateful.displayName = displayName;
97+
SLDSButtonStateful.propTypes = propTypes;
98+
SLDSButtonStateful.defaultProps = defaultProps;
99+
100+
module.exports = SLDSButtonStateful;
101+

‎components/SLDSIcons.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,13 @@ export const ButtonIcon = React.createClass({
2626
render() {
2727

2828
let className = 'slds-button__icon';
29-
if (this.props.variant !== 'icon') {
29+
if (this.props.position) {
3030
//If no position prop given, default to left
31-
this.props.position ? className += ' slds-button__icon--' + this.props.position : className += ' slds-button__icon--left';
31+
className += ' slds-button__icon--' + this.props.position;
3232
}
3333
if (this.props.size) {
3434
className += ' slds-button__icon--' + this.props.size;
3535
}
36-
if (this.props.inverse) {
37-
className += ' slds-button__icon--inverse';
38-
}
39-
if (this.props.stateful) {
40-
className += ' slds-button__icon--stateful';
41-
}
42-
if (this.props.hint) {
43-
className += ' slds-button__icon--hint';
44-
}
4536
if (this.props.destructive) {
4637
className += ' slds-button__icon--destructive';
4738
}
@@ -75,9 +66,6 @@ export const Icon = React.createClass({
7566
let label = null;
7667

7768
let className = 'slds-icon';
78-
if (this.props.stateful) {
79-
className += '--stateful';
80-
}
8169
if (this.props.className) {
8270
className += ' ' +this.props.className;
8371
}

‎components/SLDSNotification/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class SLDSNotification extends React.Component {
4545
}
4646
return <SLDSButton
4747
label="Dismiss Notification"
48-
variant="icon"
48+
variant="icon-inverse"
4949
iconName="close"
5050
iconSize={size}
5151
inverse={true}

‎components/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import SLDSModal from './SLDSModal';
2222
import SLDSModalTrigger from './SLDSModal/trigger';
2323
import SLDSIcons from './SLDSIcons';
2424
import SLDSNotification from './SLDSNotification';
25+
import SLDSUtilityIcon from './SLDSUtilityIcon';
2526

2627
module.exports = {
2728
SLDSPicklistBase: SLDSPicklistBase,
@@ -35,5 +36,6 @@ module.exports = {
3536
SLDSModalTrigger: SLDSModalTrigger,
3637
SLDSIcons: SLDSIcons,
3738
SLDSNotification: SLDSNotification,
38-
SLDSTooltip:SLDSTooltip
39+
SLDSTooltip: SLDSTooltip,
40+
SLDSUtilityIcon: SLDSUtilityIcon,
3941
};

‎demo/pages/HomePage/ButtonSection.jsx

Lines changed: 103 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
import React from "react";
1313
import SLDSButton from "../../../components/SLDSButton";
14-
import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
14+
import SLDSButtonStateful from "../../../components/SLDSButton/SLDSButtonStateful";
1515
import {default as PrismCode} from "react-prism/lib/PrismCode";
1616

1717

@@ -45,88 +45,109 @@ module.exports = React.createClass( {
4545
return (
4646

4747
<div className="slds-p-around--medium">
48-
<h3 id="buttonSection" className="slds-text-heading--medium slds-truncate">
49-
Button
50-
</h3>
51-
52-
<PrismCode className="language-markup">
53-
{/*require("raw-loader!../../code-snippets/SLDSButton.txt") */}
54-
</PrismCode>
55-
56-
57-
<div className="slds-p-vertical--medium">
58-
<SLDSButton label="Base" variant="base" onClick={this.handleClick('Base')} className="slds-m-right--medium"/>
59-
<SLDSButton label="Neutral" variant="neutral" onClick={this.handleClick('Neutral')} className="slds-m-right--medium"/>
60-
<SLDSButton label="Neutral Icon" variant="neutral" iconName="download" onClick={this.handleClick('Neutral Icon')} className="slds-m-right--medium"/>
61-
<SLDSButton label="Responsive" variant="neutral" responsive={true} onClick={this.handleClick('Responsive')} className="slds-m-right--medium"/>
62-
<SLDSButton label="Brand" variant="brand" onClick={this.handleClick('Brand')} className="slds-m-right--medium"/>
63-
<SLDSButton label="Destructive" variant="destructive" onClick={this.handleClick('Destructive')} className="slds-m-right--medium"/>
64-
<div style={inverseBtnParent}>
65-
<SLDSButton label="Inverse" variant="inverse" onClick={this.handleClick('Inverse')} className="slds-m-right--medium"/>
66-
</div>
67-
</div>
68-
69-
<div className="slds-p-vertical--medium">
70-
<span className="slds-m-right--medium">
71-
Icon base
72-
</span>
73-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" onClick={this.handleClick('Icon')} />
74-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" onClick={this.handleClick('Icon')} />
75-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" onClick={this.handleClick('Icon')} />
76-
<br />
77-
<span className="slds-m-right--medium">
78-
Icon bare
79-
</span>
80-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="bare" onClick={this.handleClick('Icon')} />
81-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="bare" onClick={this.handleClick('Icon')} />
82-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="bare" onClick={this.handleClick('Icon')} />
83-
<br />
84-
<span className="slds-m-right--medium">
85-
Icon container
86-
</span>
87-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="container" onClick={this.handleClick('Icon')} />
88-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="container" onClick={this.handleClick('Icon')} />
89-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="container" onClick={this.handleClick('Icon')} />
90-
<br />
91-
<span className="slds-m-right--medium">
92-
Icon border
93-
</span>
94-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="border" onClick={this.handleClick('Icon')} />
95-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="border" onClick={this.handleClick('Icon')} />
96-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="border" onClick={this.handleClick('Icon')} />
97-
<br />
98-
<span className="slds-m-right--medium">
99-
Icon border filled
100-
</span>
101-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="border-filled" onClick={this.handleClick('Icon')} />
102-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="border-filled" onClick={this.handleClick('Icon')} />
103-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="border-filled" onClick={this.handleClick('Icon')} />
104-
<br />
105-
<span className="slds-m-right--medium">
106-
Icon More
107-
</span>
108-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="more" onClick={this.handleClick('Icon')} />
109-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="more" onClick={this.handleClick('Icon')} />
110-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="more" onClick={this.handleClick('Icon')} />
111-
<br />
112-
<span className="slds-m-right--medium">
113-
Icon Inverse
114-
</span>
115-
<div style={inverseBtnParent}>
116-
<SLDSButton label="Icon" variant="icon-inverse" iconName="settings" iconSize="large" onClick={this.handleClick('Icon')} />
117-
</div>
118-
<br />
119-
<span className="slds-m-right--medium">
120-
Icon Hint
121-
</span>
122-
<div style={hintBtnParent} className="slds-hint-parent">
123-
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" hint={true} onClick={this.handleClick('Icon')} />
124-
</div>
125-
</div>
126-
127-
<div className="slds-p-vertical--medium">
128-
</div>
48+
<h3 id="buttonSection" className="slds-text-heading--medium slds-truncate">
49+
Button
50+
</h3>
51+
52+
<PrismCode className="language-markup">
53+
{/*require("raw-loader!../../code-snippets/SLDSButton.txt") */}
54+
</PrismCode>
55+
56+
57+
<div className="slds-p-vertical--medium">
58+
<h4 className="slds-text-heading--small">Standard Buttons</h4>
59+
<SLDSButton label="Base" variant="base" onClick={this.handleClick('Base')} className="slds-m-right--medium"/>
60+
<SLDSButton label="Neutral" variant="neutral" onClick={this.handleClick('Neutral')} className="slds-m-right--medium"/>
61+
<SLDSButton label="Neutral Icon" variant="neutral" iconName="download" iconPosition="left" onClick={this.handleClick('Neutral Icon')} className="slds-m-right--medium"/>
62+
<SLDSButton label="Responsive" variant="neutral" responsive={true} onClick={this.handleClick('Responsive')} className="slds-m-right--medium"/>
63+
<SLDSButton label="Brand" variant="brand" onClick={this.handleClick('Brand')} className="slds-m-right--medium"/>
64+
<SLDSButton label="Destructive" variant="destructive" onClick={this.handleClick('Destructive')} className="slds-m-right--medium"/>
65+
<div style={inverseBtnParent}>
66+
<SLDSButton label="Inverse" variant="inverse" onClick={this.handleClick('Inverse')} className="slds-m-right--medium"/>
67+
</div>
68+
</div>
69+
70+
<div className="slds-p-vertical--medium">
71+
<h4 className="slds-text-heading--small">Stateful Buttons</h4>
72+
<SLDSButtonStateful type="icon" iconName="like" iconSize="large" className="slds-m-right--medium"/>
73+
<span className="slds-m-right--medium">
74+
<SLDSButtonStateful type="follow"/>
75+
</span>
76+
<div style={inverseBtnParent} className="slds-m-right--medium">
77+
<SLDSButtonStateful type="join" variant="inverse" />
78+
</div>
79+
</div>
12980

81+
<div className="slds-p-vertical--medium">
82+
<h4 className="slds-text-heading--small">Icon Buttons</h4>
83+
<table className="slds-container--small">
84+
<tr>
85+
<td className="slds-p-vertical--medium"><span className="slds-m-right--medium"> Icon base </span></td>
86+
<td>
87+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" onClick={this.handleClick('Icon')} />
88+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" onClick={this.handleClick('Icon')} />
89+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" onClick={this.handleClick('Icon')} />
90+
</td>
91+
</tr>
92+
<tr>
93+
<td className="slds-p-vertical--medium"><span className="slds-m-right--medium"> Icon bare </span></td>
94+
<td>
95+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="bare" onClick={this.handleClick('Icon')} />
96+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="bare" onClick={this.handleClick('Icon')} />
97+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="bare" onClick={this.handleClick('Icon')} />
98+
</td>
99+
</tr>
100+
<tr>
101+
<td className="slds-p-vertical--medium"><span className="slds-m-right--medium"> Icon container </span></td>
102+
<td>
103+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="container" onClick={this.handleClick('Icon')} />
104+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="container" onClick={this.handleClick('Icon')} />
105+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="container" onClick={this.handleClick('Icon')} />
106+
</td>
107+
</tr>
108+
<tr>
109+
<td className="slds-p-vertical--medium"><span className="slds-m-right--medium"> Icon border </span></td>
110+
<td>
111+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="border" onClick={this.handleClick('Icon')} />
112+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="border" onClick={this.handleClick('Icon')} />
113+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="border" onClick={this.handleClick('Icon')} />
114+
</td>
115+
</tr>
116+
<tr>
117+
<td className="slds-p-vertical--medium"><span className="slds-m-right--medium"> Icon border filled </span></td>
118+
<td>
119+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="border-filled" onClick={this.handleClick('Icon')} />
120+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="border-filled" onClick={this.handleClick('Icon')} />
121+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="border-filled" onClick={this.handleClick('Icon')} />
122+
</td>
123+
</tr>
124+
<tr>
125+
<td className="slds-p-vertical--medium"><span className="slds-m-right--medium"> Icon More </span></td>
126+
<td>
127+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="small" iconVariant="more" onClick={this.handleClick('Icon')} />
128+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="medium" iconVariant="more" onClick={this.handleClick('Icon')} />
129+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" iconVariant="more" onClick={this.handleClick('Icon')} />
130+
</td>
131+
</tr>
132+
<tr>
133+
<td className="slds-m-vertical--medium"><span className="slds-m-right--medium"> Icon Inverse </span></td>
134+
<td>
135+
<div style={inverseBtnParent}>
136+
<SLDSButton label="Icon" variant="icon-inverse" iconName="settings" iconSize="large" onClick={this.handleClick('Icon')} />
137+
</div>
138+
</td>
139+
</tr>
140+
<tr>
141+
<td className="slds-m-vertical--medium"><span className="slds-m-right--medium"> Icon Hint </span></td>
142+
<td>
143+
<div style={hintBtnParent} className="slds-hint-parent">
144+
<SLDSButton label="Icon" variant="icon" iconName="settings" iconSize="large" hint={true} onClick={this.handleClick('Icon')} />
145+
</div>
146+
</td>
147+
</tr>
148+
</table>
149+
150+
</div>
130151
</div>
131152

132153

0 commit comments

Comments
 (0)