Skip to content

Commit e18fff5

Browse files
futuremintfuturemint
authored
Merge pull request salesforce#1426 from DanFerro/slider-value-fix
Make Slider a controlled component
2 parents c0c49f5 + 42fb6d5 commit e18fff5

File tree

5 files changed

+28
-34
lines changed

5 files changed

+28
-34
lines changed

‎components/slider/__examples__/base.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const DemoSlider = createReactClass({
77

88
getInitialState () {
99
return {
10-
value: this.props.defaultValue,
10+
value: this.props.value,
1111
};
1212
},
1313

@@ -37,7 +37,7 @@ const Example = createReactClass({
3737
<h1 className="slds-text-title_caps slds-p-vertical--medium">
3838
1. Base Input with label
3939
</h1>
40-
<DemoSlider id="base-id" label="My Label" />
40+
<DemoSlider id="base-id" label="My Label" value={0} />
4141
</li>
4242
<li className="slds-p-bottom--large">
4343
<h1 className="slds-text-title_caps slds-p-vertical--medium">
@@ -46,6 +46,7 @@ const Example = createReactClass({
4646
<DemoSlider
4747
id="assistiveText-id"
4848
assistiveText={{ label: 'My Label' }}
49+
value={0}
4950
/>
5051
</li>
5152
<li className="slds-p-bottom--large">
@@ -57,7 +58,7 @@ const Example = createReactClass({
5758
label="My Label"
5859
min={0}
5960
max={400}
60-
defaultValue={200}
61+
value={200}
6162
/>
6263
</li>
6364
<li className="slds-p-bottom--large">
@@ -70,7 +71,7 @@ const Example = createReactClass({
7071
min={0}
7172
max={400}
7273
step={100}
73-
defaultValue={200}
74+
value={200}
7475
/>
7576
</li>
7677
</ol>

‎components/slider/__tests__/__snapshots__/slider.snapshot-test.jsx.snap

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,14 @@ exports[`Base label, no label, min/max, min/max/step DOM Snapshot 1`] = `
4343
>
4444
<input
4545
className="slds-slider__range"
46-
defaultValue={0}
4746
id="base-id"
4847
max={100}
4948
min={0}
5049
onChange={[Function]}
5150
onInput={[Function]}
5251
step={1}
5352
type="range"
53+
value={0}
5454
/>
5555
<span
5656
aria-hidden="true"
@@ -102,14 +102,14 @@ exports[`Base label, no label, min/max, min/max/step DOM Snapshot 1`] = `
102102
>
103103
<input
104104
className="slds-slider__range"
105-
defaultValue={0}
106105
id="assistiveText-id"
107106
max={100}
108107
min={0}
109108
onChange={[Function]}
110109
onInput={[Function]}
111110
step={1}
112111
type="range"
112+
value={0}
113113
/>
114114
<span
115115
aria-hidden="true"
@@ -161,14 +161,14 @@ exports[`Base label, no label, min/max, min/max/step DOM Snapshot 1`] = `
161161
>
162162
<input
163163
className="slds-slider__range"
164-
defaultValue={200}
165164
id="min-max-id"
166165
max={400}
167166
min={0}
168167
onChange={[Function]}
169168
onInput={[Function]}
170169
step={1}
171170
type="range"
171+
value={200}
172172
/>
173173
<span
174174
aria-hidden="true"
@@ -220,14 +220,14 @@ exports[`Base label, no label, min/max, min/max/step DOM Snapshot 1`] = `
220220
>
221221
<input
222222
className="slds-slider__range"
223-
defaultValue={200}
224223
id="min-max-step-id"
225224
max={400}
226225
min={0}
227226
onChange={[Function]}
228227
onInput={[Function]}
229228
step={100}
230229
type="range"
230+
value={200}
231231
/>
232232
<span
233233
aria-hidden="true"
@@ -315,7 +315,6 @@ exports[`Disabled DOM Snapshot 1`] = `
315315
>
316316
<input
317317
className="slds-slider__range"
318-
defaultValue={0}
319318
disabled={true}
320319
id="disabled-id"
321320
max={100}
@@ -339,7 +338,7 @@ exports[`Disabled DOM Snapshot 1`] = `
339338
exports[`Disabled HTML Snapshot 1`] = `
340339
"<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label\\" for=\\"disabled-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
341340
<div class=\\"slds-form-element__control\\">
342-
<div class=\\"slds-slider\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"disabled-id\\" class=\\"slds-slider__range\\" disabled=\\"\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
341+
<div class=\\"slds-slider\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"disabled-id\\" class=\\"slds-slider__range\\" disabled=\\"\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
343342
</div>
344343
</div>"
345344
`;
@@ -378,7 +377,6 @@ exports[`Error DOM Snapshot 1`] = `
378377
<input
379378
aria-describedby="error message"
380379
className="slds-slider__range"
381-
defaultValue={0}
382380
id="error-id"
383381
max={100}
384382
min={0}
@@ -407,7 +405,7 @@ exports[`Error DOM Snapshot 1`] = `
407405
exports[`Error HTML Snapshot 1`] = `
408406
"<div class=\\"slds-form-element slds-has-error\\"><label class=\\"slds-form-element__label\\" for=\\"error-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
409407
<div class=\\"slds-form-element__control\\">
410-
<div class=\\"slds-slider\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"error-id\\" class=\\"slds-slider__range\\" aria-describedby=\\"error message\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
408+
<div class=\\"slds-slider\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"error-id\\" class=\\"slds-slider__range\\" aria-describedby=\\"error message\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
411409
<div id=\\"error message\\" class=\\"slds-form-element__help\\">There is a problem with this field</div>
412410
</div>
413411
</div>"
@@ -452,7 +450,6 @@ exports[`Sizes DOM Snapshot 1`] = `
452450
>
453451
<input
454452
className="slds-slider__range"
455-
defaultValue={0}
456453
id="x-small-id"
457454
max={100}
458455
min={0}
@@ -506,7 +503,6 @@ exports[`Sizes DOM Snapshot 1`] = `
506503
>
507504
<input
508505
className="slds-slider__range"
509-
defaultValue={0}
510506
id="small-id"
511507
max={100}
512508
min={0}
@@ -560,7 +556,6 @@ exports[`Sizes DOM Snapshot 1`] = `
560556
>
561557
<input
562558
className="slds-slider__range"
563-
defaultValue={0}
564559
id="medium-id"
565560
max={100}
566561
min={0}
@@ -614,7 +609,6 @@ exports[`Sizes DOM Snapshot 1`] = `
614609
>
615610
<input
616611
className="slds-slider__range"
617-
defaultValue={0}
618612
id="large-id"
619613
max={100}
620614
min={0}
@@ -641,28 +635,28 @@ exports[`Sizes HTML Snapshot 1`] = `
641635
<div class=\\"slds-col--padded\\">
642636
<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label\\" for=\\"x-small-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
643637
<div class=\\"slds-form-element__control\\">
644-
<div class=\\"slds-slider slds-size_x-small\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"x-small-id\\" class=\\"slds-slider__range\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
638+
<div class=\\"slds-slider slds-size_x-small\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"x-small-id\\" class=\\"slds-slider__range\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
645639
</div>
646640
</div>
647641
</div>
648642
<div class=\\"slds-col--padded\\">
649643
<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label\\" for=\\"small-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
650644
<div class=\\"slds-form-element__control\\">
651-
<div class=\\"slds-slider slds-size_small\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"small-id\\" class=\\"slds-slider__range\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
645+
<div class=\\"slds-slider slds-size_small\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"small-id\\" class=\\"slds-slider__range\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
652646
</div>
653647
</div>
654648
</div>
655649
<div class=\\"slds-col--padded\\">
656650
<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label\\" for=\\"medium-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
657651
<div class=\\"slds-form-element__control\\">
658-
<div class=\\"slds-slider slds-size_medium\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"medium-id\\" class=\\"slds-slider__range\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
652+
<div class=\\"slds-slider slds-size_medium\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"medium-id\\" class=\\"slds-slider__range\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
659653
</div>
660654
</div>
661655
</div>
662656
<div class=\\"slds-col--padded\\">
663657
<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label\\" for=\\"large-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
664658
<div class=\\"slds-form-element__control\\">
665-
<div class=\\"slds-slider slds-size_large\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"large-id\\" class=\\"slds-slider__range\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
659+
<div class=\\"slds-slider slds-size_large\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"large-id\\" class=\\"slds-slider__range\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
666660
</div>
667661
</div>
668662
</div>
@@ -702,7 +696,6 @@ exports[`Vertical DOM Snapshot 1`] = `
702696
>
703697
<input
704698
className="slds-slider__range"
705-
defaultValue={0}
706699
id="vertical-id"
707700
max={100}
708701
min={0}
@@ -725,7 +718,7 @@ exports[`Vertical DOM Snapshot 1`] = `
725718
exports[`Vertical HTML Snapshot 1`] = `
726719
"<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label\\" for=\\"vertical-id\\"><span class=\\"slds-slider-label\\"><span class=\\"slds-slider-label__label\\">Slider Label</span><span class=\\"slds-slider-label__range\\">0 - 100</span></span></label>
727720
<div class=\\"slds-form-element__control\\">
728-
<div class=\\"slds-slider slds-slider_vertical\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"vertical-id\\" class=\\"slds-slider__range\\" value=\\"0\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
721+
<div class=\\"slds-slider slds-slider_vertical\\"><input type=\\"range\\" step=\\"1\\" min=\\"0\\" max=\\"100\\" id=\\"vertical-id\\" class=\\"slds-slider__range\\" /><span class=\\"slds-slider__value\\" aria-hidden=\\"true\\">0</span></div>
729722
</div>
730723
</div>"
731724
`;

‎components/slider/__tests__/slider.browser-test.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ describe('SLDSSlider', () => {
132132
component = getSlider({
133133
label: 'Slider Label',
134134
id: 'custom-id',
135-
defaultValue: 200,
135+
value: 200,
136136
min: 0,
137137
max: 400,
138138
step: 100,
@@ -192,30 +192,30 @@ describe('SLDSSlider', () => {
192192
it('onChange trigged callback', function (done) {
193193
wrapper = mount(
194194
<Slider
195-
defaultValue={200}
195+
value={200}
196196
min={0}
197197
max={400}
198198
step={100}
199199
onChange={(e, { value }) => {
200-
expect(value).to.equal('300');
200+
expect(value).to.equal(300);
201201
done();
202202
}}
203203
/>,
204204
{ attachTo: mountNode }
205205
);
206206
const trigger = wrapper.find('input');
207-
trigger.simulate('change', { target: { value: '300' } });
207+
trigger.simulate('change', { target: { value: 300 } });
208208
});
209209

210210
it('onInput trigged callback', function (done) {
211211
wrapper = mount(
212212
<Slider
213-
defaultValue={200}
213+
value={200}
214214
min={0}
215215
max={400}
216216
step={100}
217217
onInput={(e, { value }) => {
218-
expect(value).to.equal('300');
218+
expect(value).to.equal(300);
219219
done();
220220
}}
221221
/>,

‎components/slider/index.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const propTypes = {
9696
*/
9797
step: PropTypes.number,
9898
/**
99-
* The Slider is a controlled component, and will always display this value.
99+
* The Slider should be a controlled component, and will always display this value. This should always be used if you are using a Flux/Redux framework.
100100
*/
101101
value: PropTypes.number,
102102
/**
@@ -106,7 +106,6 @@ const propTypes = {
106106
};
107107

108108
const defaultProps = {
109-
defaultValue: 0,
110109
min: 0,
111110
max: 100,
112111
step: 1,
@@ -140,13 +139,13 @@ class Slider extends React.Component {
140139

141140
handleChange = (event) => {
142141
if (isFunction(this.props.onChange)) {
143-
this.props.onChange(event, { value: event.target.value });
142+
this.props.onChange(event, { value: Number(event.target.value) });
144143
}
145144
};
146145

147146
handleInput = (event) => {
148147
if (isFunction(this.props.onInput)) {
149-
this.props.onInput(event, { value: event.target.value });
148+
this.props.onInput(event, { value: Number(event.target.value) });
150149
}
151150
};
152151

@@ -201,12 +200,13 @@ class Slider extends React.Component {
201200
max={this.props.max}
202201
step={this.props.step}
203202
aria-describedby={this.getErrorId()}
203+
value={this.props.value}
204204
disabled={this.props.disabled}
205205
onChange={this.handleChange}
206206
onInput={this.handleInput}
207207
/>
208208
<span className="slds-slider__value" aria-hidden="true">
209-
{this.props.value || this.props.defaultValue}
209+
{this.props.value || this.props.defaultValue || '0'}
210210
</span>
211211
</div>
212212
{this.props.errorText ? (

‎components/utilities/dialog/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,7 @@ const Dialog = createReactClass({
400400
}
401401

402402
if (this.props.style) {
403-
style = Object.assign(style, this.props.style);
403+
style = { ...style, ...this.props.style };
404404
}
405405

406406
const contents = (

0 commit comments

Comments
 (0)