feat(slider): S2 migration, new precision variant, embedded textfield #3945
Conversation
🦋 Changeset detectedLatest commit: 48ae945 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
File metricsSummaryTotal size: 1.43 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
File change detailsslider
tokens
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-3945--spectrum-css.netlify.app |
aramos-adobe
changed the title
aramos-adobe
added
size-5 L
|
Things left to do:
|
📚 Branch previewPR #3945 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-3945/index.html. |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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 globalfocus-indicator-gaptoken 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-gapand--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.
…://github.com/adobe/spectrum-css into aramos-adobe/css1201-s2-slider-handle-variant
marissahuysentruyt
added
the
skip_vrt
There was a problem hiding this comment.
This is a big migration that was a ton of work, so I'm sorry I didn't get to finish looking through it on the first pass! For now I'm pointing out a few things I noticed after going over the first section in the token specs and will plan to pick up the rest a bit later!
| --spectrum-slider-editable-field-inline-size-small: 56px; | ||
| --spectrum-slider-editable-field-inline-size-medium: 70px; | ||
| --spectrum-slider-editable-field-inline-size-large: 82px; | ||
| --spectrum-slider-editable-field-inline-size-extra-large: 94px; |
There was a problem hiding this comment.
Ooooh tell me more about these. I see they're not in the tokens spec, and it looks like the tokens are the same values for medium and large. Is this just taken from looking at the width of the slider text field at different sizes?
We'll need a changeset for tokens too!
There was a problem hiding this comment.
I got these sizes recommended by Jason. I wanted to know what the minimum/suggested sizes were for the editable fields.
There was a problem hiding this comment.
One more question! Is there a plan for these tokens to be moved into spectrum-tokens or did design intentionally leave them out? Might be worth looking into either way.
| { | ||
| testHeading: "Disabled", | ||
| variant: "filled", | ||
| isDisabled: true | ||
| }, | ||
| { | ||
| testHeading: "Disabled + precise", | ||
| variant: "filled", | ||
| isDisabled: true, | ||
| isPrecise: true | ||
| }, | ||
| { | ||
| testHeading: "Disabled + precise + large track", | ||
| variant: "filled", | ||
| isDisabled: true, | ||
| isPrecise: true, | ||
| trackHeight: "large" | ||
| }, |
There was a problem hiding this comment.
Not a huge deal because I can see that you can't actually focus on a disabled slider, but the disabled tests still show the focus indicator:
What options do we have here? We could maybe hide the focused state from these tests, or what do we do for other components?
There was a problem hiding this comment.
It may be worthwhile to revisit the is-focused class here and determine if it's still necessary or if we can rely on :focus and :focus-visible and PostCSS to set the is-focus/is-focus-visible classes instead. Not sure it feels like a can of worms to open right now though.
There was a problem hiding this comment.
Added :not(.is-disabled) to the styles to address this, but happy to revert
rise-erpelding
dismissed
their stale review
Hoping to push this PR across the finish line while Aziz is out, so making my own requested changes and will request another reviewer.
- rename fillColor to trackColor, add description for that control - update documentation for offset variant - set field label bottom-to-text passthroughs (should have no visual effect) - use the minimum perspective token for downstate on slider handle rather than calculated perspective - remove focus ring when slider is disabled - shift precise styles to ensure focus styles are applied
Addresses markdownlint-fix reported by reviewdog Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Description
CSS-1201
CSS-1202
S2 slider migration changes:
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-smallHow 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
- [ ] 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:
Screenshots
To-do list