fix(slider): offset variant border radius bug fix #3611

aramos-adobe · 2025-03-10T18:45:05Z

Slider: offset variant track fix

The border radius styles were not being applied to the second instance of the spectrum-Slider-track when the offset variant is activated. The reason for this bug is because when the offset is selected, the template structure changes as spectrum-Slider-fill gets added to the slider.

Adding a sibling combinator &~.spectrum-Slider-track to spectrum-Slider-track when offset is activated resolved the issue.

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

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-03-10T18:45:09Z

🦋 Changeset detected

Latest commit: 54c3f11

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/slider	Minor

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

cdransf

Nice! Looks good when pulling down the branch and stepping through the styles in the inspector. ✨

github-actions · 2025-03-11T14:58:25Z

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

github-actions · 2025-03-11T15:13:23Z

File metrics

Summary

Total size: 2.25 MB^*

Package	Size	Minified	Gzipped
slider	29.64 KB	27.98 KB	3.70 KB

slider

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	28.23 KB	26.64 KB	3.56 KB	🔴 ⬆ 0.33 KB
index-theme.css	2.67 KB	2.58 KB	0.66 KB	-
index.css	29.64 KB	27.98 KB	3.70 KB	🔴 ⬆ 0.33 KB
metadata.json	14.30 KB	-	-	🔴 ⬆ 0.06 KB
themes/express.css	2.14 KB	2.07 KB	0.63 KB	-
themes/spectrum-two.css	2.07 KB	2.00 KB	0.64 KB	-
themes/spectrum.css	2.12 KB	2.05 KB	0.64 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.

marissahuysentruyt

Glad this was a nice quick fix! Looks like this just needs a rebase now.

This is really nitpicky, but I think when this merges, we should change this commit from feat to fix- it is a bug/regression fix, as opposed to something new for slider. In my mind, fix also corresponds to the minor version bump a bit better than feat does.

.changeset/rude-jokes-judge.md

rise-erpelding

I'm so glad we're looking into this one! There are a few things here that I noticed that I thought were really odd, which is holding back my approval:

First, this isn't a problem in SWC, and after taking a quick glance, I really can't figure out why. The &:last-of-type::before selector seems to be working great there. I would think that any changes we make here would carry over fine to SWC and not cause problems, but I'm wondering if it's worth more of an investigation on how what appears to be the same CSS is working differently between the two environments.
Second, and maybe more importantly, this is throwing some regressions into the range variant, here it has a border-radius on the right side of the middle segment:

In comparison, this is how it looked before, with the border-radius only being applied to the end segments:

* Lastly, can you see the color diffs between the top and bottom image? For some reason the build preview and your local branch are running slightly different colors (honestly higher contrast in your branch tbh) than main... but that seems unexpected unless I missed something? That might end up being completely unrelated to your PR specifically, but noting it just in case? Ok it looks like there were some slider contrast things added here, so that doesn't seem like it's relevant here!

marissahuysentruyt

Thanks for looking into this one!

* feat(actionbutton): use s2 colors in spectrum-two theme (#3606) * feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence. * fix(search): update disabled state in spectrum two (#3593) Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> * chore(deps): bump the npm_and_yarn group with 2 updates (#3618) Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime). Updates `@babel/helpers` from 7.26.0 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers) Updates `@babel/runtime` from 7.24.4 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime) --- updated-dependencies: - dependency-name: "@babel/helpers" dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: "@babel/runtime" dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: update release script install settings * fix(button): adjust s2 static colors [SWC-496] (#3613) * chore: release (#3619) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(slider): corrects contrast bug caused by template default arg (#3614) * fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621) * fix(stepper): focus/focus+hover/keyboardFocus border colors * chore(stepper): add changeset * fix(slider): offset variant border radius bug fix (#3611) * feat(slider): offset variant border radius bug fix * feat(slider): fix range slider * fix(combobox): border color fast follows swc-582 (#3609) * fix(combobox): correct s1/legacy container variable * fix(combobox): fast follow border color remapping - add mods for s2 foundations disabled picker button BG/border colors - correct disabled+read-only border color - add read-only border custom property - fixes express read-only border from gray-500 to gray-400 - update metadata.json * chore(combobox): create changeset * chore: release (#3623) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: patch tj-actions vulnerability (#3626) * fix(alertbanner): change system variable from spectrum to legacy (#3624) * fix(alertbanner): change system: spectrum to legacy * chore(alertbanner): create changeset * test(checkbox): add more coverage for checkbox (#3625) * chore(checkbox): add isHovered state to checkbox - adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg * chore(form): fix the fieldgroup component input and labels * chore: release (#3631) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(checkbox): add invalid+checked+hover checkbox styles (#3617) - add missing ::before pseudo to target the before element in the invalid/checked/hover state - update metadata.json - create changeset * chore: release (#3632) * chore: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: undefined and duplicated variable after merging main fix(slider): remove duplicated values Remove a large number of duplicate values causing stylelint "Unexpected duplicate" warnings. It looks like things got doubled up somehow in a previous rebase or merge. This included duplicate t-shirt size classes. Also moves root styles block under the custom property definitions to be consistent with other components. fix(combobox): fixes undefined and duplicated values --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: TaraT <[email protected]> Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: aramos-adobe <[email protected]>

aramos-adobe added bug Results from a bug in the CSS implementation size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. ready-for-review labels Mar 10, 2025

aramos-adobe self-assigned this Mar 10, 2025

aramos-adobe added run_vrt For use on PRs looking to kick off VRT and removed run_vrt For use on PRs looking to kick off VRT labels Mar 10, 2025

castastrophe force-pushed the main branch from 416ff56 to 57706c7 Compare March 10, 2025 19:30

aramos-adobe requested review from rise-erpelding and cdransf March 10, 2025 19:51

cdransf approved these changes Mar 10, 2025

View reviewed changes

castastrophe force-pushed the main branch from 0d5bdfb to 8637d39 Compare March 11, 2025 14:54

castastrophe force-pushed the main branch 11 times, most recently from c68f4e3 to d2272ea Compare March 12, 2025 21:56

marissahuysentruyt requested changes Mar 13, 2025

View reviewed changes

.changeset/rude-jokes-judge.md Outdated Show resolved Hide resolved

rise-erpelding requested changes Mar 13, 2025

View reviewed changes

aramos-adobe changed the title ~~feat(slider): offset variant border radius bug fix~~ fix(slider): offset variant border radius bug fix Mar 13, 2025

aramos-adobe requested review from rise-erpelding and marissahuysentruyt March 13, 2025 19:17

aramos-adobe added 2 commits March 14, 2025 11:24

feat(slider): offset variant border radius bug fix

c2f3c0b

feat(slider): fix range slider

54c3f11

aramos-adobe force-pushed the aramos-adobe/css1093-slider-border-radius-bug branch from 60c1060 to 54c3f11 Compare March 14, 2025 15:25

marissahuysentruyt approved these changes Mar 14, 2025

View reviewed changes

rise-erpelding approved these changes Mar 14, 2025

View reviewed changes

aramos-adobe merged commit 8cb98c6 into main Mar 14, 2025
12 checks passed

aramos-adobe deleted the aramos-adobe/css1093-slider-border-radius-bug branch March 14, 2025 16:16

github-actions bot mentioned this pull request Mar 14, 2025

chore: release #3623

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(slider): offset variant border radius bug fix #3611

fix(slider): offset variant border radius bug fix #3611

Uh oh!

aramos-adobe commented Mar 10, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 10, 2025 •

edited

Loading

Uh oh!

cdransf left a comment

Uh oh!

github-actions bot commented Mar 11, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 11, 2025 •

edited

Loading

Uh oh!

marissahuysentruyt left a comment

Uh oh!

Uh oh!

rise-erpelding left a comment •

edited

Loading

Uh oh!

marissahuysentruyt left a comment

Uh oh!

Uh oh!

Uh oh!

fix(slider): offset variant border radius bug fix #3611

fix(slider): offset variant border radius bug fix #3611

Uh oh!

Conversation

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

Uh oh!

Slider: offset variant track fix

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

cdransf left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

File metrics

Summary

slider

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rise-erpelding left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

aramos-adobe commented Mar 10, 2025 •

edited

Loading

changeset-bot bot commented Mar 10, 2025 •

edited

Loading

github-actions bot commented Mar 11, 2025 •

edited

Loading

github-actions bot commented Mar 11, 2025 •

edited

Loading

rise-erpelding left a comment •

edited

Loading