Skip to content

Commit 9cd39ed

Browse files
castastrophecastastrophe
committed
fix: updates after feedback from design
1 parent 711d5e8 commit 9cd39ed

38 files changed

+630
-857
lines changed

‎.storybook/decorators/arg-events.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ export const withArgEvents = makeDecorator({
1313
parameterName: "argEvents",
1414
wrapper: (StoryFn, context) => {
1515
/** @type {[Args, (newArgs: Partial<Args>) => void, (argNames?: (keyof Args)[]) => void]} */
16-
const [, updateArgs, resetArgs] = useArgs(Object.keys(context.args));
16+
const [, updateArgs] = useArgs(context.args);
1717

1818
// Bind the updateArgs function for use in nested templates
1919
context.updateArgs = updateArgs;
20-
context.resetArgs = resetArgs;
2120

2221
return StoryFn(context);
2322
},

‎components/accordion/stories/accordion.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@ export default {
118118
status: {
119119
type: "migrated",
120120
},
121-
tags: ["migrated"],
122121
},
122+
tags: ["migrated"],
123123
};
124124

125125
/**

‎components/actionbar/stories/actionbar.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ export default {
7575
status: {
7676
type: "migrated",
7777
},
78-
tags: ["migrated"],
7978
},
79+
tags: ["migrated"],
8080
};
8181

8282
export const Default = ActionBarGroup.bind({});

‎components/actionbar/stories/template.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,6 @@ export const Template = ({
7474
],
7575
}, context),
7676
],
77-
popoverHeight: 42,
78-
popoverWidth: 500,
7977
}, context)}
8078
</div>
8179
`;

‎components/actionbutton/dist/metadata.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
".spectrum-ActionButton-label",
1515
".spectrum-ActionButton-label:empty",
1616
".spectrum-ActionButton.is-disabled",
17-
".spectrum-ActionButton.spectrum-ActionButton--emphasized:has([aria-pressed=\"true\"])",
17+
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
1818
".spectrum-ActionButton.spectrum-ActionButton--quiet",
19-
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:has([aria-pressed=\"true\"]))",
20-
".spectrum-ActionButton.spectrum-ActionButton--quiet:has([aria-pressed=\"true\"])",
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\"])",
2121
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2222
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
23-
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:has([aria-pressed=\"true\"])",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2424
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
2525
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
26-
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:has([aria-pressed=\"true\"])",
26+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"], [aria-expanded=\"true\"])",
2727
".spectrum-ActionButton::-moz-focus-inner",
2828
".spectrum-ActionButton:active",
2929
".spectrum-ActionButton:after",
@@ -33,8 +33,9 @@
3333
".spectrum-ActionButton:focus-visible",
3434
".spectrum-ActionButton:focus-visible:after",
3535
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
36-
".spectrum-ActionButton:has([aria-pressed=\"true\"])",
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-
&:has([aria-pressed="true"]) {
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-
&:has([aria-pressed="true"]) {
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(:has([aria-pressed="true"])) {
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-
&:has([aria-pressed="true"]) {
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: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ export default {
5858
control: "boolean",
5959
},
6060
hasPopup: {
61-
name: "Has popup",
62-
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.",
6363
type: { name: "string" },
6464
table: {
6565
type: { summary: "string" },
@@ -68,10 +68,20 @@ export default {
6868
control: "select",
6969
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
7070
},
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+
},
7181
isOpen: {
7282
...isOpen,
73-
name: "Popup is open",
74-
description: "When the button triggers a popup, this should be true when the popup is open.",
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.",
7585
if: { arg: "hasPopup", truthy: true },
7686
},
7787
staticColor: {
@@ -85,6 +95,7 @@ export default {
8595
isQuiet: false,
8696
isEmphasized: false,
8797
hasPopup: "false",
98+
hasLongPress: false,
8899
isActive: false,
89100
isFocused: false,
90101
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: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const Template = ({
5656
isDisabled = false,
5757
isOpen = false,
5858
hasPopup = "false",
59-
showPopup = false,
59+
hasLongPress = false,
6060
popupId,
6161
hideLabel = false,
6262
staticColor,
@@ -74,7 +74,7 @@ export const Template = ({
7474
aria-label=${ifDefined(hideLabel ? label : undefined)}
7575
aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
7676
aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
77-
aria-pressed=${isSelected ? "true" : "false"}
77+
aria-pressed=${ifDefined(isSelected ? "true" : undefined)}
7878
aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
7979
class=${classMap({
8080
[rootClass]: true,
@@ -92,6 +92,7 @@ export const Template = ({
9292
})}
9393
id=${id}
9494
data-testid=${testId ?? id}
95+
popovertarget=${ifDefined(hasPopup && hasPopup !== "false" ? popupId : undefined)}
9596
role=${ifDefined(role)}
9697
style=${styleMap(customStyles)}
9798
?disabled=${isDisabled}
@@ -107,7 +108,7 @@ export const Template = ({
107108
updateArgs({ isFocused: false });
108109
}}
109110
>
110-
${when(showPopup && hasPopup && hasPopup !== "false", () =>
111+
${when(hasLongPress && hasPopup && hasPopup !== "false", () =>
111112
Icon({
112113
size,
113114
iconName: "CornerTriangle" + ({
@@ -140,7 +141,7 @@ export const Template = ({
140141

141142
/**
142143
* Displays multiple action buttons in a row, with different combinations of
143-
* label, icon, and hold button (has popup).
144+
* label, icon, and hold button (has pop-up).
144145
*/
145146
export const ActionButtonsWithIconOptions = (args, context) => Container({
146147
withBorder: false,
@@ -164,19 +165,21 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
164165
...args,
165166
hideLabel: true,
166167
hasPopup: "true",
168+
hasLongPress: true,
167169
}, context),
168170
Template({
169171
...args,
170172
iconName: undefined,
171173
hasPopup: "true",
174+
hasLongPress: true,
172175
}, context)
173176
],
174177
}, context);
175178

176179
/**
177180
* Displays two action buttons in a row:
178181
* - icon only action button
179-
* - icon only action button with hold button (has popup)
182+
* - icon only action button with hold button (has pop-up)
180183
*/
181184
export const IconOnlyOption = (args, context) => Container({
182185
withBorder: false,
@@ -189,12 +192,14 @@ export const IconOnlyOption = (args, context) => Container({
189192
...args,
190193
hideLabel: true,
191194
hasPopup: "true",
195+
hasLongPress: true,
192196
}, context),
193197
Template({
194198
...args,
195199
hideLabel: true,
196200
isQuiet: true,
197201
hasPopup: "true",
202+
hasLongPress: true,
198203
}, context),
199204
],
200205
}, context);

0 commit comments

Comments
 (0)