Skip to content

Commit 58fcc4f

Browse files
marissahuysentruytmarissahuysentruyt
committed
wip
1 parent def3942 commit 58fcc4f

File tree

5 files changed

+151
-68
lines changed

5 files changed

+151
-68
lines changed

‎components/stepper/dist/metadata.json

+24-8
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,35 @@
33
"selectors": [
44
".spectrum-NumberField",
55
".spectrum-NumberField-buttons",
6-
".spectrum-NumberField-fieldContainer",
76
".spectrum-NumberField-fieldLabel",
7+
".spectrum-NumberField-helpText",
88
".spectrum-NumberField-input",
99
".spectrum-NumberField-inputs",
1010
".spectrum-NumberField-inputs .spectrum-Textfield .spectrum-Textfield-input",
1111
".spectrum-NumberField-textfield",
1212
".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
13-
".spectrum-NumberField-textfield.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
1413
".spectrum-NumberField.hide-stepper",
14+
".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield",
15+
".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield .spectrum-NumberField-input",
16+
".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield :has(.spectrum-Textfield-validationIcon)",
1517
".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
16-
".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
1718
".spectrum-NumberField.is-disabled",
1819
".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)",
1920
".spectrum-NumberField.is-focused:not(.is-disabled)",
2021
".spectrum-NumberField.is-focused:not(.is-disabled):hover",
2122
".spectrum-NumberField.is-hover:not(.is-disabled)",
2223
".spectrum-NumberField.is-hover:not(.is-disabled):focus",
2324
".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible",
25+
".spectrum-NumberField.is-hover:not(.is-disabled):focus-within",
2426
".spectrum-NumberField.is-invalid",
2527
".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)",
2628
".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)",
2729
".spectrum-NumberField.is-keyboardFocused:not(.is-disabled) .spectrum-NumberField-inputs",
2830
".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover",
2931
".spectrum-NumberField.spectrum-NumberField--sideLabel",
32+
".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel",
33+
".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-helpText",
34+
".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-inputs",
3035
".spectrum-NumberField.spectrum-NumberField--sizeL",
3136
".spectrum-NumberField.spectrum-NumberField--sizeS",
3237
".spectrum-NumberField.spectrum-NumberField--sizeXL",
@@ -35,6 +40,8 @@
3540
".spectrum-NumberField:not(.is-disabled):focus",
3641
".spectrum-NumberField:not(.is-disabled):focus-visible",
3742
".spectrum-NumberField:not(.is-disabled):focus-visible:hover",
43+
".spectrum-NumberField:not(.is-disabled):focus-within",
44+
".spectrum-NumberField:not(.is-disabled):focus-within:hover",
3845
".spectrum-NumberField:not(.is-disabled):focus:hover",
3946
".spectrum-NumberField:not(.is-disabled):hover"
4047
],
@@ -63,8 +70,6 @@
6370
"--mod-numberfield-border-radius",
6471
"--mod-numberfield-border-width",
6572
"--mod-numberfield-button-inline-offset",
66-
"--mod-numberfield-buttons-border-width",
67-
"--mod-numberfield-field-to-helptext",
6873
"--mod-numberfield-focus-indicator-color",
6974
"--mod-numberfield-focus-indicator-gap",
7075
"--mod-numberfield-focus-indicator-width",
@@ -77,6 +82,9 @@
7782
"--mod-numberfield-label-to-field",
7883
"--mod-numberfield-line-height",
7984
"--mod-numberfield-min-inline-size",
85+
"--mod-numberfield-spacing-block-end-edge-to-text",
86+
"--mod-numberfield-spacing-block-start-edge-to-text",
87+
"--mod-numberfield-spacing-field-to-helptext",
8088
"--mod-numberfield-stepper-button-width",
8189
"--mod-stepper-button-inline-offset"
8290
],
@@ -152,6 +160,7 @@
152160
"--spectrum-number-field-with-stepper-minimum-width-large",
153161
"--spectrum-number-field-with-stepper-minimum-width-medium",
154162
"--spectrum-number-field-with-stepper-minimum-width-small",
163+
"--spectrum-numberfield-alert-icon-size",
155164
"--spectrum-numberfield-animation-duration",
156165
"--spectrum-numberfield-background-color",
157166
"--spectrum-numberfield-background-color-disabled",
@@ -171,8 +180,6 @@
171180
"--spectrum-numberfield-border-width",
172181
"--spectrum-numberfield-button-inline-offset",
173182
"--spectrum-numberfield-button-size",
174-
"--spectrum-numberfield-buttons-border-color",
175-
"--spectrum-numberfield-buttons-border-width",
176183
"--spectrum-numberfield-focus-indicator-color",
177184
"--spectrum-numberfield-focus-indicator-gap",
178185
"--spectrum-numberfield-focus-indicator-width",
@@ -188,18 +195,25 @@
188195
"--spectrum-numberfield-spacing-block-end-validation-icon-to-stepper",
189196
"--spectrum-numberfield-spacing-block-start-edge-to-text",
190197
"--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper",
198+
"--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper-hidden",
191199
"--spectrum-numberfield-spacing-field-to-helptext",
192200
"--spectrum-numberfield-spacing-inline-edge-to-text",
193201
"--spectrum-numberfield-spacing-label-to-field",
194202
"--spectrum-numberfield-spacing-min-inline-end-text-to-stepper",
203+
"--spectrum-numberfield-spacing-min-inline-end-value-to-icon",
204+
"--spectrum-numberfield-spacing-side-label-to-field",
195205
"--spectrum-numberfield-spacing-validation-icon-to-stepper",
196206
"--spectrum-numberfield-spacing-validation-icon-to-stepper-hidden",
197207
"--spectrum-regular-font-weight",
198208
"--spectrum-sans-serif-font-family-stack",
209+
"--spectrum-spacing-200",
199210
"--spectrum-text-to-visual-100",
200211
"--spectrum-text-to-visual-200",
201212
"--spectrum-text-to-visual-300",
202-
"--spectrum-text-to-visual-75"
213+
"--spectrum-text-to-visual-75",
214+
"--spectrum-workflow-icon-size-100",
215+
"--spectrum-workflow-icon-size-200",
216+
"--spectrum-workflow-icon-size-75"
203217
],
204218
"passthroughs": [
205219
"--mod-infield-button-block-size",
@@ -221,6 +235,8 @@
221235
"--mod-textfield-icon-spacing-block-invalid",
222236
"--mod-textfield-icon-spacing-inline-end-invalid",
223237
"--mod-textfield-min-width",
238+
"--mod-textfield-spacing-block-end",
239+
"--mod-textfield-spacing-block-start",
224240
"--mod-textfield-width"
225241
],
226242
"high-contrast": [

‎components/stepper/index.css

+61-39
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@
2525
--spectrum-numberfield-border-color-focus-hover: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900)));
2626
--spectrum-numberfield-border-color-disabled: var(--highcontrast-numberfield-border-color-disabled, var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color)));
2727

28-
--spectrum-numberfield-buttons-border-color: var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-numberfield-border-color-default)));
29-
--spectrum-numberfield-buttons-border-width: var(--mod-numberfield-buttons-border-width, var(--spectrum-numberfield-border-width));
30-
3128
/* Invalid border */
3229
--spectrum-numberfield-border-color-invalid-default: var(--highcontrast-numberfield-border-color-invalid-default, var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default)));
3330
--spectrum-numberfield-border-color-invalid-hover: var(--highcontrast-numberfield-border-color-invalid-hover, var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover)));
@@ -57,17 +54,23 @@
5754
--spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-medium));
5855
--spectrum-numberfield-hidden-stepper-min-inline-size: calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size));
5956

57+
/* Icons */
58+
--spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-100);
59+
6060
/* Spacing */
6161
--spectrum-numberfield-spacing-inline-edge-to-text: var(--spectrum-component-edge-to-text-100);
6262
--spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
6363
--spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
6464
--spectrum-numberfield-spacing-min-inline-end-text-to-stepper: var(--spectrum-text-to-visual-100);
65+
--spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-100);
6566
--spectrum-numberfield-spacing-field-to-helptext: var(--spectrum-help-text-to-component);
6667
--spectrum-numberfield-spacing-label-to-field: var(--spectrum-field-label-to-component);
6768
--spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-medium);
6869
--spectrum-numberfield-spacing-validation-icon-to-stepper-hidden: var(--spectrum-field-edge-to-validation-icon-medium);
70+
--spectrum-numberfield-spacing-side-label-to-field: var(--spectrum-spacing-200);
6971

70-
--spectrum-numberfield-button-size: var(--mod-numberfield-stepper-button-width, var(--spectrum-component-height-100));
72+
/* Button size and offset (to properly position the validation icons/padding) */
73+
--spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-100)) *2);
7174
--spectrum-numberfield-button-inline-offset: var(--mod-stepper-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium));
7275

7376
--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-100);
@@ -86,11 +89,12 @@
8689
--spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-small);
8790
--spectrum-numberfield-spacing-validation-icon-to-stepper-hidden: var(--spectrum-number-field-edge-to-validation-icon-small);
8891

89-
--spectrum-numberfield-button-size: var(--mod-numberfield-stepper-button-width, var(--spectrum-component-height-75));
92+
--spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-75)) *2);
9093
--spectrum-numberfield-button-inline-offset: var(--mod-stepper-button-inline-offset, var(--spectrum-in-field-stepper-to-end-small));
9194

9295
--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-75);
9396
--spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-75);
97+
--spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-75);
9498
}
9599

96100
&.spectrum-NumberField--sizeL {
@@ -106,11 +110,12 @@
106110
--spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-large);
107111
--spectrum-numberfield-spacing-validation-icon-to-stepper-hidden: var(--spectrum-number-field-edge-to-validation-icon-large);
108112

109-
--spectrum-numberfield-button-size: var(--mod-numberfield-stepper-button-width, var(--spectrum-component-height-200));
113+
--spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-200)) *2);
110114
--spectrum-numberfield-button-inline-offset: var(--mod-stepper-button-inline-offset, var(--spectrum-in-field-stepper-to-end-large));
111115

112116
--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-200);
113117
--spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-200);
118+
--spectrum-numberfield-alert-icon-size: var(--spectrum-workflow-icon-size-200);
114119
}
115120

116121
&.spectrum-NumberField--sizeXL {
@@ -126,18 +131,15 @@
126131
--spectrum-numberfield-spacing-validation-icon-to-stepper: var(--spectrum-number-field-visual-to-in-field-stepper-extra-large);
127132
--spectrum-numberfield-spacing-validation-icon-to-stepper-hidden: var(--spectrum-number-field-edge-to-validation-icon-extra-large);
128133

129-
--spectrum-numberfield-button-size: var(--mod-numberfield-stepper-button-width, var(--spectrum-component-height-300));
134+
--spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-300)) *2);
130135
--spectrum-numberfield-button-inline-offset: var(--mod-stepper-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large));
131136

132137
--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-300);
133138
--spectrum-numberfield-spacing-block-end-validation-icon-to-stepper: var(--spectrum-component-top-to-workflow-icon-300);
139+
--spectrum-numberfield-spacing-block-start-validation-icon-to-stepper-hidden: var(--spectrum-component-top-to-workflow-icon-300);
134140
}
135141

136142
/* @passthrough start -- MODS for sub components */
137-
/* nested infield buttons */
138-
--mod-infield-button-inline-size: var(--spectrum-numberfield-button-size);
139-
--mod-infield-button-block-size: var(--spectrum-numberfield-button-size);
140-
141143
/* nested textfield */
142144
--mod-textfield-corner-radius: var(--mod-numberfield-border-radius, var(--spectrum-numberfield-border-radius));
143145
--mod-textfield-border-width: var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width));
@@ -179,7 +181,8 @@
179181
}
180182

181183
&:not(.is-disabled).is-focused,
182-
&:not(.is-disabled):focus {
184+
&:not(.is-disabled):focus,
185+
&:not(.is-disabled):focus-within {
183186
--mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-focus)));
184187

185188
&.is-hover,
@@ -189,8 +192,9 @@
189192
}
190193

191194
&:not(.is-disabled).is-keyboardFocused,
192-
&:not(.is-disabled):focus-visible {
193-
--mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-keyboard-focus)));
195+
&:not(.is-disabled):focus-visible,
196+
&:not(.is-disabled):focus-within {
197+
--mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus)));
194198

195199
&.is-hover,
196200
&:hover {
@@ -199,18 +203,14 @@
199203
}
200204

201205
&.is-disabled {
202-
/* --spectrum-numberfield-buttons-border-width: var(--spectrum-numberfield-button-border-width-disabled);
203-
--spectrum-numberfield-buttons-background-color: var(--spectrum-numberfield-buttons-background-color-disabled); */
204-
205206
--mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled);
206207
}
207208
}
208209

209210
/* --- Component styles --- */
210211
.spectrum-NumberField {
211212
position: relative;
212-
display: inline-flex;
213-
flex-flow: column nowrap;
213+
display: inline-grid;
214214

215215
min-inline-size: var(--spectrum-numberfield-min-inline-size);
216216
inline-size: var(--spectrum-numberfield-inline-size);
@@ -229,10 +229,46 @@
229229

230230
&.hide-stepper {
231231
min-inline-size: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size));
232+
233+
.spectrum-NumberField-textfield {
234+
padding-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text);
235+
236+
.spectrum-NumberField-input {
237+
padding-inline-end: calc(var(--spectrum-numberfield-spacing-min-inline-end-value-to-icon) + var(--spectrum-numberfield-alert-icon-size));
238+
}
239+
240+
&.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {
241+
/* accommodate validation icons when stepper buttons are hidden */
242+
inset-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text);
243+
}
244+
245+
}
246+
.spectrum-NumberField-textfield:not(:has(.spectrum-Textfield-validationIcon)) {
247+
.spectrum-NumberField-input {
248+
padding-inline-end: 0;
249+
}
250+
}
232251
}
233252

234253
&.spectrum-NumberField--sideLabel {
235-
flex-direction: row;
254+
grid-template-columns: auto auto auto;
255+
grid-template-rows: auto auto;
256+
257+
.spectrum-NumberField-fieldLabel {
258+
grid-row: 1 / span 2;
259+
grid-column: 1 / span 1;
260+
margin-inline-end: var(--spectrum-numberfield-spacing-side-label-to-field, var(--spectrum-numberfield-spacing-side-label-to-field));
261+
}
262+
263+
.spectrum-NumberField-inputs {
264+
grid-row: 1 / span 1;
265+
grid-column: 2 / span 1;
266+
}
267+
268+
.spectrum-NumberField-helpText {
269+
grid-row: 2;
270+
grid-column: 2 / span 1;
271+
}
236272
}
237273
}
238274

@@ -246,23 +282,17 @@
246282
margin-block-start: var(--mod-numberfield-spacing-field-to-helptext, var(--spectrum-numberfield-spacing-field-to-helptext));
247283
}
248284

249-
250-
251285
/* Number field container includes .spectrum-Textfield and .spectrum-InfieldButtons */
252286
.spectrum-NumberField-inputs {
253287
block-size: var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size));
254288
border-radius: var(--spectrum-numberfield-border-radius);
255289
display: flex;
256290
align-items: center;
257291

258-
/* removes the border-radius and outline from unstyled input to avoid double focus rings */
292+
/* removes the border-radius and outline from unstyled input to avoid double focus rings (which was being inherited from .spectrum-Textfield) */
259293
& .spectrum-Textfield .spectrum-Textfield-input {
260294
outline: none;
261295
border-radius: 0;
262-
263-
/* todo: this overwrites the funky calc to accommodate the buttons and the padding and the icon etc. how do you fix that? */
264-
/* ensures the unstyled input respects the min-inline-size of .spectrum-NumberField */
265-
inline-size: 100%;
266296
}
267297
}
268298

@@ -275,27 +305,19 @@
275305

276306
border: var(--spectrum-numberfield-border-width) solid var(--spectrum-numberfield-border-color-default);
277307
padding-inline-start: var(--spectrum-numberfield-spacing-inline-edge-to-text);
278-
padding-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text);
308+
padding-inline-end: var(--spectrum-numberfield-button-container-size);
279309
border-radius: var(--spectrum-numberfield-border-radius);
280310

281311
/* accommodate stepper buttons and validation icons */
282-
&.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon,
283-
&.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
284-
/* stepper buttons' inline size + validation icons-to-stepper spacing */
285-
inset-inline-end: calc(calc(2 * var(--spectrum-numberfield-button-size)) + var(--spectrum-numberfield-spacing-validation-icon-to-stepper));
286-
287-
/* accommodate validation icons when stepper buttons are hidden */
288-
.spectrum-NumberField.hide-stepper & {
289-
inset-inline-end: var(--spectrum-numberfield-spacing-validation-icon-to-stepper-hidden);
290-
}
312+
&.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {
313+
inset-inline-end: var(--spectrum-numberfield-button-container-size);
291314
}
292315
}
293316

294317
/* unstyled input element */
295318
.spectrum-NumberField-input {
296319
padding-inline-start: 0;
297-
padding-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text);
298-
inline-size: calc(var(--spectrum-numberfield-inline-size) - calc(var(--spectrum-numberfield-button-size)* 2) - var(--spectrum-numberfield-button-inline-offset) - var(--spectrum-numberfield-spacing-min-inline-end-text-to-stepper));
320+
padding-inline-end: var(--spectrum-numberfield-spacing-min-inline-end-text-to-stepper);
299321
border: none;
300322
min-inline-size: 100%;
301323
block-size: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--spectrum-numberfield-border-width) * 2);

0 commit comments

Comments
 (0)