Skip to content

Commit 8a39697

Browse files
aramos-adobearamos-adobe
authored
feat(slider): S2 migration, new precision variant, embedded textfield (#3945)
S2 slider migration changes: - New default and precision handles - Track fill for ramp, offset, range and default filled have emphasized states - More expansive grid for visual testing - Embedded textfield component for editable variant - Adjustable track heights ie. thin vs thick - Updated offset variant (ie. the track starts at the center)
1 parent 48cd9ae commit 8a39697

File tree

8 files changed

+1075
-318
lines changed

8 files changed

+1075
-318
lines changed

‎.changeset/shy-actors-behave.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
@spectrum-css/slider: major
3+
---
4+
5+
### S2 Slider Migration
6+
7+
#### New features
8+
9+
- Emphasized track fill color
10+
- Precision control handle
11+
- Large and thin track heights
12+
- Embedded editable text field component
13+
14+
#### Visual changes
15+
16+
- No longer a gap between slider handle and the track
17+
- Updated dimensions of slider handles for each size variant
18+
- Updated WHCM for all variants
19+
20+
21+
#### New tokens
22+
23+
`--spectrum-slider-control-to-field-label-editable-extra-large`
24+
`--spectrum-slider-control-to-field-label-editable-large`
25+
`--spectrum-slider-control-to-field-label-editable-medium`
26+
`--spectrum-slider-control-to-field-label-editable-small`
27+
`--spectrum-slider-control-to-side-field-label-extra-large`
28+
`--spectrum-slider-control-to-side-field-label-large`
29+
`--spectrum-slider-control-to-side-field-label-medium`
30+
`--spectrum-slider-control-to-side-field-label-small`
31+
`--spectrum-slider-control-to-text-field-extra-large`
32+
`--spectrum-slider-control-to-text-field-large`
33+
`--spectrum-slider-control-to-text-field-medium`
34+
`--spectrum-slider-control-to-text-field-small`
35+
`--spectrum-slider-editable-control-to-field-label`
36+
`--spectrum-slider-editable-control-to-text-field`
37+
`--spectrum-slider-editable-field-inline-size-extra-large`
38+
`--spectrum-slider-editable-field-inline-size-large`
39+
`--spectrum-slider-editable-field-inline-size-medium`
40+
`--spectrum-slider-editable-field-inline-size-small`
41+
`--spectrum-slider-emphasized-track-fill-color`
42+
`--spectrum-slider-precision-handle-height`
43+
`--spectrum-slider-precision-handle-height-extra-large`
44+
`--spectrum-slider-precision-handle-height-large`
45+
`--spectrum-slider-precision-handle-height-medium`
46+
`--spectrum-slider-precision-handle-height-small`
47+
`--spectrum-slider-precision-handle-width`
48+
`--spectrum-slider-handle-extra-large`
49+
`--spectrum-slider-handle-large`
50+
`--spectrum-slider-handle-medium`
51+
`--spectrum-slider-handle-small`
52+
53+
#### New mods
54+
55+
`--mod-slider-editable-control-to-text-field`
56+
`--mod-slider-editable-field-inline-size`
57+
`--mod-slider-disabled-border-color`
58+
`--mod-slider-emphasized-tick-mark-color`
59+
`--mod-slider-emphasized-track-fill-color`
60+
`--mod-slider-inline-size`
61+
`--mod-slider-label-font-style`
62+
`--mod-slider-label-font-weight`
63+
`--mod-slider-ramp-track-fill-color`
64+
`--mod-slider-tick-mark-color-filled-track`
65+
`--mod-slider-track-height-medium`
66+
67+
#### Removed mods
68+
69+
`--mod-disabled-border-color`
70+
`--mod-sectrum-slider-ramp-handle-border-color-active`
71+
`--mod-slider-handle-border-width-down`
72+
`--mod-slider-handle-gap`
73+
`--mod-slider-ramp-handle-background-color`
74+
`--mod-slider-tick-handle-background-color`
75+
`--mod-slider-tick-mark-color-disabled`
76+
`--mod-slider-track-handleoffset`
77+
`--mod-slider-track-margin-offset`
78+
`--mod-slider-track-middle-handleoffset`

‎components/slider/dist/metadata.json

Lines changed: 116 additions & 54 deletions
Large diffs are not rendered by default.

‎components/slider/index.css

Lines changed: 216 additions & 130 deletions
Large diffs are not rendered by default.

‎components/slider/stories/slider.stories.js

Lines changed: 122 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Sizes } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3-
import { isDisabled, isFocused, size } from "@spectrum-css/preview/types";
3+
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types";
44
import metadata from "../dist/metadata.json";
55
import packageJson from "../package.json";
6-
import { SliderGroup } from "./slider.test.js";
6+
import { SliderGroup, VariantGroup } from "./slider.test.js";
77
import { Template } from "./template.js";
88

99
/**
@@ -71,8 +71,19 @@ export default {
7171
control: "select",
7272
options: ["ramp", "offset", "filled"],
7373
},
74+
trackHeight: {
75+
name: "Track height",
76+
type: { name: "string" },
77+
table: {
78+
type: { summary: "string" },
79+
category: "Component",
80+
},
81+
control: "select",
82+
options: ["medium", "large"],
83+
if: { arg: "variant", neq: "ramp" },
84+
},
7485
labelPosition: {
75-
name: "Label Position",
86+
name: "Label position",
7687
type: { name: "string" },
7788
table: {
7889
type: { summary: "string" },
@@ -81,8 +92,9 @@ export default {
8192
control: "select",
8293
options: ["top", "side"],
8394
},
84-
fillColor: {
85-
name: "Fill color",
95+
trackColor: {
96+
name: "Track color",
97+
description: "Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code> or <code>transparent</code>. Not available for ramp variant.",
8698
type: { name: "string" },
8799
table: {
88100
type: { summary: "string" },
@@ -112,26 +124,58 @@ export default {
112124
control: "boolean",
113125
if: { arg: "showTicks", truthy: true },
114126
},
127+
isPrecise: {
128+
name: "Precise handle control",
129+
description: "Provides precise control for accurate values.",
130+
type: { name: "boolean" },
131+
table: {
132+
type: { summary: "boolean" },
133+
category: "Component",
134+
},
135+
control: "boolean",
136+
},
137+
isEditable: {
138+
name: "Editable text input",
139+
description: "Enables text input to also control the slider value.",
140+
type: { name: "boolean" },
141+
table: {
142+
type: { summary: "boolean" },
143+
category: "Component",
144+
},
145+
control: "boolean",
146+
},
147+
isEmphasized,
148+
isActive,
149+
isHovered,
115150
isDisabled,
116151
isFocused: {
117152
...isFocused,
118153
if: { arg: "isDisabled", truthy: false },
119154
},
120-
values: { table: { disable: true } },
155+
values: {
156+
table: { disable: true }
157+
},
121158
},
122159
args: {
123160
rootClass: "spectrum-Slider",
161+
isEmphasized: false,
162+
isActive: false,
163+
isHovered: false,
124164
isDisabled: false,
125165
isFocused: false,
126166
showTicks: false,
127167
showTickLabels: false,
128168
labelPosition: "top",
129-
label: "Slider label",
169+
label: "Label",
130170
size: "m",
131-
min: 10,
132-
max: 20,
133-
values: [14],
134-
step: 2,
171+
min: 0,
172+
max: 30,
173+
values: [15],
174+
step: 5,
175+
trackHeight: "medium",
176+
isPrecise: false,
177+
isEditable: false,
178+
variant: "filled",
135179
},
136180
parameters: {
137181
actions: {
@@ -146,22 +190,30 @@ export default {
146190
},
147191
packageJson,
148192
metadata,
193+
status: {
194+
type: "migrated",
195+
},
149196
},
197+
tags: ["migrated"],
150198
};
151199

152200
/**
153201
* Sliders should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.
202+
* The track of the slider can have a fill. By default, the fill originates from the left side of the track when the global direction is LTR and from the right side of the track when the global direction is RTL.
154203
*/
155204
export const Default = SliderGroup.bind({});
156-
Default.args = {};
205+
Default.args = {
206+
variant: "filled",
207+
};
157208

158209
// ********* DOCS ONLY ********* //
159210
/**
160-
* If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).
211+
* If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, "aria-label" or "aria-labelledby").
161212
*/
162213
export const WithoutLabel = Template.bind({});
163214
WithoutLabel.args = {
164215
label: "",
216+
variant: "filled",
165217
};
166218
WithoutLabel.tags = ["!dev"];
167219
WithoutLabel.storyName = "Without label";
@@ -171,6 +223,18 @@ WithoutLabel.parameters = {
171223
},
172224
};
173225

226+
export const Editable = Template.bind({});
227+
Editable.args = {
228+
...Default.args,
229+
isEditable: true,
230+
};
231+
Editable.tags = ["!dev"];
232+
Editable.parameters = {
233+
chromatic: {
234+
disableSnapshot: true,
235+
},
236+
};
237+
174238
export const Sizing = (args, context) => Sizes({
175239
Template,
176240
withBorder: false,
@@ -186,31 +250,28 @@ Sizing.parameters = {
186250
};
187251

188252
/**
189-
* The track of the slider can have a fill. By default, the fill originates from the left side of the track.
253+
* If the value represents an offset, the fill start or end can be set to represent the point of origin. This allows the slider fill to extend from the origin toward the handle, in either direction along the track.
190254
*/
191-
export const Filled = Template.bind({});
192-
Filled.args = {
255+
export const Offset = Template.bind({});
256+
Offset.args = {
193257
...Default.args,
194-
variant: "filled",
258+
variant: "offset",
259+
values: [-15],
195260
};
196-
Filled.tags = ["!dev"];
197-
Filled.parameters = {
261+
Offset.tags = ["!dev"];
262+
Offset.parameters = {
198263
chromatic: {
199264
disableSnapshot: true,
200265
},
201266
};
202267

203-
/**
204-
* With fill and offset. If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track.
205-
*/
206-
export const FilledOffset = Template.bind({});
207-
FilledOffset.args = {
268+
export const Precise = Template.bind({});
269+
Precise.args = {
208270
...Default.args,
209-
min: 0,
210-
variant: "offset",
271+
isPrecise: true,
211272
};
212-
FilledOffset.tags = ["!dev"];
213-
FilledOffset.parameters = {
273+
Precise.tags = ["!dev"];
274+
Precise.parameters = {
214275
chromatic: {
215276
disableSnapshot: true,
216277
},
@@ -234,7 +295,7 @@ Ramp.parameters = {
234295
export const Range = Template.bind({});
235296
Range.args = {
236297
...Default.args,
237-
values: [14, 16],
298+
values: [10, 20],
238299
};
239300
Range.tags = ["!dev"];
240301
Range.parameters = {
@@ -275,6 +336,24 @@ TickWithLabels.parameters = {
275336
};
276337
TickWithLabels.storyName = "Tick with labels";
277338

339+
/**
340+
* Large track height.
341+
*/
342+
export const TrackHeight = Template.bind({});
343+
TrackHeight.args = {
344+
...Default.args,
345+
trackHeight: "large",
346+
};
347+
TrackHeight.tags = ["!dev"];
348+
TrackHeight.parameters = {
349+
chromatic: {
350+
disableSnapshot: true,
351+
},
352+
};
353+
TrackHeight.storyName = "Large track height";
354+
355+
356+
278357
export const Disabled = Template.bind({});
279358
Disabled.args = {
280359
...Default.args,
@@ -287,34 +366,25 @@ Disabled.parameters = {
287366
},
288367
};
289368

290-
export const Focused = Template.bind({});
291-
Focused.args = {
369+
export const Emphasized = Template.bind({});
370+
Emphasized.args = {
292371
...Default.args,
293-
isFocused: true,
372+
isEmphasized: true,
294373
};
295-
Focused.tags = ["!dev"];
296-
Focused.parameters = {
374+
Emphasized.tags = ["!dev"];
375+
Emphasized.parameters = {
297376
chromatic: {
298377
disableSnapshot: true,
299378
},
300379
};
301380

302-
/**
303-
* A gradient can be added to the track of any slider to give more meaning to the range of values. Tracks with a gradient can also have a fill. A gradient track should not be used for choosing a precise color; use a [color slider](/docs/components-color-slider--docs), [color area](/docs/components-color-area--docs), or [color wheel](/docs/components-color-wheel--docs) instead.
304-
*/
305-
export const Gradient = Template.bind({});
306-
Gradient.args = {
381+
export const Focused = Template.bind({});
382+
Focused.args = {
307383
...Default.args,
308-
customStyles: {
309-
"--spectrum-slider-track-color":
310-
"linear-gradient(to right, red, green 100%)",
311-
"--spectrum-slider-track-color-rtl":
312-
"linear-gradient(to left, red, green 100%)",
313-
},
314-
label: "Slider label that is long and wraps to the next line",
384+
isFocused: true,
315385
};
316-
Gradient.tags = ["!dev"];
317-
Gradient.parameters = {
386+
Focused.tags = ["!dev"];
387+
Focused.parameters = {
318388
chromatic: {
319389
disableSnapshot: true,
320390
},
@@ -345,3 +415,7 @@ WithForcedColors.parameters = {
345415
modes: disableDefaultModes,
346416
},
347417
};
418+
419+
// test with /?path=/story/components-slider--variant-tests&globals=testingPreview:!true
420+
export const VariantTests = VariantGroup.bind({});
421+
VariantTests.tags = ["!autodocs", "!dev"];

0 commit comments

Comments
 (0)