spectrum-css
spectrum-css copied to clipboard
adobe
The slider controls margin makes it harder to implement click logic correctly.
Description
I'm opening this out of https://github.com/adobe/spectrum-web-components/issues/653 as this makes it harder to properly implement the slider, leading to bugs where you can't actually click to the edge in implementations.
Expected behavior
No margin in the controls so the width matches the actual track width. If this is harder to fix, it'd be good to have some additional advice on the doc pages for implementations.
Screenshots
synced to jira: https://jira.corp.adobe.com/browse/CSS-217
IIRC this is done because we need to be able to drop the slider off the edge of the track, and we don't want the handle to overlap things.
This could be done differently, but I believe it would cause complications in how the handles are positioned. Perhaps wrap the slider itself in a div and listen for clicks on that?
I just checked in with @badimon - We shouldn't have the margin. It isn't super clear in the design docs, but the edge of the handle should go to the edge of the track.
Like @lazd mentioned, it was done intentionally at first, but design ended up going with a different decision.
And just to make sure I don't cause additional confusion, the handle really does go to the edge of the track, it's just that because of the margin, it's easy to lose click events at the very edge of the track.
@adixon-adobe Is there a place where we could verify if this is still an issue? We can check again with design folks and fix if it's still an issue.
Here's a screenshot of some of the override css we have in place for the web component (which probably has a touch more than needed for this issue). My hunch looking at the Spectrum CSS site is that this will still be an issue, because the controls are not the full width of the track. I won't have time to confirm directly for at least a few weeks though.
@adixon-adobe I believe this has been resolved in the slider token migration branch. When you have a chance, would you mind taking a look and making sure this resolves the issue you found? https://pr-1547--spectrum-css.netlify.app/docs/slider.html
@castastrophe I think this covers it. I'd recommend making a really wide slider with more ticks to test that you have the alignment logic correct there (unless that's just faked for the spectrum css site). It looks like the alignment might be very slightly off for ticks closer to the edge.
Oh, and fwiw I just logged https://github.com/adobe/spectrum-web-components/issues/2990 on slider alignment.
Oh great call-out on the edge alignment. I'll make sure that's included in our QA.
Slider Migration PR in SWC: https://github.com/adobe/spectrum-web-components/pull/2905