Skip to content

Commit 4337262

Browse files
rise-erpeldingcastastrophe
rise-erpelding
authored and
castastrophe
committed
fix(calendar,dial,pickerbutton,progressbar,radio,stepper): unused custom properties (#3487)
* fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties
1 parent a87c109 commit 4337262

File tree

10 files changed

+119
-93
lines changed

10 files changed

+119
-93
lines changed

‎.changeset/wicked-dragons-cheer.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
"@spectrum-css/pickerbutton": patch
3+
"@spectrum-css/progressbar": patch
4+
"@spectrum-css/calendar": patch
5+
"@spectrum-css/stepper": patch
6+
"@spectrum-css/radio": patch
7+
"@spectrum-css/dial": patch
8+
---
9+
10+
Fixes to align `spectrum-two` with `s2-foundations-redux`/`main`, mostly defining unused custom properties, but addresses any other lint warnings or inconsistencies noted in the following components:
11+
12+
**Calendar**: Defines 1 previously undefined custom property to align with `main` and `s2-foundations-redux`
13+
**Dial**: Defines 6 previously undefined custom properties, removes 3 unused custom properties
14+
**Pickerbutton**: Defines 9 previously undefined custom properties to align with `main` and `s2-foundations-redux`
15+
**Progressbar**: Removes 3 unused custom properties, reverts background-color to background to accommodate gradients
16+
**Radio**: Defines 4 previously undefined custom properties to align with `main` and `s2-foundations-redux`
17+
**Stepper**: moves high contrast block further down to align with other components' CSS structure, defines multiple undefined custom properties, adds disable-next-line comment to suppress no-unused-custom-properties warning

‎components/calendar/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
4949
--spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
5050
--spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
51+
--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
5152
--spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
5253
--spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
5354
--spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));

‎components/dial/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525

2626
--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
2727

28+
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
29+
2830
--spectrum-dial-label-text-color: var(--spectrum-gray-700);
2931
--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
3032
--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);

‎components/pickerbutton/dist/metadata.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,12 @@
107107
"global": [
108108
"--spectrum-animation-duration-100",
109109
"--spectrum-body-sans-serif-font-weight",
110+
"--spectrum-border-width-100",
110111
"--spectrum-component-height-100",
111112
"--spectrum-component-height-200",
112113
"--spectrum-component-height-300",
113114
"--spectrum-component-height-75",
115+
"--spectrum-corner-radius-100",
114116
"--spectrum-corner-radius-200",
115117
"--spectrum-corner-radius-75",
116118
"--spectrum-default-font-style",

‎components/pickerbutton/index.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,17 @@
4848
--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
4949
--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
5050

51+
--spectrum-picker-button-border-color: inherit;
52+
--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
53+
--spectrum-picker-button-border-radius-rounded-sided: 0;
54+
--spectrum-picker-button-border-radius-sided: 0;
55+
--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
5156
--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
57+
58+
--spectrum-picker-button-background-color: var(--spectrum-gray-50);
59+
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
60+
--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
61+
--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
5262
--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
5363

5464
&:hover {

‎components/progressbar/index.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,14 @@
133133
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
134134
border-radius: var(--spectrum-progressbar-corner-radius);
135135

136-
background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
136+
background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
137137
}
138138

139139
.spectrum-ProgressBar-fill {
140140
border: none;
141141
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
142142
transition: width 1s;
143-
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
143+
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
144144
}
145145
}
146146

@@ -183,7 +183,7 @@
183183
.spectrum-ProgressBar--staticWhite {
184184
.spectrum-ProgressBar-fill {
185185
color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
186-
background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
186+
background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
187187
}
188188

189189
.spectrum-ProgressBar-label,
@@ -192,7 +192,7 @@
192192
}
193193

194194
.spectrum-ProgressBar-track {
195-
background-color: var(--spectrum-progressbar-track-color-white);
195+
background: var(--spectrum-progressbar-track-color-white);
196196
}
197197
}
198198

‎components/radio/dist/metadata.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,6 @@
127127
"--spectrum-accent-color-1100",
128128
"--spectrum-accent-color-900",
129129
"--spectrum-animation-duration-100",
130-
"--spectrum-border-width-200",
131130
"--spectrum-cjk-line-height-100",
132131
"--spectrum-component-bottom-to-text-100",
133132
"--spectrum-component-bottom-to-text-200",

‎components/radio/index.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,11 @@
4747
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
4848
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
4949

50-
/* selection indicator all themes */
51-
--spectrum-radio-border-width: var(--spectrum-border-width-200);
50+
/* unchecked selection indicator */
51+
--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
52+
--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
53+
--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
54+
--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
5255

5356
/* checked selection indicator */
5457
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);

‎components/stepper/dist/metadata.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@
115115
"global": [
116116
"--spectrum-animation-duration-100",
117117
"--spectrum-border-width-100",
118-
"--spectrum-border-width-200",
119118
"--spectrum-component-height-100",
120119
"--spectrum-component-height-200",
121120
"--spectrum-component-height-300",
@@ -126,7 +125,6 @@
126125
"--spectrum-focus-indicator-gap",
127126
"--spectrum-focus-indicator-thickness",
128127
"--spectrum-gray-25",
129-
"--spectrum-gray-300",
130128
"--spectrum-gray-50",
131129
"--spectrum-gray-500",
132130
"--spectrum-gray-600",

‎components/stepper/index.css

Lines changed: 78 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,28 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
.spectrum-Stepper {
14+
/* --- Component-level definitions --- */
15+
.spectrum-Stepper {
1516
--spectrum-stepper-border-width: var(--spectrum-border-width-100);
1617
--spectrum-stepper-border-color-default: var(--spectrum-gray-500);
1718
--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
1819
--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
1920
--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
2021
--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
22+
--spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default)));
23+
--spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100));
24+
25+
--spectrum-stepper-focus-indicator-width: var(--mod-stepper-focus-indicator-width, var(--spectrum-focus-indicator-thickness));
26+
--spectrum-stepper-focus-indicator-gap: var(--mod-stepper-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
27+
--spectrum-stepper-focus-indicator-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color)));
28+
29+
--spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100));
30+
31+
&,
32+
&.spectrum-Stepper--sizeM {
33+
--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium));
34+
--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100));
35+
}
2136

2237
--spectrum-stepper-buttons-border-style: none;
2338
--spectrum-stepper-buttons-border-width: 0;
@@ -36,90 +51,8 @@
3651
--spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
3752

3853
/** Disabled **/
39-
--spectrum-stepper-border-color-disabled: var(--spectrum-gray-300);
40-
--spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200);
54+
--spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
4155
--spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
42-
}
43-
44-
.spectrum-Stepper--quiet {
45-
--spectrum-stepper-buttons-border-style: none;
46-
--spectrum-stepper-button-edge-to-fill: 0;
47-
}
48-
49-
/* --- High contrast settings --- */
50-
@media (forced-colors: active) {
51-
.spectrum-Stepper {
52-
--highcontrast-stepper-border-color: CanvasText;
53-
--highcontrast-stepper-border-color-hover: Highlight;
54-
--highcontrast-stepper-border-color-focus: Highlight;
55-
--highcontrast-stepper-border-color-focus-hover: Highlight;
56-
--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
57-
--highcontrast-stepper-focus-indicator-color: Highlight;
58-
59-
&.is-invalid {
60-
--highcontrast-stepper-border-color: Highlight;
61-
--highcontrast-stepper-border-color-hover: Highlight;
62-
--highcontrast-stepper-border-color-focus: Highlight;
63-
--highcontrast-stepper-border-color-focus-hover: Highlight;
64-
--highcontrast-stepper-border-color-keyboard-focus: Highlight;
65-
}
66-
67-
&.is-disabled {
68-
--highcontrast-stepper-border-color: GrayText;
69-
--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
70-
}
71-
72-
&:not(.is-disabled) {
73-
&:hover {
74-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
75-
}
76-
77-
&.is-focused,
78-
&:focus {
79-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
80-
81-
&:hover {
82-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
83-
}
84-
}
85-
86-
&.is-keyboardFocused,
87-
&:focus-visible {
88-
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
89-
}
90-
}
91-
}
92-
93-
/* @passthrough start */
94-
.spectrum-Stepper-input {
95-
--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
96-
}
97-
/* @passthrough end */
98-
99-
/* @passthrough start */
100-
.spectrum-Stepper-button {
101-
--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
102-
--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
103-
}
104-
/* @passthrough end */
105-
}
106-
107-
/* --- Component-level definitions --- */
108-
.spectrum-Stepper {
109-
--spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default)));
110-
--spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100));
111-
112-
--spectrum-stepper-focus-indicator-width: var(--mod-stepper-focus-indicator-width, var(--spectrum-focus-indicator-thickness));
113-
--spectrum-stepper-focus-indicator-gap: var(--mod-stepper-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
114-
--spectrum-stepper-focus-indicator-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color)));
115-
116-
--spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100));
117-
118-
&,
119-
&.spectrum-Stepper--sizeM {
120-
--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium));
121-
--spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100));
122-
}
12356

12457
&.spectrum-Stepper--sizeS {
12558
--spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small));
@@ -169,6 +102,9 @@
169102
}
170103

171104
&.spectrum-Stepper--quiet {
105+
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used by --mod-infield-button-inner-edge-to-fill and --mod-infield-button-edge-to-fill */
106+
--spectrum-stepper-button-edge-to-fill: 0;
107+
172108
--mod-stepper-buttons-background-color: transparent;
173109

174110
/* quiet hover */
@@ -189,6 +125,64 @@
189125
}
190126
}
191127

128+
/* --- High contrast settings --- */
129+
@media (forced-colors: active) {
130+
.spectrum-Stepper {
131+
--highcontrast-stepper-border-color: CanvasText;
132+
--highcontrast-stepper-border-color-hover: Highlight;
133+
--highcontrast-stepper-border-color-focus: Highlight;
134+
--highcontrast-stepper-border-color-focus-hover: Highlight;
135+
--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
136+
--highcontrast-stepper-focus-indicator-color: Highlight;
137+
138+
&.is-invalid {
139+
--highcontrast-stepper-border-color: Highlight;
140+
--highcontrast-stepper-border-color-hover: Highlight;
141+
--highcontrast-stepper-border-color-focus: Highlight;
142+
--highcontrast-stepper-border-color-focus-hover: Highlight;
143+
--highcontrast-stepper-border-color-keyboard-focus: Highlight;
144+
}
145+
146+
&.is-disabled {
147+
--highcontrast-stepper-border-color: GrayText;
148+
--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
149+
}
150+
151+
&:not(.is-disabled) {
152+
&:hover {
153+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
154+
}
155+
156+
&.is-focused,
157+
&:focus {
158+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
159+
160+
&:hover {
161+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
162+
}
163+
}
164+
165+
&.is-keyboardFocused,
166+
&:focus-visible {
167+
--highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
168+
}
169+
}
170+
}
171+
172+
/* @passthrough start */
173+
.spectrum-Stepper-input {
174+
--highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
175+
}
176+
/* @passthrough end */
177+
178+
/* @passthrough start */
179+
.spectrum-Stepper-button {
180+
--highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
181+
--highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
182+
}
183+
/* @passthrough end */
184+
}
185+
192186
/* --- Component-level passthroughs for nested components --- */
193187
/* @passthrough start -- MODS for sub components */
194188
.spectrum-Stepper {

0 commit comments

Comments
 (0)