Skip to content

Commit 29c85fb

Browse files
donniebergdonnieberg
committed
Update markup to 0.11.0 SLDS picklist and update icon
1 parent 8cbfe23 commit 29c85fb

File tree

7 files changed

+49
-46
lines changed

7 files changed

+49
-46
lines changed

‎components/SLDSIcons.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export const Icon = React.createClass({
7272
const name = this.props.name?this.props.name.replace(/_/g,'-'):'';
7373
const iconClassName = 'slds-icon-' + this.props.category + '-' + (this.props.theme || name);
7474
const styles = this.props.category === 'action'?{padding:'.5rem'}:null;
75+
let label = null;
7576

7677
let className = 'slds-icon';
7778
if (this.props.stateful) {
@@ -86,8 +87,16 @@ export const Icon = React.createClass({
8687
if (this.props.position) {
8788
className += ' slds-icon--' + this.props.position;
8889
}
90+
if (this.props.assistiveText) {
91+
label = <span className="slds-assistive-text">{this.props.assistiveText}</span>;
92+
}
8993
className = className + ' ' + iconClassName;
90-
return <span className={'slds-icon__container '} style={styles}><SLDSUtilityIcon name={this.props.name} category={this.props.category} aria-hidden='true' className={className} style={this.props.style} /></span>;
94+
return (
95+
<span style={styles}>
96+
{label}
97+
<SLDSUtilityIcon name={this.props.name} category={this.props.category} aria-hidden='true' className={className} style={this.props.style} />
98+
</span>
99+
);
91100
}
92101

93102
});

‎components/SLDSPicklistBase/index.jsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ module.exports = React.createClass( {
184184
return (
185185
!this.props.disabled && this.state.isOpen?
186186
<div
187-
className="slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu"
187+
className="slds-dropdown slds-dropdown--left slds-dropdown--menu"
188188
style={{maxHeight:'20em'}}>
189189
{this.getPopoverContent()}
190190
</div>:null
@@ -216,33 +216,6 @@ module.exports = React.createClass( {
216216
});
217217
},
218218

219-
render() {
220-
return (
221-
<div className={"slds-form-element slds-theme--"+this.props.theme}>
222-
<div className={"slds-picklist slds-theme--"+this.props.theme}>
223-
<button
224-
id={this.state.triggerId}
225-
ref="triggerbutton"
226-
className={'slds-button slds-button--neutral slds-picklist__label '+this.props.className }
227-
aria-haspopup="true"
228-
onBlur={this.handleBlur}
229-
onFocus={this.handleFocus}
230-
onClick={this.handleClick}
231-
onMouseDown={this.handleMouseDown}
232-
tabIndex={this.state.isOpen?-1:0}
233-
onKeyDown={this.handleKeyDown} >
234-
<span className="slds-truncate">{this.getPlaceholder()}</span>
235-
<Icon name="down" category="utility" />
236-
</button>
237-
238-
{this.props.modal?this.getModalPopover():this.getSimplePopover()}
239-
240-
</div>
241-
242-
</div>
243-
);
244-
},
245-
246219
componentDidUpdate( prevProps, prevState) {
247220

248221
if(this.state.lastBlurredTimeStamp !== prevState.lastBlurredTimeStamp){
@@ -274,7 +247,33 @@ module.exports = React.createClass( {
274247

275248
},
276249

250+
render() {
251+
return (
252+
<div className="slds-picklist" aria-expanded={this.state.isOpen}>
253+
<button
254+
id={this.state.triggerId}
255+
ref="triggerbutton"
256+
className="slds-button slds-button--neutral slds-picklist__label"
257+
aria-haspopup="true"
258+
onBlur={this.handleBlur}
259+
onFocus={this.handleFocus}
260+
onClick={this.handleClick}
261+
onMouseDown={this.handleMouseDown}
262+
tabIndex={this.state.isOpen?-1:0}
263+
onKeyDown={this.handleKeyDown}>
264+
<span className="slds-truncate">{this.getPlaceholder()}</span>
265+
<Icon name="down" category="utility" />
266+
</button>
267+
268+
{this.props.modal?this.getModalPopover():this.getSimplePopover()}
269+
270+
</div>
271+
);
272+
},
273+
274+
277275
});
278276

279277
module.exports.ListItem = ListItem;
280278
module.exports.ListItemLabel = ListItemLabel;
279+

‎components/SLDSPicklistBase/list-item.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = React.createClass({
2828
inverted: false,
2929
isSelected: false,
3030
isHighlighted: false,
31-
labelRenderer: ListItemLabelRenderer,
31+
labelRenderer: ListItemLabelRenderer,
3232
data: {},
3333

3434
onSelect (index) {
@@ -93,7 +93,7 @@ module.exports = React.createClass({
9393
this.props.onMoveFocus(-1);
9494
}
9595
}
96-
else if(event.keyCode === KEYS.ENTER ||
96+
else if(event.keyCode === KEYS.ENTER ||
9797
event.keyCode === KEYS.SPACE ){
9898
EventUtil.trapEvent(event);
9999
if(this.props.onSelect){
@@ -133,7 +133,7 @@ module.exports = React.createClass({
133133

134134
getLabel () {
135135
const LabelComp = this.props.labelRenderer;
136-
return <LabelComp
136+
return <LabelComp
137137
index={this.props.index}
138138
label={this.props.label}
139139
value={this.props.value}
@@ -146,14 +146,14 @@ module.exports = React.createClass({
146146

147147
render () {
148148
return (
149-
<li
150-
className={"slds-dropdown__item slds-has-icon slds-has-icon--left slds-theme--"+this.props.theme}
149+
<li
150+
className="slds-dropdown__item slds-has-icon slds-has-icon--left"
151151
onMouseDown={this.handleMouseDown}
152152
tabIndex={-1}>
153153
<a id={'menu-0-'+this.props.index}
154154
href=''
155155
ref='link'
156-
className='slds-truncate'
156+
className='slds-truncate'
157157
onClick={this.handleClick}
158158
onMouseDown={this.handleMouseDown}
159159
onKeyDown={this.handleKeyDown}

‎components/SLDSPicklistBase/list.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ module.exports = React.createClass({
164164
>
165165
<ul
166166
ref="scroll"
167-
className={"slds-dropdown__list slds-theme--"+this.props.theme}
167+
className="slds-dropdown__list"
168168
role="menu"
169169
aria-labelledby={this.props.triggerId}>
170170
{ this.getItems() }

demo/assets/styles/animations.css renamed to demo/assets/styles/custom.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
.demo-only .slds-notify-container { position: static; }
2+
13
.slds .slds-theme--alert-texture-animated {
24
background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.035) 50%, rgba(0, 0, 0, 0.035) 75%, transparent 75%, transparent);
35
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.035) 50%, rgba(0, 0, 0, 0.035) 75%, transparent 75%, transparent);

‎demo/pages/HomePage/IconSection.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
<div className='slds-input-has-icon slds-input-has-icon--left'>
50-
<Icon name='open_folder' category='utility' className='slds-input__icon slds-icon-text-default'/>
50+
<Icon name='open_folder' category='utility' assistiveText='Files' className='slds-input__icon slds-icon-text-default'/>
5151
</div>
5252
</div>
5353
</div>

‎index.html‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
34
<title>SLDS React</title>
45
<meta charset="utf-8">
5-
66
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
7-
87
<meta content="width=device-width, initial-scale=1" name="viewport" />
9-
108
<link rel="stylesheet" type="text/css" href="demo/static/bundle.css">
11-
129
<link rel="stylesheet" type="text/css" href="demo/assets/styles/salesforce-lightning-design-system-scoped.css">
13-
<link rel="stylesheet" type="text/css" href="demo/assets/styles/animations.css">
14-
10+
<link rel="stylesheet" type="text/css" href="demo/assets/styles/custom.css">
1511
</head>
16-
17-
18-
1912
<body class='slds'>
2013
<div id='root'>
2114
</div>

0 commit comments

Comments
 (0)