feat(slider): S2 migration, new precision variant, embedded textfield #3945

aramos-adobe · 2025-06-11T14:08:11Z

Description

CSS-1201
CSS-1202

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)

New tokens

--spectrum-slider-control-to-field-label-editable-extra-large
--spectrum-slider-control-to-field-label-editable-large
--spectrum-slider-control-to-field-label-editable-medium
--spectrum-slider-control-to-field-label-editable-small
--spectrum-slider-control-to-side-field-label-extra-large
--spectrum-slider-control-to-side-field-label-large
--spectrum-slider-control-to-side-field-label-medium
--spectrum-slider-control-to-side-field-label-small
--spectrum-slider-control-to-text-field-extra-large
--spectrum-slider-control-to-text-field-large
--spectrum-slider-control-to-text-field-medium
--spectrum-slider-control-to-text-field-small
--spectrum-slider-editable-control-to-field-label
--spectrum-slider-editable-control-to-text-field
--spectrum-slider-editable-field-inline-size-extra-large
--spectrum-slider-editable-field-inline-size-large
--spectrum-slider-editable-field-inline-size-medium
--spectrum-slider-editable-field-inline-size-small
--spectrum-slider-emphasized-track-fill-color
--spectrum-slider-precision-handle-height
--spectrum-slider-precision-handle-height-extra-large
--spectrum-slider-precision-handle-height-large
--spectrum-slider-precision-handle-height-medium
--spectrum-slider-precision-handle-height-small
--spectrum-slider-precision-handle-width
--spectrum-slider-handle-extra-large
--spectrum-slider-handle-large
--spectrum-slider-handle-medium
--spectrum-slider-handle-small

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Open the storybook for the slider component:
- [ ] Precision handle for all shirt sizes
- [ ] Precision handle on slider variants (ramp, offset, range)
- [ ] Perspective onclick down on precision and default handle
- [ ] Emphasized track is visible
- [ ] Interaction states are visible for variants and embedded components

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-06-11T14:08:16Z

🦋 Changeset detected

Latest commit: b998c67

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@spectrum-css/slider	Major
@spectrum-css/bundle	Patch
@spectrum-css/preview	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…e-variant

github-actions · 2025-06-11T14:17:51Z

File metrics

Summary

Total size: 1.44 MB^*
Total change (Δ): 🔴 ⬆ 4.48 KB (0.31%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Minified	Gzipped	Δ
slider	32.61 KB	30.82 KB	4.21 KB	🔴 ⬆ 3.13 KB

File change details

slider

Filename	Head	Minified	Gzipped	Compared to base
index.css	32.61 KB	30.82 KB	4.21 KB	🔴 ⬆ 3.13 KB
metadata.json	15.80 KB	-	-	🔴 ⬆ 2.98 KB

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	46.24 KB	-	-	-
css/global-vars.css	80.22 KB	-	-	-
css/index.css	261.67 KB	-	-	🔴 ⬆ 2.24 KB
css/large-vars.css	45.29 KB	-	-	🔴 ⬆ 1.12 KB
css/light-vars.css	46.24 KB	-	-	-
css/medium-vars.css	45.41 KB	-	-	🔴 ⬆ 1.12 KB
json/tokens.json	410.29 KB	-	-	-

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-06-11T14:21:51Z

🚀 Deployed on https://pr-3945--spectrum-css.netlify.app

…e-variant

aramos-adobe · 2025-06-17T15:06:13Z

Things left to do:

Configure WHCM for all states and variants
Review base & CJK typography for labels
Configure color of ticks on filled track

…e-variant

github-actions · 2025-06-20T21:17:26Z

📚 Branch preview

PR #3945 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-3945/index.html.

marissahuysentruyt

First pass done. I got pulled into some other things late in the day, but I didn't want these to sit for too long! I'll do another check of the CSS tomorrow!

There's a few stories I'd like to see on the docs page- the large track height, the precision handle (we could even steal the docs about the precision handle from the token specs), and then the editable with the textfield. Is there any other Figma documentation we can use to help beef up the information we have? (which is not much 😆) or from the contributions site?

components/slider/stories/slider.stories.js

components/slider/stories/slider.test.js

components/slider/stories/slider.stories.js

marissahuysentruyt · 2025-06-26T22:16:15Z

components/slider/index.css

 	--spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
+	--spectrum-slider-ramp-track-color-disabled: var(--spectrum-slider-track-color-disabled);
 	--spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
 	--spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);


I think the label value is supposed to be neutral-subdued-content-color-default instead. There's a note that says it was originally this content-color-default, but it got changed to the subdued version I think.

marissahuysentruyt · 2025-06-26T22:19:44Z

components/slider/index.css


 	--spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
 	--spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
 	--spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
 	--spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);

+	--spectrum-slider-precision-handle-width: 6px;


Instead of hardcoding the 6px, can we use the slider-precision-handle-width token? Or does it not exist? If it doesn't, could we leave a comment here with that note?

Or would you want to create a custom token like the some of the handle sizes?

marissahuysentruyt

I didn't say it before, but WOW! This is so complex. Thanks for taking this on.

For the focus ring, I think we should error on the side of not having a --mod-focus-indicator-gap. If it was me, the first step would be to create a slider-specific focus indicator gap custom variable like we have in other components, instead of using the global focus-indicator-gap token in our styles, and then have a mod for that slider focus ring gap instead. Basically, we'd end up with something like --spectrum-slider-focus-indicator-gap: var(--spectrum-focus-indicator-gap), and then at lines 432 or so, have --mod-slider-focus-indicator-gap and --spectrum-slider-focus-indicator-gap.
Speaking of focus states, what are the expectations for us to represent those? Right now, we're showcasing both focus on the handle and focus on the textfield at the same time, or focus on both range handles, but is that accurate? Like would that happen, is that a scenario that is expected, to have "focus" on 2 elements at once?

Figma:

In our tests:

Tabbing:

Screen.Recording.2025-06-27.at.1.54.54.PM.mov

For the "Spacing (top/bottom edge to label) section in Figma- I'm not convinced that we're using at least the top-to-text tokens accurately. If I understood things right, those tokens are being applied to .spectrum-Slider-labelContainer, which adds extra spacing after each labels padding. With Figma as the reference, that's not really where that spacing is supposed to go. Would it be acceptable to remove those? (like line 478?) If we can't or shouldn't remove them, can you update those to use the correct tokens (M, L, XL would all be using the wrong specs). We aren't using the bottom-to-text tokens, so that tipped me off that maybe we don't need the top-to-text.

marissahuysentruyt · 2025-06-27T16:10:39Z

components/slider/index.css

There's a min-inline-size defined as spacing-900- do you know where we got that from? If we keep the min-inline-size (which seems like we should for the side label & editable variants), is spacing-900 really the token we want there? It feels like design would probably want a more understandable semantic token. Have we asked about that?

marissahuysentruyt · 2025-06-27T16:25:17Z

tokens/custom/large-vars.css

+	--spectrum-slider-handle-small: 18px;
+	--spectrum-slider-handle-medium: 20px;
+	--spectrum-slider-handle-large: 22px;
+	--spectrum-slider-handle-extra-large: 24px;
+
+	--spectrum-slider-precision-handle-height-small: 20px;
+	--spectrum-slider-precision-handle-height-medium: 22px;
+	--spectrum-slider-precision-handle-height-large: 24px;
+	--spectrum-slider-precision-handle-height-extra-large: 26px;


All of these values are actually for desktop, which is the medium-vars file instead. Everything is opposite right now, where things get smaller for mobile and bigger for desktop.

It's kind of confusing, but large-vars corresponds to mobile, because everything is a bit larger for mobile to account for larger touch targets, etc.

Screen.Recording.2025-06-27.at.12.23.05.PM.mov

marissahuysentruyt · 2025-06-27T16:32:10Z

components/slider/index.css


 	--spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
 	--spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
 	--spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
 	--spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);

+	--spectrum-slider-precision-handle-width: 6px;


Or would you want to create a custom token like the some of the handle sizes?

marissahuysentruyt · 2025-06-27T16:37:33Z

components/slider/index.css

+		&.is-focused {
+			&::before {
+				border-radius: var(--spectrum-slider-handle-border-radius);
+				block-size: calc(var(--spectrum-slider-precision-handle-height) + var(--spectrum-focus-indicator-gap) * 2);


Should we abstract one more level away from using the global focus-indicator-gap token in our styles?

components/slider/stories/template.js

marissahuysentruyt · 2025-06-27T17:17:59Z

tokens/custom/medium-vars.css

+	--spectrum-slider-control-to-field-label-editable-small: 0px;
+	--spectrum-slider-control-to-field-label-editable-medium: -4px;
+	--spectrum-slider-control-to-field-label-editable-large: -6px;
+	--spectrum-slider-control-to-field-label-editable-extra-large: -8px;
+
+	--spectrum-slider-control-to-side-field-label-small: 16px;
+	--spectrum-slider-control-to-side-field-label-medium: 16px;
+	--spectrum-slider-control-to-side-field-label-large: 20px;
+	--spectrum-slider-control-to-side-field-label-extra-large: 24px;


It looks like maybe these tokens are available: https://github.com/adobe/spectrum-tokens/blob/74f21a9c6981b7f406bf4c99db2231fffd6a3374/packages/tokens/src/layout-component.json#L9595

I also think Figma might have the incorrect names with the side label tokens (slider-control-to-field-label-side-small but not what's in Figma slider-control-to-side-field-label-small). They're all the right values I think, so maybe those are the actual intended tokens. It might be something worth checking with Jason on.

https://github.com/adobe/spectrum-tokens/blob/74f21a9c6981b7f406bf4c99db2231fffd6a3374/packages/tokens/src/layout-component.json#L9659

They look like they might be the incorrect values (at least according to Figma), but we've used the correct token, with incorrect values in the past. If the tokens team releases an update, our styles can update automatically, so I'd push for that again, use the right token with a wrong value, unless someone else has a reason not to use the available tokens.

marissahuysentruyt · 2025-06-27T17:33:19Z

components/slider/index.css

+.spectrum-Slider-content--offset {
+	display: flex;
+	align-items: center;
+	gap: var(--mod-slider-editable-control-to-text-field, var(--spectrum-slider-editable-control-to-text-field));


Is this var(--spectrum-slider-editable-control-to-text-field) also supposed to apply to the margin-inline-start of the .spectrum-Slider-value for a side label slider? I'm not seeing the control-to-text-field tokens for that margin currently, but I see the control-to-field-label-side tokens, which appear to be the same values.

components/slider/stories/template.js

components/slider/stories/slider.stories.js

marissahuysentruyt · 2025-06-27T18:00:05Z

components/slider/index.css

@@ -427,6 +472,8 @@

 	font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
 	line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+	font-weight: var(--mod-slider-label-font-weight, var(--spectrum-slider-label-font-weight));
+	font-style: var(--mod-slider-label-font-style, var(--spectrum-slider-label-font-style));



Should we add the default-font-family token here as well? Looks like most of the others are here, except for that one.

I tried that and the font looked off to me 😅 Wasn't sure to do with maybe font-family-stack token??

…e-variant

feat(slider): wip track height and gap

5e3894c

aramos-adobe self-assigned this Jun 11, 2025

aramos-adobe marked this pull request as draft June 11, 2025 14:09

Merge branch 'spectrum-two' into aramos-adobe/css1201-s2-slider-handl…

9975e73

…e-variant

aramos-adobe added 2 commits June 11, 2025 10:23

Merge branch 'spectrum-two' into aramos-adobe/css1201-s2-slider-handl…

4384a5f

…e-variant

feat(slider): adding precision variant

af0af60

aramos-adobe changed the title ~~Aramos-adobe/css1201-s2-slider-handle-variant~~ feat(slider): S2 migration, new precision variant, embedded textfield Jun 12, 2025

aramos-adobe added size-5 L ~30-42hrs; lots of effort or complexity, most of a sprint needed to complete. S2 Spectrum 2 labels Jun 12, 2025

aramos-adobe added 3 commits June 16, 2025 23:52

feat(slider): added emphasized mode, updated ticks

750cf36

Merge branch 'spectrum-two' into aramos-adobe/css1201-s2-slider-handl…

5f0b436

…e-variant

feat(slider): adding changeset description

dacccde

aramos-adobe marked this pull request as ready for review June 17, 2025 14:50

aramos-adobe added 3 commits June 18, 2025 12:50

Merge branch 'spectrum-two' into aramos-adobe/css1201-s2-slider-handl…

1f0f24f

…e-variant

feat(slider): adjust WHCM and typography

31cf9f1

Merge branch 'spectrum-two' into aramos-adobe/css1201-s2-slider-handl…

b96ddfa

…e-variant

aramos-adobe added the ready-for-review label Jun 20, 2025

feat(slider): adding more test cases for emphasized range

f061fd4

marissahuysentruyt requested changes Jun 26, 2025

View reviewed changes

marissahuysentruyt requested changes Jun 27, 2025

View reviewed changes

Merge branch 'spectrum-two' into aramos-adobe/css1201-s2-slider-handl…

b998c67

…e-variant

feat(slider): S2 migration, new precision variant, embedded textfield #3945

Are you sure you want to change the base?

feat(slider): S2 migration, new precision variant, embedded textfield #3945

Uh oh!

Conversation

aramos-adobe commented Jun 11, 2025 • edited by marissahuysentruyt Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

S2 slider migration changes:

New tokens

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

slider

tokens

Uh oh!

github-actions bot commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aramos-adobe commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

aramos-adobe commented Jun 11, 2025 •

edited by marissahuysentruyt

Loading

changeset-bot bot commented Jun 11, 2025 •

edited

Loading

github-actions bot commented Jun 11, 2025 •

edited

Loading

github-actions bot commented Jun 11, 2025 •

edited

Loading

aramos-adobe commented Jun 17, 2025 •

edited

Loading

github-actions bot commented Jun 20, 2025 •

edited

Loading