Skip to content

Commit 39cfe76

Browse files
marissahuysentruytmarissahuysentruyt
committed
fix(stepper): fix focus and focus hover states
- fixes the focus & focus hover states, so that hovering over either element (the textfield OR the stepper buttons) will trigger the SAME border color for both elements. - removed some of the :not(disabled) to simplify selectors. - add keyboardfocused+hovered test - keyboardfocused+hovered states showcase hovering over any part of the element triggers the SAME border color for the textfield and the infield buttons - corrects the s1 borders for disabled steppers in quiet & default variants - corrects the focus+hover state in express - metadata updated and removal of code/TODO comments
1 parent d3f2d56 commit 39cfe76

File tree

6 files changed

+110
-99
lines changed

6 files changed

+110
-99
lines changed

‎components/stepper/dist/metadata.json

+35-26
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,60 @@
44
".spectrum-Stepper",
55
".spectrum-Stepper--quiet",
66
".spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input",
7+
".spectrum-Stepper--quiet.is-disabled",
78
".spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
89
".spectrum-Stepper--quiet:after",
10+
".spectrum-Stepper--quiet:not(.is-disabled):focus-visible",
911
".spectrum-Stepper-button",
1012
".spectrum-Stepper-buttons",
1113
".spectrum-Stepper-input",
1214
".spectrum-Stepper.hide-stepper .spectrum-Stepper-input",
1315
".spectrum-Stepper.is-disabled",
16+
".spectrum-Stepper.is-focused",
17+
".spectrum-Stepper.is-focused.is-hover",
18+
".spectrum-Stepper.is-focused:hover",
1419
".spectrum-Stepper.is-focused:not(.is-disabled)",
1520
".spectrum-Stepper.is-focused:not(.is-disabled):hover",
21+
".spectrum-Stepper.is-hover:focus",
22+
".spectrum-Stepper.is-hover:focus-visible",
23+
".spectrum-Stepper.is-hover:not(.is-disabled)",
1624
".spectrum-Stepper.is-invalid",
1725
".spectrum-Stepper.is-invalid.is-focused",
26+
".spectrum-Stepper.is-invalid.is-focused.is-hover",
1827
".spectrum-Stepper.is-invalid.is-focused:hover",
28+
".spectrum-Stepper.is-invalid.is-hover:focus",
1929
".spectrum-Stepper.is-invalid.is-keyboardFocused",
30+
".spectrum-Stepper.is-invalid.is-keyboardFocused:hover",
2031
".spectrum-Stepper.is-invalid:focus",
2132
".spectrum-Stepper.is-invalid:focus-visible",
33+
".spectrum-Stepper.is-invalid:focus-visible:hover",
2234
".spectrum-Stepper.is-invalid:focus:hover",
23-
".spectrum-Stepper.is-invalid:hover",
35+
".spectrum-Stepper.is-keyboardFocused",
36+
".spectrum-Stepper.is-keyboardFocused.is-hover",
37+
".spectrum-Stepper.is-keyboardFocused:hover",
2438
".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)",
2539
".spectrum-Stepper.spectrum-Stepper--quiet",
26-
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled)",
27-
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled):hover",
40+
".spectrum-Stepper.spectrum-Stepper--quiet.is-disabled",
41+
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused",
42+
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:hover",
2843
".spectrum-Stepper.spectrum-Stepper--quiet.is-invalid",
44+
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused",
45+
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:hover",
2946
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
30-
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover",
31-
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus",
32-
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover",
47+
".spectrum-Stepper.spectrum-Stepper--quiet:focus",
48+
".spectrum-Stepper.spectrum-Stepper--quiet:focus-visible",
49+
".spectrum-Stepper.spectrum-Stepper--quiet:focus-visible:hover",
50+
".spectrum-Stepper.spectrum-Stepper--quiet:focus:hover",
3351
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
3452
".spectrum-Stepper.spectrum-Stepper--sizeL",
3553
".spectrum-Stepper.spectrum-Stepper--sizeM",
3654
".spectrum-Stepper.spectrum-Stepper--sizeS",
3755
".spectrum-Stepper.spectrum-Stepper--sizeXL",
3856
".spectrum-Stepper:before",
39-
".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)",
40-
".spectrum-Stepper:not(.is-disabled) .is-focused",
41-
".spectrum-Stepper:not(.is-disabled) .is-focused:hover",
57+
".spectrum-Stepper:focus",
58+
".spectrum-Stepper:focus-visible",
59+
".spectrum-Stepper:focus-visible:hover",
60+
".spectrum-Stepper:focus:hover",
4261
".spectrum-Stepper:not(.is-disabled):focus",
4362
".spectrum-Stepper:not(.is-disabled):focus-visible",
4463
".spectrum-Stepper:not(.is-disabled):focus:hover",
@@ -48,6 +67,7 @@
4867
"modifiers": [
4968
"--mod-stepper-animation-duration",
5069
"--mod-stepper-border-color",
70+
"--mod-stepper-border-color-disabled",
5171
"--mod-stepper-border-color-focus",
5272
"--mod-stepper-border-color-focus-hover",
5373
"--mod-stepper-border-color-focus-hover-invalid",
@@ -63,11 +83,6 @@
6383
"--mod-stepper-button-width",
6484
"--mod-stepper-button-width-quiet",
6585
"--mod-stepper-buttons-background-color",
66-
"--mod-stepper-buttons-border-color",
67-
"--mod-stepper-buttons-border-color-focus",
68-
"--mod-stepper-buttons-border-color-focus-hover",
69-
"--mod-stepper-buttons-border-color-hover",
70-
"--mod-stepper-buttons-border-color-keyboard-focus",
7186
"--mod-stepper-buttons-border-style",
7287
"--mod-stepper-buttons-border-width",
7388
"--mod-stepper-focus-indicator-color",
@@ -88,6 +103,7 @@
88103
"--spectrum-stepper-border-color-focus-hover-invalid",
89104
"--spectrum-stepper-border-color-focus-invalid",
90105
"--spectrum-stepper-border-color-hover",
106+
"--spectrum-stepper-border-color-hover-invalid",
91107
"--spectrum-stepper-border-color-invalid",
92108
"--spectrum-stepper-border-color-keyboard-focus",
93109
"--spectrum-stepper-border-color-keyboard-focus-invalid",
@@ -99,11 +115,6 @@
99115
"--spectrum-stepper-button-width",
100116
"--spectrum-stepper-buttons-background-color",
101117
"--spectrum-stepper-buttons-background-color-disabled",
102-
"--spectrum-stepper-buttons-border-color",
103-
"--spectrum-stepper-buttons-border-color-focus",
104-
"--spectrum-stepper-buttons-border-color-focus-hover",
105-
"--spectrum-stepper-buttons-border-color-hover",
106-
"--spectrum-stepper-buttons-border-color-keyboard-focus",
107118
"--spectrum-stepper-buttons-border-style",
108119
"--spectrum-stepper-buttons-border-width",
109120
"--spectrum-stepper-focus-indicator-color",
@@ -121,11 +132,9 @@
121132
"--spectrum-component-height-300",
122133
"--spectrum-component-height-75",
123134
"--spectrum-corner-radius-100",
124-
"--spectrum-disabled-border-color",
125135
"--spectrum-focus-indicator-color",
126136
"--spectrum-focus-indicator-gap",
127137
"--spectrum-focus-indicator-thickness",
128-
"--spectrum-gray-100",
129138
"--spectrum-gray-300",
130139
"--spectrum-gray-50",
131140
"--spectrum-gray-500",
@@ -151,18 +160,14 @@
151160
"--system-stepper-border-color-focus-hover-invalid",
152161
"--system-stepper-border-color-focus-invalid",
153162
"--system-stepper-border-color-hover",
163+
"--system-stepper-border-color-hover-invalid",
154164
"--system-stepper-border-color-invalid",
155165
"--system-stepper-border-color-keyboard-focus",
156166
"--system-stepper-border-color-keyboard-focus-invalid",
157167
"--system-stepper-border-width",
158168
"--system-stepper-button-border-width",
159169
"--system-stepper-button-border-width-disabled",
160-
"--system-stepper-buttons-background-color",
161170
"--system-stepper-buttons-background-color-disabled",
162-
"--system-stepper-buttons-border-color",
163-
"--system-stepper-buttons-border-color-focus",
164-
"--system-stepper-buttons-border-color-hover",
165-
"--system-stepper-buttons-border-color-keyboard-focus",
166171
"--system-stepper-buttons-border-style",
167172
"--system-stepper-buttons-border-width",
168173
"--system-stepper-quiet-button-edge-to-fill",
@@ -184,7 +189,11 @@
184189
"--mod-textfield-background-color",
185190
"--mod-textfield-border-color",
186191
"--mod-textfield-border-color-disabled",
192+
"--mod-textfield-border-color-focus",
187193
"--mod-textfield-border-color-hover",
194+
"--mod-textfield-border-color-invalid-focus",
195+
"--mod-textfield-border-color-invalid-hover",
196+
"--mod-textfield-border-color-keyboard-focus",
188197
"--mod-textfield-border-width",
189198
"--mod-textfield-focus-indicator-color",
190199
"--mod-textfield-focus-indicator-width",

‎components/stepper/index.css

+62-64
Original file line numberDiff line numberDiff line change
@@ -116,23 +116,29 @@
116116
--mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus));
117117
}
118118

119+
&:not(.is-disabled).is-hover,
119120
&:not(.is-disabled):hover {
120121
--mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
121122
}
122123

123-
&:not(.is-disabled).is-focused,
124-
&:not(.is-disabled):focus {
124+
&.is-focused,
125+
&:focus {
125126
--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
126-
--mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
127127

128+
&.is-hover,
128129
&:hover {
129130
--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
130-
--mod-stepper-buttons-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
131131
}
132132
}
133133

134-
&:not(.is-disabled).is-keyboardFocused {
134+
&.is-keyboardFocused,
135+
&:focus-visible {
135136
--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
137+
138+
&.is-hover,
139+
&:hover {
140+
--mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
141+
}
136142
}
137143

138144
&.spectrum-Stepper--quiet {
@@ -151,76 +157,64 @@
151157
}
152158

153159
&.is-invalid {
154-
--mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default));
160+
--mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
155161
}
156162
}
157163
}
158164

159165
/* --- Component-level passthroughs for nested components --- */
160166
/* @passthrough start -- MODS for sub components */
161167
.spectrum-Stepper {
162-
--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color));
163-
--mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color);
168+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
164169
--mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width));
165170

166171
--mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
167-
--mod-textfield-border-color: var(--spectrum-stepper-border-color);
172+
--mod-textfield-border-color: var(--mod-stepper-border-color, var(--spectrum-stepper-border-color));
173+
--mod-textfield-border-color-hover: var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-hover));
174+
--mod-textfield-border-color-focus: var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-focus));
175+
--mod-textfield-border-color-keyboard-focus: var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-keyboard-focus));
168176

169177
&:not(.spectrum-Stepper--quiet) {
170178
--mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
171179
}
172180

173-
&:hover:not(.is-invalid, .is-disabled, .is-focused) {
174-
--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover));
175-
}
176-
177-
&:not(.is-disabled) {
178-
.is-focused,
179-
&:focus {
180-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
181-
--mod-textfield-focus-indicator-width: 0;
182-
183-
&:hover {
184-
/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- allows for --spectrum-stepper-buttons-border-color-focus-hover to be defined outside of current context */
185-
--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover));
186-
--mod-textfield-focus-indicator-width: 0;
187-
--mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
188-
}
189-
}
181+
&:not(.is-disabled).is-keyboardFocused,
182+
&:focus-visible {
183+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
184+
--mod-textfield-focus-indicator-width: 0;
185+
--mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
190186

191-
&.is-keyboardFocused,
192-
&:focus-visible {
193-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
194-
--mod-textfield-focus-indicator-width: 0;
195-
--mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
196-
197-
/* keyboard focus indicator is visible */
198-
outline: var(--spectrum-stepper-focus-indicator-width) solid;
199-
outline-color: var(--spectrum-stepper-focus-indicator-color);
200-
outline-offset: var(--spectrum-stepper-focus-indicator-gap);
201-
}
187+
/* keyboard focus indicator is visible */
188+
outline: var(--spectrum-stepper-focus-indicator-width) solid;
189+
outline-color: var(--spectrum-stepper-focus-indicator-color);
190+
outline-offset: var(--spectrum-stepper-focus-indicator-gap);
202191
}
203192

204193
&.is-invalid {
205-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)));
194+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-invalid)));
206195
--mod-textfield-icon-spacing-inline-start-invalid: 0;
207-
208-
&:hover {
209-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)));
210-
}
196+
--mod-textfield-border-color-invalid-focus: var(--spectrum-stepper-border-color-focus-invalid);
211197

212198
&.is-focused,
213199
&:focus {
214-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)));
200+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-focus-invalid)));
215201

202+
&.is-hover,
216203
&:hover {
217204
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));
205+
--mod-textfield-border-color-invalid-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));
218206
}
219207
}
220208

221209
&.is-keyboardFocused,
222210
&:focus-visible {
223211
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)));
212+
--mod-textfield-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)));
213+
214+
&:hover {
215+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));
216+
--mod-textfield-border-color-invalid-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));
217+
}
224218
}
225219
}
226220

@@ -240,30 +234,29 @@
240234
--mod-textfield-background-color: transparent;
241235
--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
242236

243-
&:not(.is-disabled) {
244-
&:hover {
245-
--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
246-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
247-
}
237+
&.is-disabled {
238+
--mod-infield-button-border-color-quiet-disabled: var(--spectrum-stepper-border-color-disabled);
239+
--mod-textfield-border-color-disabled: var(--mod-stepper-border-color-disabled, var(--spectrum-stepper-border-color-disabled));
240+
}
248241

249-
/* quiet focus */
250-
&.is-focused,
251-
&:focus {
252-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
242+
/* quiet focus */
243+
&.is-focused,
244+
&:focus {
245+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
253246

254-
/* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */
255-
&:hover {
256-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
257-
}
247+
&:hover {
248+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
258249
}
250+
}
259251

260-
&.is-keyboardFocused {
261-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
252+
&.is-keyboardFocused,
253+
&:focus-visible {
254+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
255+
--mod-textfield-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
262256

263-
/* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */
264-
&:hover {
265-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
266-
}
257+
&:hover {
258+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
259+
--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
267260
}
268261
}
269262
}
@@ -305,7 +298,7 @@
305298
block-size: var(--spectrum-stepper-height);
306299
inline-size: var(--spectrum-stepper-button-width);
307300

308-
border-color: var(--spectrum-stepper-border-color);
301+
border-color: var(--mod-stepper-border-color, var(--spectrum-stepper-border-color));
309302
border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style));
310303
border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width)));
311304
border-inline-start-width: 0;
@@ -352,7 +345,12 @@
352345
}
353346

354347
/* quiet hover */
355-
&.is-keyboardFocused:not(.is-disabled) {
348+
&:not(.is-disabled).is-keyboardFocused,
349+
&:not(.is-disabled):focus-visible {
356350
outline: none;
357351
}
352+
353+
&.is-disabled {
354+
border-color: var(--spectrum-stepper-border-color);
355+
}
358356
}

‎components/stepper/stories/stepper.test.js

+5
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ export const StepperGroup = Variants({
4747
testHeading: "Keyboard-focused",
4848
isKeyboardFocused: true,
4949
},
50+
{
51+
testHeading: "Keyboard-focused + hovered",
52+
isKeyboardFocused: true,
53+
isHovered: true,
54+
},
5055
{
5156
testHeading: "Disabled + hovered",
5257
isDisabled: true,

0 commit comments

Comments
 (0)