Skip to content

Commit 895eb5c

Browse files
donniebergdonnieberg
committed
Merge pull request #69 from salesforce-ux/button
ButtonGroup
2 parents 152e5a8 + f15714b commit 895eb5c

File tree

13 files changed

+209
-74
lines changed

13 files changed

+209
-74
lines changed

‎components/SLDSButton/SLDSButtonStateful/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ class SLDSButtonStateful extends React.Component {
8080
else if(this.props.type === "icon") {
8181
return (
8282
<button className={this.getClassName()} onClick={this.handleClick.bind(this)}>
83-
<ButtonIcon disabled={this.props.disabled} name="like" size="large" className="slds-button__icon--stateful" />
83+
<ButtonIcon disabled={this.props.disabled} name={this.props.iconName} size={this.props.iconSize} assistiveText={this.props.assistiveText} className="slds-button__icon--stateful" />
8484
</button>
8585
)
8686
}

‎components/SLDSButton/index.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const propTypes = {
3434
const defaultProps = {};
3535

3636

37-
class Button extends React.Component {
37+
class SLDSButton extends React.Component {
3838

3939
constructor(props) {
4040
super(props);
@@ -128,8 +128,8 @@ class Button extends React.Component {
128128
}
129129
}
130130

131-
Button.displayName = displayName;
132-
Button.propTypes = propTypes;
133-
Button.defaultProps = defaultProps;
131+
SLDSButton.displayName = displayName;
132+
SLDSButton.propTypes = propTypes;
133+
SLDSButton.defaultProps = defaultProps;
134134

135-
module.exports = Button;
135+
module.exports = SLDSButton;

‎components/SLDSButtonGroup/index.jsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,30 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1111

1212
import React from "react";
1313

14-
class ButtonGroup extends React.Component {
14+
const displayName = "SLDSButtonGroup";
15+
const propTypes = {
16+
children: React.PropTypes.element.isRequired
17+
};
18+
const defaultProps = {};
19+
20+
class SLDSButtonGroup extends React.Component {
1521
constructor(props) {
1622
super(props);
1723
this.state = {};
1824
}
25+
1926
render() {
2027
return (
2128
<div className="slds-button-group" role="group">
2229
{this.props.children}
2330
</div>
24-
);
31+
)
2532
}
2633
}
2734

35+
SLDSButtonGroup.displayName = displayName;
36+
SLDSButtonGroup.propTypes = propTypes;
37+
SLDSButtonGroup.defaultProps = defaultProps;
38+
2839
module.exports = ButtonGroup;
2940

‎components/SLDSIcons.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ import SLDSUtilityIcon from './SLDSUtilityIcon';
1717
export const ButtonIcon = React.createClass({
1818

1919
getDefaultProps() {
20-
2120
return {
2221
category: 'utility', // Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
2322
};
2423
},
2524

2625
render() {
27-
2826
let className = 'slds-button__icon';
27+
let label = null;
28+
2929
if (this.props.position) {
3030
//If no position prop given, default to left
3131
className += ' slds-button__icon--' + this.props.position;
@@ -36,13 +36,15 @@ export const ButtonIcon = React.createClass({
3636
if (this.props.destructive) {
3737
className += ' slds-button__icon--destructive';
3838
}
39-
/*
40-
if(this.props.category === 'utility'){
41-
return <SLDSUtilityIcon name={this.props.name} aria-hidden='true' className={className} />;
39+
if (this.props.assistiveText) {
40+
label = <span className="slds-assistive-text">{this.props.assistiveText}</span>;
4241
}
43-
return <svg aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
44-
*/
45-
return <SLDSUtilityIcon name={this.props.name} category={this.props.category} aria-hidden='true' className={className} />;
42+
return (
43+
<span>
44+
{label}
45+
<SLDSUtilityIcon name={this.props.name} category={this.props.category} aria-hidden='true' className={className} />
46+
</span>
47+
)
4648

4749

4850
}

‎demo/pages/HomePage/ButtonGroupSection.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import React from 'react';
1414
import SLDSButtonGroup from '../../../components/SLDSButtonGroup';
1515
import SLDSDropdownBase from '../../../components/SLDSDropdownBase';
1616
import SLDSButton from '../../../components/SLDSButton';
17+
import SLDSButtonStateful from '../../../components/SLDSButton/SLDSButtonStateful';
1718
import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
1819
import {default as PrismCode} from "react-prism/lib/PrismCode";
1920

@@ -80,8 +81,8 @@ module.exports = React.createClass( {
8081

8182
<div className='slds-p-vertical--small'>
8283
<SLDSButtonGroup>
83-
<SLDSButton label='Chart' variant='icon' iconName='chart' iconVariant='border'/>
84-
<SLDSButton label='Filter' variant='icon' iconName='filter' iconVariant='border'/>
84+
<SLDSButtonStateful type="icon" assistiveText="View Reports" label='Chart' variant='icon' iconName='chart' />
85+
<SLDSButtonStateful type="icon" assistiveText="Filter Data" label='Filter' variant='icon' iconName='filter' />
8586
<SLDSButton label='Sort' variant='icon' iconName='sort' iconVariant='more'/>
8687
</SLDSButtonGroup>
8788
</div>

‎dist/design-system-react.js

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@ return /******/ (function(modules) { // webpackBootstrap
119119

120120
var _SLDSNotification2 = _interopRequireDefault(_SLDSNotification);
121121

122+
var _SLDSUtilityIcon = __webpack_require__(36);
123+
124+
var _SLDSUtilityIcon2 = _interopRequireDefault(_SLDSUtilityIcon);
125+
122126
module.exports = {
123127
SLDSPicklistBase: _SLDSPicklistBase2['default'],
124128
SLDSDropdownBase: _SLDSDropdownBase2['default'],
@@ -131,7 +135,8 @@ return /******/ (function(modules) { // webpackBootstrap
131135
SLDSModalTrigger: _SLDSModalTrigger2['default'],
132136
SLDSIcons: _SLDSIcons2['default'],
133137
SLDSNotification: _SLDSNotification2['default'],
134-
SLDSTooltip: _SLDSTooltip2['default']
138+
SLDSTooltip: _SLDSTooltip2['default'],
139+
SLDSUtilityIcon: _SLDSUtilityIcon2['default']
135140
};
136141

137142
/***/ },
@@ -3462,41 +3467,29 @@ return /******/ (function(modules) { // webpackBootstrap
34623467
displayName: 'ButtonIcon',
34633468

34643469
getDefaultProps: function getDefaultProps() {
3465-
34663470
return {
34673471
category: 'utility' };
34683472
},
34693473

34703474
// Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
34713475
render: function render() {
3472-
34733476
var className = 'slds-button__icon';
3474-
if (this.props.variant !== 'icon') {
3477+
var label = null;
3478+
3479+
if (this.props.position) {
34753480
//If no position prop given, default to left
3476-
this.props.position ? className += ' slds-button__icon--' + this.props.position : className += ' slds-button__icon--left';
3481+
className += ' slds-button__icon--' + this.props.position;
34773482
}
34783483
if (this.props.size) {
34793484
className += ' slds-button__icon--' + this.props.size;
34803485
}
3481-
if (this.props.inverse) {
3482-
className += ' slds-button__icon--inverse';
3483-
}
3484-
if (this.props.stateful) {
3485-
className += ' slds-button__icon--stateful';
3486-
}
3487-
if (this.props.hint) {
3488-
className += ' slds-button__icon--hint';
3489-
}
34903486
if (this.props.destructive) {
34913487
className += ' slds-button__icon--destructive';
34923488
}
3493-
/*
3494-
if(this.props.category === 'utility'){
3495-
return <SLDSUtilityIcon name={this.props.name} aria-hidden='true' className={className} />;
3496-
}
3497-
return <svg aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
3498-
*/
3499-
return _react2['default'].createElement(_SLDSUtilityIcon2['default'], { name: this.props.name, category: this.props.category, 'aria-hidden': 'true', className: className });
3489+
if (this.props.assistiveText) {
3490+
label = _react2['default'].createElement('span', { className: 'slds-assistive-text' }, this.props.assistiveText);
3491+
}
3492+
return _react2['default'].createElement('span', null, label, _react2['default'].createElement(_SLDSUtilityIcon2['default'], { name: this.props.name, category: this.props.category, 'aria-hidden': 'true', className: className }));
35003493
}
35013494

35023495
});
@@ -3520,9 +3513,6 @@ return /******/ (function(modules) { // webpackBootstrap
35203513
var label = null;
35213514

35223515
var className = 'slds-icon';
3523-
if (this.props.stateful) {
3524-
className += '--stateful';
3525-
}
35263516
if (this.props.className) {
35273517
className += ' ' + this.props.className;
35283518
}
@@ -11288,7 +11278,7 @@ return /******/ (function(modules) { // webpackBootstrap
1128811278
}
1128911279
return _react2["default"].createElement(_SLDSButton2["default"], {
1129011280
label: "Dismiss Notification",
11291-
variant: "icon",
11281+
variant: "icon-inverse",
1129211282
iconName: "close",
1129311283
iconSize: size,
1129411284
inverse: true,

‎dist/design-system-react.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/design-system-react.min.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/design-system-react.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/SLDSButton/SLDSButtonStateful/index.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
15+
16+
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
17+
18+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19+
20+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21+
22+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
23+
24+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
25+
26+
var _react = require("react");
27+
28+
var _react2 = _interopRequireDefault(_react);
29+
30+
var _SLDSIcons = require('../../SLDSIcons');
31+
32+
var classNames = require("classnames");
33+
34+
var displayName = "SLDSButtonStateful";
35+
var propTypes = {};
36+
var defaultProps = {};
37+
38+
var SLDSButtonStateful = (function (_React$Component) {
39+
_inherits(SLDSButtonStateful, _React$Component);
40+
41+
function SLDSButtonStateful(props) {
42+
_classCallCheck(this, SLDSButtonStateful);
43+
44+
_get(Object.getPrototypeOf(SLDSButtonStateful.prototype), "constructor", this).call(this, props);
45+
this.state = { active: false };
46+
}
47+
48+
_createClass(SLDSButtonStateful, [{
49+
key: "handleClick",
50+
value: function handleClick() {
51+
this.setState({ active: !this.state.active });
52+
}
53+
}, {
54+
key: "getClassName",
55+
value: function getClassName() {
56+
var _classNames;
57+
58+
return classNames(this.props.className, "slds-button", (_classNames = {}, _defineProperty(_classNames, "slds-button--neutral", this.props.type !== "icon"), _defineProperty(_classNames, "slds-button--inverse", this.props.variant === "inverse"), _defineProperty(_classNames, "slds-not-selected", !this.state.active), _defineProperty(_classNames, "slds-is-selected", this.state.active), _defineProperty(_classNames, "slds-button--icon-border", this.props.type === "icon"), _classNames));
59+
}
60+
}, {
61+
key: "render",
62+
value: function render() {
63+
if (this.props.type === "follow") {
64+
return _react2["default"].createElement(
65+
"button",
66+
{ className: this.getClassName(), "aria-live": "assertive", onClick: this.handleClick.bind(this) },
67+
_react2["default"].createElement(
68+
"span",
69+
{ className: "slds-text-not-selected" },
70+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "add", size: "small", position: "left", className: "slds-button__icon--stateful" }),
71+
"Follow"
72+
),
73+
_react2["default"].createElement(
74+
"span",
75+
{ className: "slds-text-selected" },
76+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "check", size: "small", position: "left", className: "slds-button__icon--stateful" }),
77+
"Following"
78+
),
79+
_react2["default"].createElement(
80+
"span",
81+
{ className: "slds-text-selected-focus" },
82+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "close", size: "small", position: "left", className: "slds-button__icon--stateful" }),
83+
"Unfollow"
84+
)
85+
);
86+
} else if (this.props.type === "join") {
87+
return _react2["default"].createElement(
88+
"button",
89+
{ className: this.getClassName(), "aria-live": "assertive", onClick: this.handleClick.bind(this) },
90+
_react2["default"].createElement(
91+
"span",
92+
{ className: "slds-text-not-selected" },
93+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "add", size: "small", position: "left", className: "slds-button__icon--stateful" }),
94+
"Join"
95+
),
96+
_react2["default"].createElement(
97+
"span",
98+
{ className: "slds-text-selected" },
99+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "check", size: "small", position: "left", className: "slds-button__icon--stateful" }),
100+
"Member"
101+
),
102+
_react2["default"].createElement(
103+
"span",
104+
{ className: "slds-text-selected-focus" },
105+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "close", size: "small", position: "left", className: "slds-button__icon--stateful" }),
106+
"Leave"
107+
)
108+
);
109+
} else if (this.props.type === "icon") {
110+
return _react2["default"].createElement(
111+
"button",
112+
{ className: this.getClassName(), onClick: this.handleClick.bind(this) },
113+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: this.props.iconName, size: this.props.iconSize, assistiveText: this.props.assistiveText, className: "slds-button__icon--stateful" })
114+
);
115+
} else {
116+
return _react2["default"].createElement(
117+
"div",
118+
{ className: "" },
119+
"SLDS Stateful Button needs proper type prop: follow, join, or icon."
120+
);
121+
}
122+
}
123+
}]);
124+
125+
return SLDSButtonStateful;
126+
})(_react2["default"].Component);
127+
128+
SLDSButtonStateful.displayName = displayName;
129+
SLDSButtonStateful.propTypes = propTypes;
130+
SLDSButtonStateful.defaultProps = defaultProps;
131+
132+
module.exports = SLDSButtonStateful;

0 commit comments

Comments
 (0)