Skip to content

Commit 92855aa

Browse files
rise-erpeldingrise-erpelding
authored
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 dd96363 commit 92855aa

File tree

14 files changed

+152
-80
lines changed

14 files changed

+152
-80
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
@@ -46,6 +46,7 @@
4646
--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
4747
--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)));
4848
--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)));
49+
--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
4950
--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)));
5051
--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)));
5152
--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/calendar/metadata/metadata.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@
166166
"--spectrum-font-size-100",
167167
"--spectrum-font-size-300",
168168
"--spectrum-font-size-50",
169+
"--spectrum-gray-100-rgb",
169170
"--spectrum-gray-800",
170171
"--spectrum-logical-rotation",
171172
"--spectrum-neutral-content-color-default",

‎components/dial/index.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,21 @@
1414
.spectrum-Dial {
1515
--spectrum-dial-background-color-default: var(--spectrum-gray-75);
1616

17-
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200);
18-
--spectrum-dial-border-color-disabled: var(--spectrum-gray-200);
19-
2017
--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
2118
--spectrum-dial-border-color: var(--spectrum-gray-700);
2219

20+
--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
21+
--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
22+
23+
--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
24+
2325
--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
2426

2527
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
26-
--spectrum-dial-border-color-key-focus: var(--spectrum-gray-25);
28+
29+
--spectrum-dial-label-text-color: var(--spectrum-gray-700);
30+
--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
31+
--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
2732

2833
--spectrum-dial-container-width: 48px;
2934

‎components/dial/metadata/metadata.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,7 @@
7575
"component": [
7676
"--spectrum-dial-background-color-default",
7777
"--spectrum-dial-border-color",
78-
"--spectrum-dial-border-color-disabled",
7978
"--spectrum-dial-border-color-hover",
80-
"--spectrum-dial-border-color-key-focus",
8179
"--spectrum-dial-border-radius",
8280
"--spectrum-dial-container-width",
8381
"--spectrum-dial-controls-margin",
@@ -88,7 +86,6 @@
8886
"--spectrum-dial-handle-inline-margin",
8987
"--spectrum-dial-handle-marker-border-radius",
9088
"--spectrum-dial-handle-marker-color",
91-
"--spectrum-dial-handle-marker-color-disabled",
9289
"--spectrum-dial-handle-marker-color-hover",
9390
"--spectrum-dial-handle-marker-color-key-focus",
9491
"--spectrum-dial-handle-marker-color-mouse-focus",
@@ -111,11 +108,12 @@
111108
"global": [
112109
"--spectrum-border-width-200",
113110
"--spectrum-font-size-75",
114-
"--spectrum-gray-200",
115111
"--spectrum-gray-25",
112+
"--spectrum-gray-400",
116113
"--spectrum-gray-600",
117114
"--spectrum-gray-700",
118115
"--spectrum-gray-75",
116+
"--spectrum-gray-800",
119117
"--spectrum-line-height-200"
120118
],
121119
"passthroughs": [],

‎components/pickerbutton/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,17 @@
3535
--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
3636
--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
3737

38+
--spectrum-picker-button-border-color: inherit;
39+
--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
40+
--spectrum-picker-button-border-radius-rounded-sided: 0;
41+
--spectrum-picker-button-border-radius-sided: 0;
42+
--spectrum-picker-button-border-width: var(--spectrum-border-width-100);
3843
--spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
3944

45+
--spectrum-picker-button-background-color: var(--spectrum-gray-50);
46+
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
47+
--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
48+
--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
4049
--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
4150

4251
&:hover {

‎components/pickerbutton/metadata/metadata.json‎

Lines changed: 5 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-default-font-style",
116118
"--spectrum-disabled-background-color",
@@ -123,6 +125,9 @@
123125
"--spectrum-font-size-200",
124126
"--spectrum-font-size-300",
125127
"--spectrum-font-size-75",
128+
"--spectrum-gray-100",
129+
"--spectrum-gray-200",
130+
"--spectrum-gray-50",
126131
"--spectrum-in-field-button-edge-to-fill",
127132
"--spectrum-neutral-content-color-default",
128133
"--spectrum-neutral-content-color-down",

‎components/progressbar/index.css‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,6 @@
4949
--spectrum-progressbar-text-color: var(--spectrum-neutral-subdued-content-color-default);
5050
--spectrum-progressbar-track-color: var(--spectrum-gray-300);
5151
--spectrum-progressbar-fill-color: var(--spectrum-accent-content-color-default);
52-
--spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
53-
--spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
54-
--spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
5552
--spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700);
5653
--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
5754
--spectrum-progressbar-fill-color-white: var(--spectrum-transparent-white-900);
@@ -136,14 +133,14 @@
136133
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
137134
border-radius: var(--spectrum-progressbar-corner-radius);
138135

139-
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)));
140137
}
141138

142139
.spectrum-ProgressBar-fill {
143140
border: none;
144141
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
145142
transition: width 1s;
146-
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)));
147144
}
148145
}
149146

@@ -186,7 +183,7 @@
186183
.spectrum-ProgressBar--staticWhite {
187184
.spectrum-ProgressBar-fill {
188185
color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
189-
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)));
190187
}
191188

192189
.spectrum-ProgressBar-label,
@@ -195,7 +192,7 @@
195192
}
196193

197194
.spectrum-ProgressBar-track {
198-
background-color: var(--spectrum-progressbar-track-color-white);
195+
background: var(--spectrum-progressbar-track-color-white);
199196
}
200197
}
201198

‎components/progressbar/metadata/metadata.json‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@
6262
"--spectrum-progressbar-animation-ease-in-out-indeterminate",
6363
"--spectrum-progressbar-corner-radius",
6464
"--spectrum-progressbar-fill-color",
65-
"--spectrum-progressbar-fill-color-negative",
66-
"--spectrum-progressbar-fill-color-notice",
67-
"--spectrum-progressbar-fill-color-positive",
6865
"--spectrum-progressbar-fill-color-white",
6966
"--spectrum-progressbar-fill-size-indeterminate",
7067
"--spectrum-progressbar-font-size",
@@ -101,10 +98,7 @@
10198
"--spectrum-font-size-75",
10299
"--spectrum-gray-300",
103100
"--spectrum-line-height-100",
104-
"--spectrum-negative-visual-color",
105101
"--spectrum-neutral-subdued-content-color-default",
106-
"--spectrum-notice-visual-color",
107-
"--spectrum-positive-visual-color",
108102
"--spectrum-spacing-200",
109103
"--spectrum-spacing-75",
110104
"--spectrum-transparent-white-300",

‎components/progressbar/stories/template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Template = ({
1212
rootClass = "spectrum-ProgressBar",
1313
customClasses = [],
1414
labelPosition,
15-
isStaticWhite,
15+
staticColor,
1616
customWidth,
1717
isIndeterminate = false,
1818
label,

0 commit comments

Comments
 (0)