Skip to content

Commit 9d0ab17

Browse files
jawinnTarunAdoberise-erpeldingcastastrophedependabot[bot]
authored
chore: merge branch 'main' into spectrum-two (#3633)
* 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]>
1 parent 48ae9d7 commit 9d0ab17

File tree

18 files changed

+132
-100
lines changed

18 files changed

+132
-100
lines changed

‎.github/workflows/development.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ jobs:
9595
steps:
9696
- name: Get changed files
9797
id: changed-files
98-
uses: tj-actions/changed-files@v45
98+
uses: step-security/changed-files@v45
9999
with:
100100
files_yaml: |
101101
styles:

‎components/actionbutton/CHANGELOG.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Change log
22

3+
## 8.0.0-next.0
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
8+
- @spectrum-css/icon@10.0.0-next.0
9+
310
## 7.1.2
411

512
### Patch Changes
@@ -10,13 +17,6 @@ This updates the colors used in action button for the spectrum two theme, so the
1017

1118
This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors.
1219

13-
## 8.0.0-next.0
14-
15-
### Patch Changes
16-
17-
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
18-
- @spectrum-css/icon@10.0.0-next.0
19-
2020
## 7.1.1
2121

2222
### Patch Changes

‎components/alertbanner/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@
1616
- @spectrum-css/button@15.0.0-next.0
1717
- @spectrum-css/closebutton@7.0.0-next.0
1818

19+
## 3.1.1
20+
21+
### Patch Changes
22+
23+
- [#3624](https://github.com/adobe/spectrum-css/pull/3624) [`754f99a`](https://github.com/adobe/spectrum-css/commit/754f99afc3c1918cdc0d173150989bcc1e6a7d2f) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - In the alert banner spectrum.css (the S1 stylesheet), --system: legacy was corrected in the container query.
24+
1925
## 3.1.0
2026

2127
### Minor Changes

‎components/checkbox/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
88
- @spectrum-css/icon@10.0.0-next.0
99

10+
## 10.1.2
11+
12+
### Patch Changes
13+
14+
📝 [#3617](https://github.com/adobe/spectrum-css/pull/3617) [`a02f1d1`](https://github.com/adobe/spectrum-css/commit/a02f1d13d07106465a3236c5bfe3d029f3e64426) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)!
15+
16+
Adds a `::before` pseudo element to properly target the `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box` element. The selector update, specifically in the invalid+checked+hover state should now get the proper error background color, as opposed to the default background color.
17+
1018
## 10.1.1
1119

1220
### Patch Changes

‎components/checkbox/dist/metadata.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
6666
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label",
6767
".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before",
68-
".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
68+
".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
6969
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input",
7070
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before",
7171
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",

‎components/checkbox/index.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@
175175
}
176176

177177
&:hover {
178-
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,
178+
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before,
179179
.spectrum-Checkbox-box::before {
180180
border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
181181
}
@@ -297,6 +297,7 @@
297297
}
298298
}
299299

300+
/* TODO: Because this selector was moved to the default variant's styles, this selector block can be deleted when it is safe to make changes to selectors. */
300301
/* Invalid Hover States */
301302
&.is-invalid:hover {
302303
&.is-indeterminate .spectrum-Checkbox-box,

‎components/checkbox/stories/checkbox.stories.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Sizes } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3-
import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
3+
import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
44
import metadata from "../dist/metadata.json";
55
import packageJson from "../package.json";
66
import { CheckboxGroup } from "./checkbox.test.js";
@@ -30,6 +30,7 @@ export default {
3030
control: { type: "text" },
3131
},
3232
isEmphasized,
33+
isHovered,
3334
isInvalid,
3435
isDisabled,
3536
isChecked,
@@ -43,6 +44,7 @@ export default {
4344
isChecked: false,
4445
isDisabled: false,
4546
isEmphasized: false,
47+
isHovered: false,
4648
isIndeterminate: false,
4749
isInvalid: false,
4850
isReadOnly: false,

‎components/checkbox/stories/checkbox.test.js

+22
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export const CheckboxGroup = Variants({
2727
testHeading: "Checked",
2828
isChecked: true,
2929
},
30+
{
31+
testHeading: "Checked, hovered",
32+
isChecked: true,
33+
isHovered: true,
34+
},
3035
{
3136
testHeading: "Indeterminate",
3237
isIndeterminate: true,
@@ -40,6 +45,12 @@ export const CheckboxGroup = Variants({
4045
isInvalid: true,
4146
isChecked: true,
4247
},
48+
{
49+
testHeading: "Invalid, checked, hovered",
50+
isInvalid: true,
51+
isChecked: true,
52+
isHovered: true,
53+
},
4354
{
4455
testHeading: "Invalid, indeterminate",
4556
isInvalid: true,
@@ -54,6 +65,11 @@ export const CheckboxGroup = Variants({
5465
isDisabled: true,
5566
isChecked: true,
5667
},
68+
{
69+
testHeading: "Disabled, checked, hovered",
70+
isDisabled: true,
71+
isChecked: true,
72+
},
5773
{
5874
testHeading: "Disabled, indeterminate",
5975
isDisabled: true,
@@ -68,6 +84,12 @@ export const CheckboxGroup = Variants({
6884
isReadOnly: true,
6985
isChecked: true,
7086
},
87+
{
88+
testHeading: "Read-only, checked, hovered",
89+
isReadOnly: true,
90+
isChecked: true,
91+
isHovered: true,
92+
},
7193
{
7294
testHeading: "Read-only, indeterminate",
7395
isReadOnly: true,

‎components/checkbox/stories/template.js

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const Template = ({
1414
label,
1515
isChecked = false,
1616
isEmphasized = false,
17+
isHovered = false,
1718
isIndeterminate = false,
1819
isDisabled = false,
1920
isInvalid = false,
@@ -52,6 +53,7 @@ export const Template = ({
5253
["is-indeterminate"]: isIndeterminate,
5354
["is-disabled"]: isDisabled,
5455
["is-invalid"]: isInvalid,
56+
["is-hover"]: isHovered && !isDisabled,
5557
["is-readOnly"]: isReadOnly,
5658
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
5759
})}

‎components/combobox/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
- @spectrum-css/popover@9.0.0-next.0
1111
- @spectrum-css/textfield@9.0.0-next.0
1212

13+
## 4.1.2
14+
15+
### Patch Changes
16+
17+
- [#3609](https://github.com/adobe/spectrum-css/pull/3609) [`851be13`](https://github.com/adobe/spectrum-css/commit/851be13295f9d42d548894fee6626009f053de61) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Fast follow fixes for combobox
18+
19+
- corrects container query for the `--system` reference to "legacy" in the combobox/themes/spectrum.css file
20+
- corrects the border colors for several combobox states including focus, keyboardFocus, focus+hover, disabled, read-only for all themes
21+
- adds `--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400);` to express.css theme so that the default border and read-only border colors are the same
22+
1323
## 4.1.1
1424

1525
### Patch Changes

‎components/combobox/dist/metadata.json

+3
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@
124124
"--mod-combobox-inline-size",
125125
"--mod-combobox-line-height",
126126
"--mod-combobox-min-inline-size",
127+
"--mod-combobox-readonly-border-color-disabled",
127128
"--mod-combobox-readonly-input-border-color",
128129
"--mod-combobox-spacing-block-end-edge-to-text",
129130
"--mod-combobox-spacing-block-start-edge-to-text",
@@ -170,6 +171,7 @@
170171
"--spectrum-combobox-line-height",
171172
"--spectrum-combobox-min-inline-size",
172173
"--spectrum-combobox-readonly-background-color-disabled",
174+
"--spectrum-combobox-readonly-border-color-disabled",
173175
"--spectrum-combobox-readonly-border-color-invalid-default",
174176
"--spectrum-combobox-readonly-input-background-color",
175177
"--spectrum-combobox-readonly-input-border-color",
@@ -253,6 +255,7 @@
253255
"--mod-picker-button-background-color-disabled",
254256
"--mod-picker-button-background-color-quiet",
255257
"--mod-picker-button-border-color",
258+
"--mod-picker-button-border-color-disabled",
256259
"--mod-picker-button-border-color-quiet",
257260
"--mod-picker-button-border-width",
258261
"--mod-picker-button-font-color-disabled",

‎components/combobox/index.css

+6-13
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@
1212
*/
1313

1414
.spectrum-Combobox {
15-
--spectrum-combobox-border-color-default: var(--spectrum-gray-500);
16-
--spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
17-
--spectrum-combobox-border-color-focus: var(--spectrum-gray-800);
18-
--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
19-
--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
20-
21-
--spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);
22-
2315
--spectrum-combobox-block-size: var(--spectrum-component-height-100);
2416
--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
2517
--spectrum-combobox-font-size: var(--spectrum-font-size-100);
@@ -56,6 +48,7 @@
5648
--spectrum-combobox-border-color-focus: var(--spectrum-gray-800);
5749
--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
5850
--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
51+
--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
5952

6053
--spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
6154
--spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
@@ -83,7 +76,7 @@
8376

8477
--mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
8578
--mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
86-
--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, transparent);
79+
--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
8780
--mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus));
8881
--mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover));
8982
--mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover));
@@ -104,15 +97,15 @@
10497
--mod-picker-button-background-color: var(--mod-combobox-background-color-default);
10598
--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
10699
--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
100+
--mod-picker-button-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
107101
/* @passthroughs end -- settings for nested Picker Button component */
108102

109103
/*** Read-only Colors ***/
110104
--spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50);
111-
--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);
112105
--spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);
113106
--spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
114107
--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
115-
--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
108+
--spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color);
116109
}
117110

118111
.spectrum-Combobox--sizeS {
@@ -248,7 +241,7 @@
248241

249242
&.is-disabled .spectrum-Combobox-input:read-only {
250243
background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
251-
border-color: transparent;
244+
border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent));
252245
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
253246

254247
&:hover {
@@ -435,7 +428,7 @@
435428

436429
&.is-disabled .spectrum-Combobox-input:read-only {
437430
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
438-
border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
431+
border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled));
439432
}
440433
}
441434
}

‎components/form/stories/form.stories.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
21
import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js";
32
import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
43
import { disableDefaultModes } from "@spectrum-css/preview/modes";
@@ -80,18 +79,19 @@ export default {
8079
content: [
8180
(passthroughs, context) => Fieldgroup({
8281
layout: "horizontal",
82+
inputType: "checkbox",
8383
items: [
84-
Checkbox({
84+
{
8585
...passthroughs,
8686
label: "Kittens",
8787
customClasses: ["spectrum-FieldGroup-item"],
88-
}, context),
89-
Checkbox({
88+
},
89+
{
9090
...passthroughs,
9191
label: "Puppies",
9292
customClasses: ["spectrum-FieldGroup-item"],
93-
}, context),]
94-
}),
93+
}]
94+
}, context),
9595
],
9696
},{
9797
label: "Age",

‎components/search/CHANGELOG.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# Change log
22

3+
## 9.0.0-next.0
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
8+
- @spectrum-css/icon@10.0.0-next.0
9+
- @spectrum-css/clearbutton@8.0.0-next.0
10+
- @spectrum-css/textfield@9.0.0-next.0
11+
312
## 8.1.1
413

514
### Patch Changes
@@ -10,15 +19,6 @@ Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` an
1019

1120
Also defines disabled quiet border and background colors (`--system-search-quiet-background-color-disabled` and `--system-search-quiet-border-color-disabled`) in order to maintain disabled quiet styling.
1221

13-
## 9.0.0-next.0
14-
15-
### Patch Changes
16-
17-
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
18-
- @spectrum-css/icon@10.0.0-next.0
19-
- @spectrum-css/clearbutton@8.0.0-next.0
20-
- @spectrum-css/textfield@9.0.0-next.0
21-
2222
## 8.1.0
2323

2424
### Minor Changes

‎components/slider/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@
77
- Updated dependencies []:
88
- @spectrum-css/stepper@8.0.0-next.0
99

10+
## 6.2.0
11+
12+
### Minor Changes
13+
14+
- [#3611](https://github.com/adobe/spectrum-css/pull/3611) [`8cb98c6`](https://github.com/adobe/spectrum-css/commit/8cb98c6127a91f902f305faeb800e3c787e97e66) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - # Slider: offset variant track fix
15+
16+
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.
17+
18+
Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue.
19+
1020
## 6.1.0
1121

1222
### Minor Changes

‎components/slider/dist/metadata.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle",
6363
".spectrum-Slider-track",
6464
".spectrum-Slider-track ~ .spectrum-Slider-track",
65+
".spectrum-Slider-track ~ .spectrum-Slider-track:before",
6566
".spectrum-Slider-track:before",
6667
".spectrum-Slider-track:first-of-type:before",
6768
".spectrum-Slider-track:last-of-type:before",
@@ -83,9 +84,6 @@
8384
".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
8485
".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
8586
".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
86-
".spectrum-Slider.spectrum-Slider--sizeL",
87-
".spectrum-Slider.spectrum-Slider--sizeS",
88-
".spectrum-Slider.spectrum-Slider--sizeXL",
8987
".spectrum-Slider:dir(rtl)",
9088
".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
9189
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",

0 commit comments

Comments
 (0)