Skip to content

Commit 711d5e8

Browse files
castastrophecastastrophe
committed
test(picker): break out tests to resolve failure due to size
1 parent 9642ca6 commit 711d5e8

File tree

10 files changed

+118
-30
lines changed

10 files changed

+118
-30
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
@@ -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+
&:has([aria-pressed="true"]) {
6969
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
7070
}
7171
}
@@ -118,7 +118,7 @@ governing permissions and limitations under the License.
118118
}
119119
}
120120

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

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

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

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

Lines changed: 11 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,12 @@ export default {
6668
control: "select",
6769
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
6870
},
71+
isOpen: {
72+
...isOpen,
73+
name: "Popup is open",
74+
description: "When the button triggers a popup, this should be true when the popup is open.",
75+
if: { arg: "hasPopup", truthy: true },
76+
},
6977
staticColor: {
7078
...staticColor,
7179
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,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

‎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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8292,9 +8292,9 @@ __metadata:
82928292
linkType: hard
82938293

82948294
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
8295-
version: 1.0.30001703
8296-
resolution: "caniuse-lite@npm:1.0.30001703"
8297-
checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91
8295+
version: 1.0.30001731
8296+
resolution: "caniuse-lite@npm:1.0.30001731"
8297+
checksum: 10c0/d8cddf817d5bec8e7c2106affdbf1bfc3923463ca16697c992b2efeb043e6a5d9dcb70cda913bc6acf9112fd66f9e80279316c08e7800359116925066a63fdfa
82988298
languageName: node
82998299
linkType: hard
83008300

0 commit comments

Comments
 (0)