Skip to content

Commit 904da35

Browse files
castastrophecastastrophe
committed
test(picker): break out tests to resolve failure due to size
1 parent aa466a6 commit 904da35

File tree

10 files changed

+118
-75
lines changed

10 files changed

+118
-75
lines changed

‎components/actionbutton/dist/metadata.json‎

Lines changed: 6 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:has([aria-pressed=\"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:disabled:not(:has([aria-pressed=\"true\"]))",
20+
".spectrum-ActionButton.spectrum-ActionButton--quiet:has([aria-pressed=\"true\"])",
2421
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2522
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:has([aria-pressed=\"true\"])",
2624
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
2725
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
26+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:has([aria-pressed=\"true\"])",
2827
".spectrum-ActionButton::-moz-focus-inner",
2928
".spectrum-ActionButton:active",
3029
".spectrum-ActionButton:after",
@@ -34,6 +33,7 @@
3433
".spectrum-ActionButton:focus-visible",
3534
".spectrum-ActionButton:focus-visible:after",
3635
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
36+
".spectrum-ActionButton:has([aria-pressed=\"true\"])",
3737
".spectrum-ActionButton:hover",
3838
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
3939
"a.spectrum-ActionButton"

‎components/actionbutton/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ governing permissions and limitations under the License.
6666
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
6767
--spectrum-actionbutton-background-color-disabled: transparent;
6868

69-
&.is-selected {
69+
&:has([aria-pressed="true"]) {
7070
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
7171
}
7272
}
@@ -119,7 +119,7 @@ governing permissions and limitations under the License.
119119
}
120120
}
121121

122-
&.is-selected {
122+
&:has([aria-pressed="true"]) {
123123
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
124124
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
125125
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
@@ -389,7 +389,7 @@ a.spectrum-ActionButton {
389389
--highcontrast-actionbutton-background-color-disabled: Canvas;
390390
--highcontrast-actionbutton-content-color-default: CanvasText;
391391

392-
&:disabled:not(.is-selected) {
392+
&:disabled:not(:has([aria-pressed="true"])) {
393393
--highcontrast-actionbutton-border-color: Canvas;
394394
}
395395
}
@@ -402,7 +402,7 @@ a.spectrum-ActionButton {
402402
}
403403

404404
/* Selected always shows as a solid highlighted color. */
405-
&.is-selected {
405+
&:has([aria-pressed="true"]) {
406406
--highcontrast-actionbutton-border-color: Highlight;
407407
--highcontrast-actionbutton-background-color-default: Highlight;
408408
--highcontrast-actionbutton-content-color-default: HighlightText;

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

Lines changed: 9 additions & 3 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
*
@@ -66,6 +68,10 @@ export default {
6668
control: "select",
6769
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
6870
},
71+
isOpen: {
72+
...isOpen,
73+
if: { arg: "hasPopup", truthy: true },
74+
},
6975
staticColor: {
7076
...staticColor,
7177
if: { arg: "isEmphasized", truthy: false },

‎components/actionbutton/stories/template.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const Template = ({
5454
isFocused = false,
5555
isActive = false,
5656
isDisabled = false,
57+
isOpen = false,
5758
hasPopup = "false",
5859
showPopup = false,
5960
popupId,
@@ -74,6 +75,7 @@ export const Template = ({
7475
aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
7576
aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
7677
aria-pressed=${isSelected ? "true" : "false"}
78+
aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
7779
class=${classMap({
7880
[rootClass]: true,
7981
[`${rootClass}--size${size?.toUpperCase()}`]:
@@ -83,7 +85,6 @@ export const Template = ({
8385
[`${rootClass}--static${capitalize(staticColor)}`]:
8486
typeof staticColor !== "undefined",
8587
["is-disabled"]: isDisabled,
86-
["is-selected"]: isSelected,
8788
["is-hover"]: isHovered,
8889
["is-focus-visible"]: isFocused,
8990
["is-active"]: isActive,

‎components/actiongroup/dist/metadata.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
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",
19+
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:has([aria-pressed=\"true\"])",
2020
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
2121
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
2222
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",

‎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+
&:has([aria-pressed="true"]) {
106106
z-index: 1;
107107
}
108108

‎components/menu/stories/template.js‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,36 @@ const Description = ({
246246
</span>
247247
`;
248248

249+
/**
250+
* @param {Object} args
251+
* @param {string} args.rootClass
252+
* @param {string} args.label
253+
* @param {string} args.description
254+
* @param {string} args.thumbnailUrl
255+
* @param {string} args.iconName
256+
* @param {string} args.iconSet
257+
* @param {string} args.exclusiveFeatures
258+
* @param {boolean} args.hasExternalLink
259+
* @param {boolean} args.hasActions
260+
* @param {string} args.id
261+
* @param {number} args.idx
262+
* @param {boolean} args.isActive
263+
* @param {boolean} args.isCollapsible
264+
* @param {boolean} args.isUnavailable
265+
* @param {boolean} args.isDisabled
266+
* @param {boolean} args.isDrillIn
267+
* @param {boolean} args.isFocused
268+
* @param {boolean} args.isHighlighted
269+
* @param {boolean} args.isHovered
270+
* @param {boolean} args.isOpen
271+
* @param {boolean} args.isSelected
272+
* @param {Array<Object>} args.items
273+
* @param {ARIAMixin['role']} args.role
274+
* @param {boolean} args.shouldTruncate
275+
* @param {string} args.size
276+
* @param {string} args.selectionMode
277+
* @param {string} args.value
278+
*/
249279
export const MenuItem = (
250280
{
251281
rootClass = "spectrum-Menu-item",
@@ -304,7 +334,6 @@ export const MenuItem = (
304334
"is-highlighted": isHighlighted,
305335
"is-active": isActive,
306336
"is-focus-visible": isFocused,
307-
"is-selected": isSelected,
308337
"is-disabled": isDisabled,
309338
"is-hover": isHovered,
310339
[`${rootClass}--drillIn`]: isDrillIn,
@@ -317,6 +346,7 @@ export const MenuItem = (
317346
role=${ifDefined(role)}
318347
aria-selected=${isSelected ? "true" : "false"}
319348
aria-disabled=${isDisabled ? "true" : "false"}
349+
aria-expanded=${isOpen ? "true" : "false"}
320350
tabindex=${ifDefined(!isDisabled ? "0" : undefined)}
321351
>
322352
${StartAction({ hasActions, idx, isCollapsible, isDisabled, isSelected, isUnavailable, rootClass, selectionMode, size, context })}

‎components/picker/stories/picker.stories.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
55
import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
66
import metadata from "../dist/metadata.json";
77
import packageJson from "../package.json";
8-
import { PickerGroup } from "./picker.test.js";
8+
import { PickerGroup, PickerGroupVariants } from "./picker.test.js";
99
import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js";
1010

1111
/**
@@ -182,6 +182,17 @@ Default.parameters = {
182182
};
183183

184184
// ********* VRT ONLY ********* //
185+
export const WithVariants = PickerGroupVariants.bind({});
186+
WithVariants.args = {};
187+
WithVariants.tags = ["!autodocs"];
188+
WithVariants.parameters = {
189+
docs: {
190+
story: {
191+
height: "300px",
192+
}
193+
},
194+
};
195+
185196
export const WithForcedColors = PickerGroup.bind({});
186197
WithForcedColors.tags = ["!autodocs", "!dev"];
187198
WithForcedColors.parameters = {

‎components/picker/stories/picker.test.js‎

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,21 @@
11
import { Variants } from "@spectrum-css/preview/decorators";
2-
import { html } from "lit";
32
import { Template } from "./template.js";
43

54
export const PickerGroup = Variants({
6-
Template: (args, context) => html`<div>${Template(args, context)}</div>`,
5+
Template,
76
wrapperStyles: {
87
"align-items": "flex-start",
9-
"min-block-size": "auto",
8+
"min-block-size": "225px",
109
},
1110
testData: [
1211
{
1312
testHeading: "Default, with placeholder",
14-
},
15-
{
16-
testHeading: "Default, with value and text overflow",
17-
currentValue: "The selected value of the picker, with long text the triggers the overflow behavior with ellipsis",
13+
isOpen: true,
1814
},
1915
{
2016
testHeading: "Quiet",
2117
isQuiet: true,
22-
},
23-
{
24-
testHeading: "Side label",
25-
labelPosition: "side",
26-
},
27-
{
28-
testHeading: "Side label, quiet",
29-
labelPosition: "side",
30-
isQuiet: true,
31-
},
32-
{
33-
testHeading: "Side label, alignment with switch",
34-
labelPosition: "side",
35-
withSwitch: true,
36-
},
37-
{
38-
testHeading: "With thumbnail icon",
39-
showWorkflowIcon: true,
40-
contentIconName: "Image",
18+
isOpen: true,
4119
},
4220
],
4321
stateData: [
@@ -86,19 +64,57 @@ export const PickerGroup = Variants({
8664
isDisabled: true,
8765
},
8866
{
89-
testHeading: "Open",
90-
isOpen: true,
67+
testHeading: "Closed",
68+
isOpen: false,
9169
wrapperStyles: {
92-
"min-block-size": "225px",
70+
"min-block-size": "auto",
9371
},
9472
},
9573
{
96-
testHeading: "Open + hover",
97-
isOpen: true,
74+
testHeading: "Closed + hover",
75+
isOpen: false,
9876
isHovered: true,
9977
wrapperStyles: {
100-
"min-block-size": "225px",
78+
"min-block-size": "auto",
10179
},
10280
},
10381
],
10482
});
83+
84+
export const PickerGroupVariants = Variants({
85+
Template,
86+
wrapperStyles: {
87+
"align-items": "flex-start",
88+
"min-block-size": "225px",
89+
},
90+
testData: [
91+
{
92+
testHeading: "Default, with value and text overflow",
93+
currentValue: "The selected value of the picker, with long text the triggers the overflow behavior with ellipsis",
94+
isOpen: true,
95+
},
96+
{
97+
testHeading: "Side label",
98+
labelPosition: "side",
99+
isOpen: true,
100+
},
101+
{
102+
testHeading: "Side label, quiet",
103+
labelPosition: "side",
104+
isQuiet: true,
105+
isOpen: true,
106+
},
107+
{
108+
testHeading: "Side label, alignment with switch",
109+
labelPosition: "side",
110+
withSwitch: true,
111+
isOpen: true,
112+
},
113+
{
114+
testHeading: "With thumbnail icon",
115+
showWorkflowIcon: true,
116+
contentIconName: "Image",
117+
isOpen: true,
118+
},
119+
],
120+
});

‎yarn.lock‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8309,31 +8309,10 @@ __metadata:
83098309
languageName: node
83108310
linkType: hard
83118311

8312-
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
8313-
version: 1.0.30001703
8314-
resolution: "caniuse-lite@npm:1.0.30001703"
8315-
checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91
8316-
languageName: node
8317-
linkType: hard
8318-
8319-
"caniuse-lite@npm:^1.0.30001716":
8320-
version: 1.0.30001717
8321-
resolution: "caniuse-lite@npm:1.0.30001717"
8322-
checksum: 10c0/6c0bb1e5182fd578ebe97ee2203250849754a4e17d985839fab527ad27e125a4c4ffce3ece5505217fedf30ea0bbc17ac9f93e9ac525c0389ccba61c6e8345dc
8323-
languageName: node
8324-
linkType: hard
8325-
8326-
"caniuse-lite@npm:^1.0.30001718":
8327-
version: 1.0.30001721
8328-
resolution: "caniuse-lite@npm:1.0.30001721"
8329-
checksum: 10c0/fa3a8926899824b385279f1f886fe34c5efb1321c9ece1b9df25c8d567a2706db8450cc5b4d969e769e641593e08ea644909324aba93636a43e4949a75f81c4c
8330-
languageName: node
8331-
linkType: hard
8332-
8333-
"caniuse-lite@npm:^1.0.30001726":
8334-
version: 1.0.30001727
8335-
resolution: "caniuse-lite@npm:1.0.30001727"
8336-
checksum: 10c0/f0a441c05d8925d728c2d02ce23b001935f52183a3bf669556f302568fe258d1657940c7ac0b998f92bc41383e185b390279a7d779e6d96a2b47881f56400221
8312+
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702, caniuse-lite@npm:^1.0.30001716, caniuse-lite@npm:^1.0.30001718, caniuse-lite@npm:^1.0.30001726":
8313+
version: 1.0.30001731
8314+
resolution: "caniuse-lite@npm:1.0.30001731"
8315+
checksum: 10c0/d8cddf817d5bec8e7c2106affdbf1bfc3923463ca16697c992b2efeb043e6a5d9dcb70cda913bc6acf9112fd66f9e80279316c08e7800359116925066a63fdfa
83378316
languageName: node
83388317
linkType: hard
83398318

0 commit comments

Comments
 (0)