From c2f3c0be39346e5b8823a874bc1217bbf5c2f6f2 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 10 Mar 2025 14:42:08 -0400 Subject: [PATCH 1/2] feat(slider): offset variant border radius bug fix --- .changeset/rude-jokes-judge.md | 39 ++++++++++++++++++++++++++++ components/slider/dist/metadata.json | 1 + components/slider/index.css | 6 +++++ 3 files changed, 46 insertions(+) create mode 100644 .changeset/rude-jokes-judge.md diff --git a/.changeset/rude-jokes-judge.md b/.changeset/rude-jokes-judge.md new file mode 100644 index 00000000000..63a4557f335 --- /dev/null +++ b/.changeset/rude-jokes-judge.md @@ -0,0 +1,39 @@ +--- +"@spectrum-css/slider": minor +--- + +# 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. This likely negated the initial declaration of the border radius styles written below: + +```css +.spectrum-Slider-track { + &:first-of-type { + &::before { + border-start-start-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + border-end-start-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + } + } + + &:last-of-type { + &::before { + border-start-end-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + border-end-end-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + } + } +} +``` + +Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue. diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 9cc5b6e39fa..0887aebc06b 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -62,6 +62,7 @@ ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle", ".spectrum-Slider-track", ".spectrum-Slider-track ~ .spectrum-Slider-track", + ".spectrum-Slider-track ~ .spectrum-Slider-track:before", ".spectrum-Slider-track:before", ".spectrum-Slider-track:first-of-type:before", ".spectrum-Slider-track:last-of-type:before", diff --git a/components/slider/index.css b/components/slider/index.css index b0e907d2132..3262c94e60e 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -537,6 +537,12 @@ &::before { background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); } + + /* Styles below are applied to the sibling spectrum-Slider-track when filled-offset variant is activated */ + & ~ .spectrum-Slider-track::before { + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + } } /* All variants other than filled-offset get a new track color for highcontrast mode */ From 54c3f116a604fa41e5b0b119abe4bc391f0aa7ef Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 13 Mar 2025 15:11:01 -0400 Subject: [PATCH 2/2] feat(slider): fix range slider --- .changeset/rude-jokes-judge.md | 32 +------------------------------- components/slider/index.css | 2 ++ 2 files changed, 3 insertions(+), 31 deletions(-) diff --git a/.changeset/rude-jokes-judge.md b/.changeset/rude-jokes-judge.md index 63a4557f335..a546273338a 100644 --- a/.changeset/rude-jokes-judge.md +++ b/.changeset/rude-jokes-judge.md @@ -4,36 +4,6 @@ # 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. This likely negated the initial declaration of the border radius styles written below: - -```css -.spectrum-Slider-track { - &:first-of-type { - &::before { - border-start-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - } - } - - &:last-of-type { - &::before { - border-start-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - } - } -} -``` +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. diff --git a/components/slider/index.css b/components/slider/index.css index 3262c94e60e..d49f584aab0 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -627,6 +627,8 @@ .spectrum-Slider-track { &:not(:first-of-type, :last-of-type)::before { background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + border-start-end-radius: 0; + border-end-end-radius: 0; } } }