Skip to content

Commit f116b7e

Browse files
pfultonjenndiaz
pfulton
and
jenndiaz
authored
feat(dial)!: migrate to use @adobe/spectrum-tokens (#1971)
BREAKING CHANGE: migrates the Dial component to `@adobe/spectrum-tokens` Additionally: * chore(dial): begin migrating from old to new tokens * chore(dial): use latest dependencies * feat(dial): replace vars with new values * chore(dial): update to latest deps * chore(dial): update dependencies * chore(dial): finish migration Uses correct colors & removes duplicate properties * chore(dial): high-contrast fixes * chore(dial): rename custom properties * refactor(dial): focus and dragged states and SB controls * chore(dial): address left margin issue * chore(dial): address PR feedback * chore(dial): address PR feedback for disabled state * refactor(dial): use focus-visible * chore(dial): remove disabled from tab order * chore(dial): adds focus-visible --------- Co-authored-by: Jenn Diaz <jenn.diaz@heysparkbox.com>
1 parent fce04d3 commit f116b7e

File tree

9 files changed

+244
-195
lines changed

9 files changed

+244
-195
lines changed

‎components/dial/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

‎components/dial/index.css

Lines changed: 164 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,55 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Dial {
14-
--spectrum-dial-label-gap-y: var(--spectrum-global-dimension-size-65);
15-
--spectrum-dial-handle-position: var(--spectrum-global-dimension-size-100);
14+
--spectrum-dial-background-color-default: var(--spectrum-gray-100);
15+
16+
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
17+
--spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
18+
19+
--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
20+
--spectrum-dial-border-color: var(--spectrum-gray-700);
21+
22+
--spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800);
23+
--spectrum-dial-border-color-down: var(--spectrum-gray-800);
24+
--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
25+
--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
26+
27+
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
28+
--spectrum-dial-border-color-key-focus: var(--spectrum-gray-50);
29+
30+
--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
31+
--spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700);
32+
33+
--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
34+
35+
--spectrum-dial-label-text-color: var(--spectrum-gray-700);
36+
--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
37+
--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
38+
39+
--spectrum-dial-container-width: 48px;
40+
41+
--spectrum-dial-handle-marker-width: 12px;
42+
--spectrum-dial-handle-marker-height: 2px;
43+
44+
--spectrum-dial-handle-marker-border-radius: 1px;
1645

1746
--spectrum-dial-handle-size: 100%;
1847
--spectrum-dial-min-height: 0;
1948
--spectrum-dial-controls-min-height: 0;
20-
--spectrum-dial-controls-margin: calc(
21-
var(--spectrum-global-dimension-size-200) / 2
22-
);
49+
50+
--spectrum-dial-min-max-tick-angles: 45deg;
2351

24-
--spectrum-dial-handle-border-size: var(--spectrum-alias-border-size-thick);
25-
--spectrum-dial-label-text-size: var(--spectrum-body-xs-text-size);
26-
--spectrum-dial-label-line-height: var(--spectrum-body-xs-text-line-height);
27-
}
52+
--spectrum-dial-width: 32px;
53+
--spectrum-dial-height: 32px;
2854

29-
.spectrum-Dial-label {
30-
padding-inline-start: 0;
31-
flex-grow: 1;
55+
--spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
56+
--spectrum-dial-label-text-size: var(--spectrum-font-size-75);
57+
--spectrum-dial-label-line-height: var(--spectrum-line-height-200);
3258
}
3359

34-
.spectrum-Dial-value {
35-
flex-grow: 0;
36-
padding-inline-end: 0;
37-
cursor: default;
60+
.spectrum-Dial--small {
61+
--spectrum-dial-width: 24px;
62+
--spectrum-dial-height: 24px;
3863
}
3964

4065
.spectrum-Dial {
@@ -46,28 +71,38 @@ governing permissions and limitations under the License.
4671
display: inline-flex;
4772
flex-direction: column;
4873
block-size: auto;
49-
min-inline-size: var(--spectrum-dial-min-height);
50-
min-block-size: var(--spectrum-dial-min-height);
51-
inline-size: var(--spectrum-dial-container-width);
52-
}
53-
54-
.spectrum-Dial-labelContainer {
55-
display: flex;
56-
position: relative;
57-
inline-size: auto;
58-
padding-block-start: var(--spectrum-fieldlabel-m-padding-top);
59-
font-size: var(--spectrum-dial-label-text-size);
60-
line-height: var(--spectrum-dial-label-line-height);
61-
margin-block-end: var(--spectrum-dial-label-gap-y);
74+
min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
75+
min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
76+
inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width));
6277
}
6378

6479
.spectrum-Dial-label {
80+
padding-inline-start: 0;
81+
flex-grow: 1;
82+
6583
&:only-child {
6684
/* Only center if we don't have a value */
6785
text-align: center;
6886
}
6987
}
7088

89+
.spectrum-Dial-value {
90+
flex-grow: 0;
91+
padding-inline-end: 0;
92+
cursor: default;
93+
}
94+
95+
.spectrum-Dial-labelContainer {
96+
color: var(--highcontrast-dial-label-text-color, var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color)));
97+
display: flex;
98+
position: relative;
99+
inline-size: auto;
100+
padding-block-start: var(--mod-dial-label-container-top-to-text, var(--spectrum-dial-label-container-top-to-text));
101+
font-size: var(--mod-dial-label-text-size, var(--spectrum-dial-label-text-size));
102+
line-height: var(--mod-dial-label-line-height, var(--spectrum-dial-label-line-height));
103+
margin-block-end: var(--mod-dial-label-gap-y, var(--spectrum-dial-label-gap-y));
104+
}
105+
71106
.spectrum-Dial-controls {
72107
display: inline-block;
73108
box-sizing: border-box;
@@ -77,86 +112,115 @@ governing permissions and limitations under the License.
77112

78113
vertical-align: top;
79114

80-
inline-size: var(--spectrum-dial-width);
81-
block-size: var(--spectrum-dial-height);
82-
min-block-size: var(--spectrum-dial-controls-min-height);
83-
margin-inline-start: var(--spectrum-dial-controls-margin);
115+
inline-size: var(--mod-dial-width, var(--spectrum-dial-width));
116+
block-size: var(--mod-dial-height, var(--spectrum-dial-height));
117+
min-block-size: var(--mod-dial-controls-min-height, var(--spectrum-dial-controls-min-height));
118+
margin-inline-start: var(--mod-dial-controls-margin, var(--spectrum-dial-controls-margin));
84119

85-
border-radius: var(--spectrum-dial-border-radius);
86-
position: relative;
87-
display: inline-block;
88-
margin: 0;
120+
border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
121+
margin-block: 0;
89122

90-
box-sizing: border-box;
91123
outline: none;
92124

93125
&::before,
94126
&::after {
127+
background-color: var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color)));
95128
content: "";
96-
inline-size: calc(var(--spectrum-dial-handle-marker-height) * 2);
97-
block-size: var(--spectrum-dial-handle-marker-height);
98-
border-radius: var(--spectrum-dial-handle-marker-border-radius);
129+
inline-size: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2);
130+
block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
131+
border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
99132
position: absolute;
100133
inset-block-end: 0;
101134
}
102135
&::before {
103136
inset-inline-start: auto;
104-
inset-inline-end: calc(var(--spectrum-dial-handle-marker-height) * -1);
105-
transform: rotate(var(--spectrum-dial-min-max-tick-angles));
137+
inset-inline-end: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
138+
transform: rotate(var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)));
106139
}
107140
&::after {
108-
inset-inline-start: calc(var(--spectrum-dial-handle-marker-height) * -1);
109-
transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles)));
141+
inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
142+
transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
110143
}
111144
}
112145

113146
.spectrum-Dial-handle {
147+
box-shadow: none;
148+
border-color: var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color)));
114149
position: absolute;
115-
inset-inline-start: 0;
116150
z-index: 2;
117151
display: inline-block;
118152
box-sizing: border-box;
119153

120-
margin-block: calc(var(--spectrum-global-dimension-size-200) / -2) 0;
121-
margin-inline: calc(var(--spectrum-global-dimension-size-200) / -2) 0;
154+
/* large 20px, med 16px */
155+
156+
margin-block: calc(var(--mod-dial-handle-block-margin, var(--spectrum-dial-handle-block-margin)) / -2) 0;
157+
margin-inline: calc(var(--mod-dial-handle-inline-margin, var(--spectrum-dial-handle-inline-margin)) / -2) 0;
122158

123159
outline: none;
124-
cursor: pointer;
125-
cursor: grab;
126160

127-
inline-size: var(--spectrum-dial-handle-size);
128-
block-size: var(--spectrum-dial-handle-size);
129-
border-width: var(--spectrum-dial-handle-border-size);
161+
inline-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
162+
block-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
163+
border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
130164
border-style: solid;
131-
box-shadow: none;
132-
position: absolute;
133-
inset-block-start: var(--spectrum-dial-handle-position);
134-
inset-inline-start: var(--spectrum-dial-handle-position);
135-
inset-inline-end: var(--spectrum-dial-handle-position);
136-
inset-block-end: var(--spectrum-dial-handle-position);
137-
border-radius: var(--spectrum-dial-border-radius);
138-
transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles)));
139-
cursor: pointer;
165+
inset-block-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
166+
inset-inline-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
167+
inset-inline-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
168+
inset-block-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
169+
border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
170+
transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
140171
cursor: grab;
141172

173+
&::before {
174+
display: none;
175+
}
176+
142177
&::after {
143178
content: "";
144179
position: absolute;
145180
inset-block-start: 50%;
146-
inset-inline-start: calc(var(--spectrum-dial-handle-marker-height) * -1);
147-
inline-size: var(--spectrum-dial-handle-marker-width);
148-
block-size: var(--spectrum-dial-handle-marker-height);
149-
border-radius: var(--spectrum-dial-handle-marker-border-radius);
181+
inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
182+
inline-size: var(--mod-dial-handle-marker-width, var(--spectrum-dial-handle-marker-width));
183+
block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
184+
border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
150185
transform: translateY(-50%);
186+
background-color: var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color)));
151187
}
152188

153189
&:active,
154-
&.is-focused,
190+
&:focus-visible,
191+
&:focus-within,
155192
&.is-dragged {
156-
border-width: var(--spectrum-dial-handle-border-size);
193+
border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
157194
cursor: ns-resize;
158195
cursor: grabbing;
159196
}
197+
198+
&:hover {
199+
border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
200+
&::after {
201+
background-color: var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover)));
202+
}
203+
}
204+
205+
&:focus-visible,
206+
&:focus-within {
207+
background-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
208+
border-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
209+
210+
&::after {
211+
background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
212+
}
213+
}
214+
215+
&:active,
216+
&.is-dragged {
217+
background-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
218+
border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
219+
220+
&::after {
221+
background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
222+
}
223+
}
160224
}
161225

162226
.spectrum-Dial-input {
@@ -179,16 +243,27 @@ governing permissions and limitations under the License.
179243
}
180244
}
181245

182-
.spectrum-Dial--small {
183-
.spectrum-Dial-controls {
184-
inline-size: var(--spectrum-dial-small-width);
185-
block-size: var(--spectrum-dial-small-height);
186-
}
187-
}
188-
189246
.spectrum-Dial {
190247
&.is-disabled {
191-
cursor: default;
248+
.spectrum-Dial-labelContainer {
249+
color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
250+
}
251+
.spectrum-Dial-controls {
252+
&::after,
253+
&::before {
254+
background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
255+
}
256+
}
257+
.spectrum-Dial-handle {
258+
cursor: default;
259+
border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
260+
background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default)));
261+
262+
&::after,
263+
&::before {
264+
background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
265+
}
266+
}
192267
}
193268
}
194269

@@ -209,3 +284,16 @@ governing permissions and limitations under the License.
209284
}
210285
}
211286
}
287+
288+
@media (forced-colors: active) {
289+
.spectrum-Dial {
290+
--highcontrast-dial-min-max-tick-color: Highlight;
291+
--highcontrast-dial-border-color: Highlight;
292+
--highcontrast-dial-handle-marker-color: Highlight;
293+
--highcontrast-dial-border-color-hover: Highlight;
294+
--highcontrast-dial-handle-marker-color-hover: Highlight;
295+
--highcontrast-dial-handle-marker-color-key-focus: HighlightText;
296+
--highcontrast-dial-label-text-color-disabled: GrayText;
297+
--highcontrast-dial-handle-border-color-disabled: GrayText;
298+
}
299+
}

‎components/dial/metadata/dial.yml

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ examples:
1313
</div>
1414
<div class="spectrum-Dial is-disabled">
1515
<div class="spectrum-Dial-controls">
16-
<div class="spectrum-Dial-handle" tabindex="0">
17-
<input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
16+
<div class="spectrum-Dial-handle">
17+
<input type="range" class="spectrum-Dial-input" min="0" max="100" value="0" disabled>
1818
</div>
1919
</div>
2020
</div>
@@ -28,8 +28,8 @@ examples:
2828
</div>
2929
<div class="spectrum-Dial spectrum-Dial--small is-disabled">
3030
<div class="spectrum-Dial-controls">
31-
<div class="spectrum-Dial-handle" tabindex="0">
32-
<input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
31+
<div class="spectrum-Dial-handle">
32+
<input type="range" class="spectrum-Dial-input" min="0" max="100" value="0" disabled>
3333
</div>
3434
</div>
3535
</div>
@@ -53,8 +53,8 @@ examples:
5353
<!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
5454
</div>
5555
<div class="spectrum-Dial-controls">
56-
<div class="spectrum-Dial-handle" tabindex="0">
57-
<input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
56+
<div class="spectrum-Dial-handle">
57+
<input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0" disabled>
5858
</div>
5959
</div>
6060
</div>
@@ -76,8 +76,8 @@ examples:
7676
<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
7777
</div>
7878
<div class="spectrum-Dial-controls">
79-
<div class="spectrum-Dial-handle" tabindex="0">
80-
<input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
79+
<div class="spectrum-Dial-handle">
80+
<input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0" disabled>
8181
</div>
8282
</div>
8383
</div>

0 commit comments

Comments
 (0)