Skip to content

Commit d8c62fc

Browse files
donniebergdonnieberg
committed
Merge pull request #14 from salesforce-ux/button
Create SLDSButton test file and remove aria-live on button component
2 parents ce99a86 + 378626f commit d8c62fc

File tree

9 files changed

+589
-200
lines changed

9 files changed

+589
-200
lines changed

‎components/SLDSButton/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@ class Button extends React.Component {
7979
return (
8080
<button className={this.getClassName()} {...props} onClick={click}>
8181

82-
<span aria-live="assertive">{this.props.iconPosition === 'right' ? this.props.label : null}</span>
82+
<span>{this.props.iconPosition === 'right' ? this.props.label : null}</span>
8383

8484
{this.renderIcon()}
8585

86-
<span aria-live="assertive">{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}</span>
86+
<span>{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}</span>
8787

8888
</button>
8989
);

‎demo/pages/HomePage/ButtonSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ module.exports = React.createClass( {
4747
</PrismCode>
4848
<div className='slds-p-vertical--large'>
4949
<SLDSButton
50-
label='Test Button'
50+
label='Test'
5151
variant='neutral'
5252
iconName='download'
5353
iconSize='small'

‎lib/SLDSButton/index.js

Lines changed: 71 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ var _utilsCreateChainedFunction = require('../utils/create-chained-function');
3333

3434
var _utilsCreateChainedFunction2 = _interopRequireDefault(_utilsCreateChainedFunction);
3535

36+
var _SLDSIconsJs = require('../SLDSIcons.js');
37+
3638
var _lodash = require('lodash');
3739

3840
var classNames = require('classnames');
@@ -44,10 +46,22 @@ var Button = (function (_React$Component) {
4446
_classCallCheck(this, Button);
4547

4648
_get(Object.getPrototypeOf(Button.prototype), 'constructor', this).call(this, props);
47-
this.state = {};
49+
this.state = { active: false };
4850
}
4951

5052
_createClass(Button, [{
53+
key: 'componentWillMount',
54+
value: function componentWillMount() {
55+
/*===============================
56+
TODO: refactor so that React doesn't throw warnings in console
57+
for (var key in this.props) {
58+
if(this.props.hasOwnProperty(key) && typeof(this.props[key]) === 'string' && key !== 'label'){
59+
this.props[key] = this.props[key].toLowerCase();
60+
}
61+
}
62+
===============================*/
63+
}
64+
}, {
5165
key: 'onClick',
5266
value: function onClick(e) {
5367
this.setState({ active: !this.state.active });
@@ -57,22 +71,72 @@ var Button = (function (_React$Component) {
5771
value: function getClassName() {
5872
var _classNames;
5973

60-
return classNames(this.props.className, 'slds-button', (_classNames = {}, _defineProperty(_classNames, 'slds-button--' + this.props.flavor, this.props.flavor), _defineProperty(_classNames, 'slds-is-selected', this.state.active), _classNames));
74+
var isStateful = this.props.stateful && this.state.active ? true : false;
75+
return classNames(this.props.className, 'slds-button', (_classNames = {}, _defineProperty(_classNames, 'slds-button--' + this.props.variant, this.props.variant), _defineProperty(_classNames, 'slds-is-selected', isStateful), _classNames));
76+
}
77+
}, {
78+
key: 'renderIcon',
79+
value: function renderIcon() {
80+
if (this.props.iconName) {
81+
return _react2['default'].createElement(_SLDSIconsJs.ButtonIcon, {
82+
name: this.props.iconName,
83+
size: this.props.iconSize,
84+
position: this.props.iconPosition || 'left' });
85+
}
6186
}
6287
}, {
6388
key: 'render',
6489
value: function render() {
6590
var props = (0, _lodash.omit)('className', this.props);
6691
var click = (0, _utilsCreateChainedFunction2['default'])(this.props.onClick, this.onClick.bind(this));
67-
return _react2['default'].createElement(
68-
'button',
69-
_extends({ className: this.getClassName() }, props, { onClick: click }),
70-
this.props.children
71-
);
92+
93+
//If the button is only an icon render this:
94+
if (this.props.variant === 'icon') {
95+
return _react2['default'].createElement(
96+
'button',
97+
_extends({ className: this.getClassName() }, props, { onClick: click }),
98+
_react2['default'].createElement(_SLDSIconsJs.Icon, {
99+
name: this.props.iconName,
100+
category: 'utility',
101+
size: this.props.iconSize,
102+
className: 'slds-icon' }),
103+
_react2['default'].createElement(
104+
'span',
105+
{ className: 'slds-assistive-text' },
106+
this.props.label
107+
)
108+
);
109+
}
110+
//Else we assume the button has a visible label (with or without an icon):
111+
else {
112+
return _react2['default'].createElement(
113+
'button',
114+
_extends({ className: this.getClassName() }, props, { onClick: click }),
115+
_react2['default'].createElement(
116+
'span',
117+
{ 'aria-live': 'assertive' },
118+
this.props.iconPosition === 'right' ? this.props.label : null
119+
),
120+
this.renderIcon(),
121+
_react2['default'].createElement(
122+
'span',
123+
{ 'aria-live': 'assertive' },
124+
this.props.iconPosition === 'left' || !this.props.iconPosition ? this.props.label : null
125+
)
126+
);
127+
}
72128
}
73129
}]);
74130

75131
return Button;
76132
})(_react2['default'].Component);
77133

134+
Button.propTypes = {
135+
label: _react2['default'].PropTypes.string.isRequired,
136+
variant: _react2['default'].PropTypes.oneOf(['base', 'neutral', 'brand', 'icon']),
137+
iconName: _react2['default'].PropTypes.string,
138+
iconSize: _react2['default'].PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
139+
iconPosition: _react2['default'].PropTypes.oneOf(['left', 'right'])
140+
};
141+
78142
module.exports = Button;

‎lib/SLDSIcons.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ var ButtonIcon = _react2['default'].createClass({
2828
getDefaultProps: function getDefaultProps() {
2929

3030
return {
31-
category: 'utility'
32-
};
31+
category: 'utility' };
3332
},
3433

34+
// Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
3535
render: function render() {
3636

3737
var useTag = '<use xlink:href="' + _SLDSSettings2['default'].getAssetsPath() + '/icons/' + this.props.category + '-sprite/svg/symbols.svg#' + this.props.name + '" />';

‎lib/SLDSLookup/Menu/Item/index.js

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
5+
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.
6+
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.
7+
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.
8+
*/
9+
10+
'use strict';
11+
12+
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; }; })();
13+
14+
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); } } };
15+
16+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
17+
18+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
19+
20+
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; }
21+
22+
var _react = require('react');
23+
24+
var _react2 = _interopRequireDefault(_react);
25+
26+
var _SLDSIcons = require("../../../SLDSIcons");
27+
28+
var _utils = require('../../../utils');
29+
30+
var Item = (function (_React$Component) {
31+
_inherits(Item, _React$Component);
32+
33+
function Item(props) {
34+
_classCallCheck(this, Item);
35+
36+
_get(Object.getPrototypeOf(Item.prototype), 'constructor', this).call(this, props);
37+
}
38+
39+
_createClass(Item, [{
40+
key: 'componentWillReceiveProps',
41+
value: function componentWillReceiveProps(nextProps) {
42+
if (nextProps.isActive !== this.props.isActive && nextProps.isActive === true) {
43+
this.scrollFocus();
44+
this.props.setFocus(this.props.id);
45+
}
46+
}
47+
}, {
48+
key: 'boldSearchText',
49+
value: function boldSearchText(children) {
50+
var term = this.props.searchTerm;
51+
if (!children || !term) return children;
52+
var regex = new RegExp('(' + term + ')', 'gi');
53+
return _react2['default'].Children.map(children, function (c) {
54+
return typeof c === 'string' ? _react2['default'].createElement('span', { dangerouslySetInnerHTML: { __html: c.replace(regex, '<mark>$1</mark>') } }) : c;
55+
});
56+
}
57+
}, {
58+
key: 'handleClick',
59+
value: function handleClick(e) {
60+
e.preventDefault();
61+
if (e.nativeEvent) {
62+
e.nativeEvent.preventDefault();
63+
e.nativeEvent.stopImmediatePropagation();
64+
}
65+
return this.props.onSelect(this.props.id);
66+
}
67+
}, {
68+
key: 'scrollFocus',
69+
value: function scrollFocus() {
70+
var height = _react2['default'].findDOMNode(this).offsetHeight;
71+
if (height && this.props.handleItemFocus) {
72+
this.props.handleItemFocus(this.props.index, height);
73+
}
74+
}
75+
}, {
76+
key: 'render',
77+
value: function render() {
78+
var className = 'slds-lookup__item';
79+
var id = this.props.id;
80+
if (this.props.isActive) className += ' slds-theme--shade';
81+
82+
return(
83+
//IMPORTANT: anchor id is used to set lookup's input's aria-activedescendant
84+
_react2['default'].createElement(
85+
'li',
86+
{
87+
className: className,
88+
role: 'presentaion' },
89+
_react2['default'].createElement(
90+
'a',
91+
{
92+
href: this.props.href,
93+
id: id,
94+
tabIndex: '-1',
95+
'aria-disabled': this.props.disabled,
96+
role: 'option',
97+
onClick: this.handleClick.bind(this),
98+
onMouseDown: this.handleClick.bind(this) },
99+
_react2['default'].createElement(_SLDSIcons.Icon, { name: 'account' }),
100+
this.boldSearchText(this.props.children.label)
101+
)
102+
)
103+
);
104+
}
105+
}]);
106+
107+
return Item;
108+
})(_react2['default'].Component);
109+
110+
Item.propTypes = {
111+
id: _react2['default'].PropTypes.string,
112+
setFocus: _react2['default'].PropTypes.func,
113+
scrollFocus: _react2['default'].PropTypes.func,
114+
isActive: _react2['default'].PropTypes.bool,
115+
onSelect: _react2['default'].PropTypes.func,
116+
searchTerm: _react2['default'].PropTypes.string
117+
};
118+
119+
Item.defaultProps = {};
120+
121+
module.exports = Item;

‎lib/SLDSLookup/Menu/index.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
5+
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.
6+
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.
7+
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.
8+
*/
9+
10+
'use strict';
11+
12+
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; }; })();
13+
14+
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); } } };
15+
16+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
17+
18+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
19+
20+
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; }
21+
22+
var _react = require('react');
23+
24+
var _react2 = _interopRequireDefault(_react);
25+
26+
var _SLDSIcons = require("../../SLDSIcons");
27+
28+
var _utils = require('../../utils');
29+
30+
var _Item = require('./Item');
31+
32+
var _Item2 = _interopRequireDefault(_Item);
33+
34+
var Menu = (function (_React$Component) {
35+
_inherits(Menu, _React$Component);
36+
37+
function Menu(props) {
38+
_classCallCheck(this, Menu);
39+
40+
_get(Object.getPrototypeOf(Menu.prototype), 'constructor', this).call(this, props);
41+
this.state = {};
42+
}
43+
44+
_createClass(Menu, [{
45+
key: 'componentDidUpdate',
46+
value: function componentDidUpdate() {
47+
var list = _react2['default'].findDOMNode(this.refs.list).children.length;
48+
this.props.getListLength(list);
49+
}
50+
}, {
51+
key: 'filter',
52+
value: function filter(item) {
53+
return this.props.filterWith(this.props.searchTerm, item);
54+
}
55+
}, {
56+
key: 'handleItemFocus',
57+
value: function handleItemFocus(itemIndex, itemHeight) {
58+
if (this.refs.list) {
59+
_react2['default'].findDOMNode(this.refs.list).scrollTop = itemIndex * itemHeight;
60+
}
61+
}
62+
}, {
63+
key: 'renderItems',
64+
value: function renderItems() {
65+
var _this = this;
66+
67+
return this.props.items.filter(this.filter, this).map(function (c, i) {
68+
//isActive means it is aria-activedescendant
69+
var isActive = _this.props.focusIndex === i ? true : false;
70+
return _react2['default'].createElement(
71+
_Item2['default'],
72+
{
73+
key: c.id,
74+
id: c.id,
75+
index: i,
76+
setFocus: _this.props.setFocus,
77+
isActive: isActive,
78+
handleItemFocus: _this.handleItemFocus.bind(_this),
79+
onSelect: _this.props.onSelect,
80+
searchTerm: _this.props.searchTerm },
81+
c
82+
);
83+
});
84+
}
85+
}, {
86+
key: 'render',
87+
value: function render() {
88+
return _react2['default'].createElement(
89+
'div',
90+
{
91+
className: 'ignore-react-onclickoutside slds-lookup__menu',
92+
role: 'listbox',
93+
ref: 'scroll' },
94+
_react2['default'].createElement(
95+
'ul',
96+
{ className: 'slds-lookup__list',
97+
role: 'presentation',
98+
ref: 'list' },
99+
this.renderItems()
100+
)
101+
);
102+
}
103+
}]);
104+
105+
return Menu;
106+
})(_react2['default'].Component);
107+
108+
Menu.propTypes = {
109+
searchTerm: _react2['default'].PropTypes.string,
110+
filterWith: _react2['default'].PropTypes.func,
111+
onSelect: _react2['default'].PropTypes.func,
112+
label: _react2['default'].PropTypes.string,
113+
items: _react2['default'].PropTypes.array,
114+
setFocus: _react2['default'].PropTypes.func,
115+
getListLength: _react2['default'].PropTypes.func,
116+
listLength: _react2['default'].PropTypes.number,
117+
focusIndex: _react2['default'].PropTypes.number
118+
};
119+
120+
Menu.defaultProps = {};
121+
122+
module.exports = Menu;

0 commit comments

Comments
 (0)