Skip to content

Commit 888d403

Browse files
castastrophecastastrophe
committed
test(picker): break out tests to resolve failure due to size
1 parent 8e5dcea commit 888d403

File tree

10 files changed

+117
-52
lines changed

10 files changed

+117
-52
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, 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
/**
@@ -176,6 +176,17 @@ Default.parameters = {
176176
};
177177

178178
// ********* VRT ONLY ********* //
179+
export const WithVariants = PickerGroupVariants.bind({});
180+
WithVariants.args = {};
181+
WithVariants.tags = ["!autodocs"];
182+
WithVariants.parameters = {
183+
docs: {
184+
story: {
185+
height: "300px",
186+
}
187+
},
188+
};
189+
179190
export const WithForcedColors = PickerGroup.bind({});
180191
WithForcedColors.tags = ["!autodocs", "!dev"];
181192
WithForcedColors.parameters = {

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

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
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",
13+
isOpen: true,
1414
},
1515
{
1616
testHeading: "Default, with value and text overflow",
@@ -77,19 +77,57 @@ export const PickerGroup = Variants({
7777
isDisabled: true,
7878
},
7979
{
80-
testHeading: "Open",
81-
isOpen: true,
80+
testHeading: "Closed",
81+
isOpen: false,
8282
wrapperStyles: {
83-
"min-block-size": "225px",
83+
"min-block-size": "auto",
8484
},
8585
},
8686
{
87-
testHeading: "Open + hover",
88-
isOpen: true,
87+
testHeading: "Closed + hover",
88+
isOpen: false,
8989
isHovered: true,
9090
wrapperStyles: {
91-
"min-block-size": "225px",
91+
"min-block-size": "auto",
9292
},
9393
},
9494
],
9595
});
96+
97+
export const PickerGroupVariants = Variants({
98+
Template,
99+
wrapperStyles: {
100+
"align-items": "flex-start",
101+
"min-block-size": "225px",
102+
},
103+
testData: [
104+
{
105+
testHeading: "Default, with value and text overflow",
106+
currentValue: "The selected value of the picker, with long text the triggers the overflow behavior with ellipsis",
107+
isOpen: true,
108+
},
109+
{
110+
testHeading: "Side label",
111+
labelPosition: "side",
112+
isOpen: true,
113+
},
114+
{
115+
testHeading: "Side label, quiet",
116+
labelPosition: "side",
117+
isQuiet: true,
118+
isOpen: true,
119+
},
120+
{
121+
testHeading: "Side label, alignment with switch",
122+
labelPosition: "side",
123+
withSwitch: true,
124+
isOpen: true,
125+
},
126+
{
127+
testHeading: "With thumbnail icon",
128+
showWorkflowIcon: true,
129+
contentIconName: "Image",
130+
isOpen: true,
131+
},
132+
],
133+
});

‎yarn.lock

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8275,31 +8275,10 @@ __metadata:
82758275
languageName: node
82768276
linkType: hard
82778277

8278-
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
8279-
version: 1.0.30001703
8280-
resolution: "caniuse-lite@npm:1.0.30001703"
8281-
checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91
8282-
languageName: node
8283-
linkType: hard
8284-
8285-
"caniuse-lite@npm:^1.0.30001716":
8286-
version: 1.0.30001717
8287-
resolution: "caniuse-lite@npm:1.0.30001717"
8288-
checksum: 10c0/6c0bb1e5182fd578ebe97ee2203250849754a4e17d985839fab527ad27e125a4c4ffce3ece5505217fedf30ea0bbc17ac9f93e9ac525c0389ccba61c6e8345dc
8289-
languageName: node
8290-
linkType: hard
8291-
8292-
"caniuse-lite@npm:^1.0.30001718":
8293-
version: 1.0.30001721
8294-
resolution: "caniuse-lite@npm:1.0.30001721"
8295-
checksum: 10c0/fa3a8926899824b385279f1f886fe34c5efb1321c9ece1b9df25c8d567a2706db8450cc5b4d969e769e641593e08ea644909324aba93636a43e4949a75f81c4c
8296-
languageName: node
8297-
linkType: hard
8298-
8299-
"caniuse-lite@npm:^1.0.30001726":
8300-
version: 1.0.30001727
8301-
resolution: "caniuse-lite@npm:1.0.30001727"
8302-
checksum: 10c0/f0a441c05d8925d728c2d02ce23b001935f52183a3bf669556f302568fe258d1657940c7ac0b998f92bc41383e185b390279a7d779e6d96a2b47881f56400221
8278+
"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":
8279+
version: 1.0.30001731
8280+
resolution: "caniuse-lite@npm:1.0.30001731"
8281+
checksum: 10c0/d8cddf817d5bec8e7c2106affdbf1bfc3923463ca16697c992b2efeb043e6a5d9dcb70cda913bc6acf9112fd66f9e80279316c08e7800359116925066a63fdfa
83038282
languageName: node
83048283
linkType: hard
83058284

0 commit comments

Comments
 (0)