Skip to content

Commit 76aa89a

Browse files
castastrophecastastrophe
committed
feat(actionmenu): migration to S2
1 parent 1026301 commit 76aa89a

File tree

22 files changed

+633
-333
lines changed

22 files changed

+633
-333
lines changed

‎components/actionbutton/dist/metadata.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,16 @@
1414
".spectrum-ActionButton-label",
1515
".spectrum-ActionButton-label:empty",
1616
".spectrum-ActionButton.is-disabled",
17-
".spectrum-ActionButton.is-selected",
18-
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
19-
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
20-
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
17+
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2118
".spectrum-ActionButton.spectrum-ActionButton--quiet",
22-
".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
23-
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
19+
".spectrum-ActionButton.spectrum-ActionButton--quiet:is(:disabled, .is-disabled, [aria-disabled=\"true\"]):not(:is([aria-pressed=\"true\"], [aria-expanded=\"true\"]))",
20+
".spectrum-ActionButton.spectrum-ActionButton--quiet:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2421
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2522
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2624
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
2725
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
26+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2827
".spectrum-ActionButton::-moz-focus-inner",
2928
".spectrum-ActionButton:active",
3029
".spectrum-ActionButton:after",
@@ -35,6 +34,8 @@
3534
".spectrum-ActionButton:focus-visible:after",
3635
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
3736
".spectrum-ActionButton:hover",
37+
".spectrum-ActionButton:is(:disabled, .is-disabled, [aria-disabled=\"true\"])",
38+
".spectrum-ActionButton:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
3839
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
3940
"a.spectrum-ActionButton"
4041
],

‎components/actionbutton/index.css

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ governing permissions and limitations under the License.
4747
--spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
4848

4949
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
50-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
50+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium));
5151
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
5252
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
5353
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
@@ -65,7 +65,7 @@ governing permissions and limitations under the License.
6565
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
6666
--spectrum-actionbutton-background-color-disabled: transparent;
6767

68-
&.is-selected {
68+
&:is([aria-pressed="true"], [aria-expanded="true"]) {
6969
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
7070
}
7171
}
@@ -118,7 +118,8 @@ governing permissions and limitations under the License.
118118
}
119119
}
120120

121-
&.is-selected {
121+
/* expanded is specific to action menu when the menu is open */
122+
&:is([aria-pressed="true"], [aria-expanded="true"]) {
122123
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
123124
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
124125
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
@@ -178,7 +179,7 @@ governing permissions and limitations under the License.
178179
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
179180
--spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
180181
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
181-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
182+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small));
182183
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
183184
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50);
184185
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
@@ -195,7 +196,7 @@ governing permissions and limitations under the License.
195196
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
196197
--spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
197198
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
198-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
199+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small));
199200
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
200201
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75);
201202
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
@@ -212,7 +213,7 @@ governing permissions and limitations under the License.
212213
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
213214
--spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
214215
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
215-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
216+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large));
216217
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
217218
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200);
218219
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
@@ -227,7 +228,7 @@ governing permissions and limitations under the License.
227228
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
228229
--spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
229230
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
230-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
231+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large));
231232
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
232233
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
233234
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
@@ -252,6 +253,18 @@ governing permissions and limitations under the License.
252253
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
253254
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
254255

256+
transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
257+
258+
&::after {
259+
position: absolute;
260+
inset: 0;
261+
margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
262+
border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
263+
transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
264+
pointer-events: none;
265+
content: "";
266+
}
267+
255268
&:hover {
256269
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
257270
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
@@ -260,6 +273,13 @@ governing permissions and limitations under the License.
260273
&:focus-visible {
261274
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
262275
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
276+
277+
box-shadow: none;
278+
outline: none;
279+
280+
&::after {
281+
box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
282+
}
263283
}
264284

265285
&:active {
@@ -268,8 +288,9 @@ governing permissions and limitations under the License.
268288
transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
269289
}
270290

271-
&:disabled,
272-
&.is-disabled {
291+
/* ideal when we want to disable the button but still allow it's content to be focused */
292+
&:is(:disabled, .is-disabled, [aria-disabled="true"]) {
293+
/* @todo: should pointer events be disabled? */
273294
background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
274295
color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
275296
}
@@ -313,36 +334,13 @@ a.spectrum-ActionButton {
313334

314335
.spectrum-ActionButton-hold {
315336
position: absolute;
316-
inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
317-
inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
337+
inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
338+
inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
339+
display: block;
318340
color: inherit;
319341
transform: var(--spectrum-logical-rotation);
320342
}
321343

322-
/* Focus indicator */
323-
.spectrum-ActionButton {
324-
transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
325-
326-
&::after {
327-
position: absolute;
328-
inset: 0;
329-
margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
330-
border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
331-
transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
332-
pointer-events: none;
333-
content: "";
334-
}
335-
336-
&:focus-visible {
337-
box-shadow: none;
338-
outline: none;
339-
340-
&::after {
341-
box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
342-
}
343-
}
344-
}
345-
346344
@media (forced-colors: active) {
347345
.spectrum-ActionButton {
348346
/**
@@ -388,7 +386,7 @@ a.spectrum-ActionButton {
388386
--highcontrast-actionbutton-background-color-disabled: Canvas;
389387
--highcontrast-actionbutton-content-color-default: CanvasText;
390388

391-
&:disabled:not(.is-selected) {
389+
&:is(:disabled, .is-disabled, [aria-disabled="true"]):not(:is([aria-pressed="true"], [aria-expanded="true"])) {
392390
--highcontrast-actionbutton-border-color: Canvas;
393391
}
394392
}
@@ -400,8 +398,7 @@ a.spectrum-ActionButton {
400398
--highcontrast-actionbutton-border-color: Highlight;
401399
}
402400

403-
/* Selected always shows as a solid highlighted color. */
404-
&.is-selected {
401+
&:is([aria-pressed="true"], [aria-expanded="true"]) {
405402
--highcontrast-actionbutton-border-color: Highlight;
406403
--highcontrast-actionbutton-background-color-default: Highlight;
407404
--highcontrast-actionbutton-content-color-default: HighlightText;

‎components/actionbutton/stories/actionbutton.stories.js

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
22
import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
4-
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
5-
import metadata from "../dist/metadata.json";
6-
import packageJson from "../package.json";
4+
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isOpen, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
75
import { ActionButtonGroup } from "./actionbutton.test.js";
86
import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js";
97

8+
// Local assets to render the component styles and structure
9+
import metadata from "../dist/metadata.json";
10+
import packageJson from "../package.json";
11+
1012
/**
1113
* The action button component represents an action a user can take.
1214
*
@@ -56,8 +58,8 @@ export default {
5658
control: "boolean",
5759
},
5860
hasPopup: {
59-
name: "Has popup",
60-
description: "If the button triggers a popup action, this should be set to reflect the type of element that pops-up.",
61+
name: "Has pop-up",
62+
description: "If the button triggers a pop-up action, this should be set to reflect the type of element that pops-up.",
6163
type: { name: "string" },
6264
table: {
6365
type: { summary: "string" },
@@ -66,6 +68,22 @@ export default {
6668
control: "select",
6769
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
6870
},
71+
hasLongPress: {
72+
name: "Long press",
73+
description: "If the trigger supports a long-press action which triggers the menu, this should be set to true.",
74+
type: { name: "boolean" },
75+
table: {
76+
type: { summary: "boolean" },
77+
category: "Accessibility",
78+
},
79+
control: "boolean",
80+
},
81+
isOpen: {
82+
...isOpen,
83+
name: "Pop-up is open",
84+
description: "When the button triggers a pop-up, this should be true when the pop-up is open.",
85+
if: { arg: "hasPopup", truthy: true },
86+
},
6987
staticColor: {
7088
...staticColor,
7189
if: { arg: "isEmphasized", truthy: false },
@@ -77,6 +95,7 @@ export default {
7795
isQuiet: false,
7896
isEmphasized: false,
7997
hasPopup: "false",
98+
hasLongPress: false,
8099
isActive: false,
81100
isFocused: false,
82101
isHovered: false,

‎components/actionbutton/stories/actionbutton.test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ export const ActionButtons = (args, context) => {
1717
${Template({
1818
...args,
1919
hasPopup: "true",
20+
hasLongPress: true,
2021
hideLabel: true,
2122
}, context)}
2223
${Template({
2324
...args,
2425
iconName: undefined,
2526
hasPopup: "true",
27+
hasLongPress: true,
2628
}, context)}
2729
</div>
2830
`;

‎components/actionbutton/stories/template.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ export const Template = ({
5454
isFocused = false,
5555
isActive = false,
5656
isDisabled = false,
57+
isOpen = false,
5758
hasPopup = "false",
59+
hasLongPress = false,
5860
popupId,
5961
hideLabel = false,
6062
staticColor,
@@ -72,7 +74,8 @@ export const Template = ({
7274
aria-label=${ifDefined(hideLabel ? label : undefined)}
7375
aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
7476
aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
75-
aria-pressed=${isSelected ? "true" : "false"}
77+
aria-pressed=${ifDefined(isSelected ? "true" : undefined)}
78+
aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
7679
class=${classMap({
7780
[rootClass]: true,
7881
[`${rootClass}--size${size?.toUpperCase()}`]:
@@ -82,14 +85,14 @@ export const Template = ({
8285
[`${rootClass}--static${capitalize(staticColor)}`]:
8386
typeof staticColor !== "undefined",
8487
["is-disabled"]: isDisabled,
85-
["is-selected"]: isSelected,
8688
["is-hover"]: isHovered,
8789
["is-focus-visible"]: isFocused,
8890
["is-active"]: isActive,
8991
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
9092
})}
9193
id=${id}
9294
data-testid=${testId ?? id}
95+
popovertarget=${ifDefined(hasPopup && hasPopup !== "false" ? popupId : undefined)}
9396
role=${ifDefined(role)}
9497
style=${styleMap(customStyles)}
9598
?disabled=${isDisabled}
@@ -105,7 +108,7 @@ export const Template = ({
105108
updateArgs({ isFocused: false });
106109
}}
107110
>
108-
${when(hasPopup && hasPopup !== "false", () =>
111+
${when(hasLongPress && hasPopup && hasPopup !== "false", () =>
109112
Icon({
110113
size,
111114
iconName: "CornerTriangle" + ({
@@ -138,7 +141,7 @@ export const Template = ({
138141

139142
/**
140143
* Displays multiple action buttons in a row, with different combinations of
141-
* label, icon, and hold button (has popup).
144+
* label, icon, and hold button (has pop-up).
142145
*/
143146
export const ActionButtonsWithIconOptions = (args, context) => Container({
144147
withBorder: false,
@@ -162,19 +165,21 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
162165
...args,
163166
hideLabel: true,
164167
hasPopup: "true",
168+
hasLongPress: true,
165169
}, context),
166170
Template({
167171
...args,
168172
iconName: undefined,
169173
hasPopup: "true",
174+
hasLongPress: true,
170175
}, context)
171176
],
172177
}, context);
173178

174179
/**
175180
* Displays two action buttons in a row:
176181
* - icon only action button
177-
* - icon only action button with hold button (has popup)
182+
* - icon only action button with hold button (has pop-up)
178183
*/
179184
export const IconOnlyOption = (args, context) => Container({
180185
withBorder: false,
@@ -187,12 +192,14 @@ export const IconOnlyOption = (args, context) => Container({
187192
...args,
188193
hideLabel: true,
189194
hasPopup: "true",
195+
hasLongPress: true,
190196
}, context),
191197
Template({
192198
...args,
193199
hideLabel: true,
194200
isQuiet: true,
195201
hasPopup: "true",
202+
hasLongPress: true,
196203
}, context),
197204
],
198205
}, context);

‎components/actiongroup/dist/metadata.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
1515
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
1616
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
17-
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
1817
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
1918
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
2019
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
20+
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2121
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
2222
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
2323
".spectrum-ActionGroup--sizeL",

‎components/actiongroup/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
103103
}
104104

105-
&.is-selected {
105+
&:is([aria-pressed="true"], [aria-expanded="true"]) {
106106
z-index: 1;
107107
}
108108

0 commit comments

Comments
 (0)