Skip to content

Commit e213843

Browse files
snowystingersnowystinger
authored
Chromatic for numberfield (#1573)
1 parent 6d23997 commit e213843

File tree

5 files changed

+323
-13
lines changed

5 files changed

+323
-13
lines changed

‎packages/@adobe/spectrum-css-temp/components/stepper/index.css‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,30 @@ governing permissions and limitations under the License.
3939
border-radius: var(--spectrum-border-radius);
4040
transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
4141

42-
&:not(.spectrum-Stepper--quiet):not(.spectrum-Stepper--showStepper) .spectrum-Stepper-input {
43-
border-inline-end-width: var(--spectrum-stepper-border-size-default);
44-
border-inline-end-style: solid;
45-
border-start-end-radius: var(--spectrum-border-radius);
46-
border-end-end-radius: var(--spectrum-border-radius);
42+
&:not(.spectrum-Stepper--quiet):not(.spectrum-Stepper--showStepper) {
43+
.spectrum-Stepper-input {
44+
border-inline-end-width: var(--spectrum-stepper-border-size-default);
45+
border-inline-end-style: solid;
46+
border-start-end-radius: var(--spectrum-border-radius);
47+
border-end-end-radius: var(--spectrum-border-radius);
48+
}
49+
50+
&.is-disabled .spectrum-Stepper-input {
51+
border-inline-end-width: 0px;
52+
}
4753
}
4854

49-
&.is-disabled:not(.spectrum-Stepper--quiet) .spectrum-Stepper-input {
50-
border: none;
55+
&.is-disabled:not(.spectrum-Stepper--quiet):not(.is-invalid) {
56+
.spectrum-Stepper-input {
57+
border: none;
58+
}
59+
}
60+
61+
&.is-disabled.is-invalid:not(.spectrum-Stepper--quiet):not(.spectrum-Stepper--showStepper) {
62+
.spectrum-Stepper-input {
63+
border-inline-end-width: 1px;
64+
border-inline-end-style: solid;
65+
}
5166
}
5267
}
5368

@@ -136,6 +151,14 @@ governing permissions and limitations under the License.
136151
grid-template-areas: 'decrement field increment';
137152
inline-size: var(--spectrum-stepper-default-width-mobile);
138153

154+
&:not(.spectrum-Stepper--quiet):not(.is-disabled),
155+
&:not(.spectrum-Stepper--quiet).is-invalid {
156+
.spectrum-Stepper-input {
157+
border-inline-end-width: 1px;
158+
border-inline-end-style: solid;
159+
}
160+
}
161+
139162
.spectrum-Stepper-input {
140163
border-start-start-radius: var(--spectrum-stepper-border-radius-reset);
141164
border-start-end-radius: var(--spectrum-stepper-border-radius-reset);
@@ -151,6 +174,8 @@ governing permissions and limitations under the License.
151174
padding-block-start: 0px;
152175
}
153176
.spectrum-Stepper-button--stepUp {
177+
border-inline-end-style: solid;
178+
border-inline-start-style: none;
154179
border-start-start-radius: var(--spectrum-stepper-border-radius-reset);
155180
border-start-end-radius: var(--spectrum-border-radius);
156181
border-end-start-radius: var(--spectrum-stepper-border-radius-reset);

‎packages/@adobe/spectrum-css-temp/components/stepper/skin.css‎

Lines changed: 88 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,27 @@ governing permissions and limitations under the License.
7171

7272
&:focus,
7373
&:active {
74+
.spectrum-Stepper-input {
75+
border-color: var(--spectrum-textfield-border-color-key-focus);
76+
}
7477
.spectrum-Stepper-button {
7578
border-color: var(--spectrum-textfield-border-color-key-focus);
7679
}
7780

81+
&:disabled,
82+
&.is-disabled {
83+
.spectrum-Stepper-input {
84+
border-color: var(--spectrum-textfield-quiet-border-color-disabled);
85+
}
86+
}
87+
7888
&:invalid,
7989
&.is-invalid {
8090
border-color: var(--spectrum-textfield-border-color-error);
91+
92+
.spectrum-Stepper-input {
93+
border-color: var(--spectrum-textfield-border-color-error);
94+
}
8195
}
8296
}
8397

@@ -143,10 +157,22 @@ governing permissions and limitations under the License.
143157
.spectrum-Stepper-button {
144158
&:disabled,
145159
&.is-disabled {
160+
border-color: var(--spectrum-textfield-quiet-border-color);
161+
}
162+
}
163+
&:disabled,
164+
&.is-disabled {
165+
.spectrum-Stepper-button {
146166
border-color: var(--spectrum-textfield-quiet-border-color-disabled);
147167
}
148168
}
149169

170+
&:hover {
171+
.spectrum-Stepper-button--stepDown {
172+
border-color: var(--spectrum-textfield-quiet-border-color-hover);
173+
}
174+
}
175+
150176
&:focus {
151177
.spectrum-Stepper-button--stepDown {
152178
border-color: var(--spectrum-textfield-border-color-key-focus);
@@ -165,6 +191,7 @@ governing permissions and limitations under the License.
165191

166192
&:invalid,
167193
&.is-invalid {
194+
box-shadow: none;
168195
.spectrum-Stepper-button--stepDown {
169196
box-shadow: 0 1px 0 0 var(--spectrum-textfield-border-color-error);
170197
}
@@ -231,11 +258,6 @@ governing permissions and limitations under the License.
231258

232259
&.spectrum-Stepper--quiet.spectrum-Stepper--isMobile {
233260
.spectrum-Stepper-button {
234-
&:disabled,
235-
&.is-disabled {
236-
border-color: var(--spectrum-textfield-quiet-border-color-disabled);
237-
}
238-
239261
&.is-active {
240262
border-color: var(--spectrum-actionbutton-border-color-hover);
241263
color: var(--spectrum-actionbutton-text-color-hover);
@@ -246,6 +268,13 @@ governing permissions and limitations under the License.
246268
}
247269
}
248270

271+
272+
&.is-hovered {
273+
.spectrum-Stepper-button {
274+
border-color: var(--spectrum-actionbutton-border-color-hover);
275+
}
276+
}
277+
249278
&:focus {
250279
.spectrum-Stepper-button {
251280
border-color: var(--spectrum-textfield-border-color-key-focus);
@@ -461,11 +490,65 @@ governing permissions and limitations under the License.
461490
}
462491
}
463492
}
493+
&:disabled,
494+
&.is-disabled {
495+
.spectrum-Stepper-button.spectrum-Stepper-button--stepDown {
496+
&.is-disabled {
497+
border-color: var(--spectrum-textfield-quiet-border-color-disabled);
498+
}
499+
}
500+
}
464501
&.is-focused {
465502
.spectrum-Stepper-button.spectrum-Stepper-button--stepDown {
466503
&.is-disabled {
467504
border-color: var(--spectrum-actionbutton-border-color-key-focus);
468505
}
469506
}
470507
}
508+
&:invalid,
509+
&.is-invalid {
510+
.spectrum-Stepper-button.spectrum-Stepper-button--stepDown {
511+
&.is-disabled {
512+
border-color: var(--spectrum-textfield-border-color-error);
513+
}
514+
}
515+
}
516+
}
517+
518+
.spectrum-Stepper.spectrum-Stepper--quiet.spectrum-Stepper--isMobile.spectrum-Stepper--readonly {
519+
.spectrum-Stepper-button.spectrum-Stepper-button--stepUp {
520+
&.is-disabled {
521+
border-color: var(--spectrum-textfield-quiet-border-color);
522+
}
523+
}
524+
&:hover {
525+
.spectrum-Stepper-button.spectrum-Stepper-button--stepUp {
526+
&.is-disabled {
527+
border-color: var(--spectrum-actionbutton-border-color-hover);
528+
}
529+
}
530+
}
531+
&:disabled,
532+
&.is-disabled {
533+
.spectrum-Stepper-button.spectrum-Stepper-button--stepUp {
534+
&.is-disabled {
535+
border-color: var(--spectrum-textfield-quiet-border-color-disabled);
536+
}
537+
}
538+
}
539+
&.is-focused {
540+
.spectrum-Stepper-button.spectrum-Stepper-button--stepUp {
541+
&.is-disabled {
542+
border-color: var(--spectrum-actionbutton-border-color-key-focus);
543+
}
544+
}
545+
}
546+
&:invalid,
547+
&.is-invalid {
548+
.spectrum-Stepper-button.spectrum-Stepper-button--stepUp {
549+
&.is-disabled {
550+
border-color: var(--spectrum-textfield-border-color-error);
551+
}
552+
}
553+
}
471554
}

‎packages/@react-spectrum/label/src/Field.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
2929
labelProps,
3030
elementType,
3131
wrapperClassName,
32+
3233
...otherProps
3334
} = props;
3435
let {styleProps} = useStyleProps(otherProps);
@@ -46,7 +47,10 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
4647
);
4748

4849
children = React.cloneElement(children, mergeProps(children.props, {
49-
className: classNames(labelStyles, 'spectrum-Field-field')
50+
className: classNames(
51+
labelStyles,
52+
'spectrum-Field-field'
53+
)
5054
}));
5155

5256
return (

0 commit comments

Comments
 (0)