@spectrum-web-components/action-group 0.43.0 → 0.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1 -1
- package/package.json +6 -6
- package/src/ActionGroup.dev.js +1 -1
- package/src/ActionGroup.dev.js.map +1 -1
- package/src/ActionGroup.js +1 -1
- package/src/ActionGroup.js.map +2 -2
- package/stories/action-group.stories.js +27 -0
- package/stories/action-group.stories.js.map +2 -2
- package/test/action-group.test.js +555 -521
- package/test/action-group.test.js.map +2 -2
|
@@ -5,9 +5,15 @@ import {
|
|
|
5
5
|
expect,
|
|
6
6
|
fixture,
|
|
7
7
|
html,
|
|
8
|
+
nextFrame,
|
|
9
|
+
oneEvent,
|
|
8
10
|
waitUntil
|
|
9
11
|
} from "@open-wc/testing";
|
|
10
12
|
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
13
|
+
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
14
|
+
import "@spectrum-web-components/menu/sp-menu.js";
|
|
15
|
+
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
16
|
+
import "@spectrum-web-components/picker/sp-picker.js";
|
|
11
17
|
import {
|
|
12
18
|
LitElement
|
|
13
19
|
} from "@spectrum-web-components/base";
|
|
@@ -27,6 +33,8 @@ import "@spectrum-web-components/action-group/sp-action-group.js";
|
|
|
27
33
|
import { controlled } from "../stories/action-group-tooltip.stories.js";
|
|
28
34
|
import { spy } from "sinon";
|
|
29
35
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
36
|
+
import { HasActionMenuAsChild } from "../stories/action-group.stories.js";
|
|
37
|
+
import "../stories/action-group.stories.js";
|
|
30
38
|
class QuietActionGroup extends LitElement {
|
|
31
39
|
render() {
|
|
32
40
|
return html`
|
|
@@ -50,75 +58,189 @@ class EmphasizedActionGroup extends LitElement {
|
|
|
50
58
|
}
|
|
51
59
|
customElements.define("emphasized-action-group", EmphasizedActionGroup);
|
|
52
60
|
async function singleSelectedActionGroup(selected) {
|
|
53
|
-
const el = await fixture(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
`
|
|
69
|
-
);
|
|
61
|
+
const el = await fixture(html`
|
|
62
|
+
<sp-action-group
|
|
63
|
+
label="Selects User-Chosen Buttons"
|
|
64
|
+
selects="single"
|
|
65
|
+
.selected=${selected}
|
|
66
|
+
>
|
|
67
|
+
<sp-action-button value="first" class="first">
|
|
68
|
+
First
|
|
69
|
+
</sp-action-button>
|
|
70
|
+
<sp-action-button value="second" class="second">
|
|
71
|
+
<div slot="icon" style="width: 10px; height: 10px;"></div>
|
|
72
|
+
Second
|
|
73
|
+
</sp-action-button>
|
|
74
|
+
</sp-action-group>
|
|
75
|
+
`);
|
|
70
76
|
return el;
|
|
71
77
|
}
|
|
72
78
|
async function multipleSelectedActionGroup(selected) {
|
|
73
|
-
const el = await fixture(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
>
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
`
|
|
88
|
-
);
|
|
79
|
+
const el = await fixture(html`
|
|
80
|
+
<sp-action-group
|
|
81
|
+
label="Selects User-Chosen Buttons"
|
|
82
|
+
selects="multiple"
|
|
83
|
+
.selected=${selected}
|
|
84
|
+
>
|
|
85
|
+
<sp-action-button value="first" class="first">
|
|
86
|
+
First
|
|
87
|
+
</sp-action-button>
|
|
88
|
+
<sp-action-button value="second" class="second">
|
|
89
|
+
Second
|
|
90
|
+
</sp-action-button>
|
|
91
|
+
</sp-action-group>
|
|
92
|
+
`);
|
|
89
93
|
return el;
|
|
90
94
|
}
|
|
91
95
|
describe("ActionGroup", () => {
|
|
92
96
|
it("loads empty action-group accessibly", async () => {
|
|
97
|
+
const el = await fixture(html`
|
|
98
|
+
<sp-action-group></sp-action-group>
|
|
99
|
+
`);
|
|
100
|
+
await elementUpdated(el);
|
|
101
|
+
await expect(el).to.be.accessible();
|
|
102
|
+
});
|
|
103
|
+
it("loads action-group with action-menu accessibly", async () => {
|
|
93
104
|
const el = await fixture(
|
|
94
|
-
|
|
95
|
-
<sp-action-group></sp-action-group>
|
|
96
|
-
`
|
|
105
|
+
HasActionMenuAsChild({ label: "Action Group" })
|
|
97
106
|
);
|
|
98
107
|
await elementUpdated(el);
|
|
108
|
+
await nextFrame();
|
|
109
|
+
await nextFrame();
|
|
110
|
+
await nextFrame();
|
|
111
|
+
await nextFrame();
|
|
99
112
|
await expect(el).to.be.accessible();
|
|
100
113
|
});
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
html`
|
|
104
|
-
<sp-action-group aria-label="Default Group">
|
|
105
|
-
<sp-action-button>First</sp-action-button>
|
|
106
|
-
<sp-action-button>Second</sp-action-button>
|
|
107
|
-
<sp-action-button>Third</sp-action-button>
|
|
108
|
-
</sp-action-group>
|
|
109
|
-
`
|
|
110
|
-
)
|
|
111
|
-
);
|
|
112
|
-
it("loads default action-group accessibly", async () => {
|
|
114
|
+
it("action-group with action-menu manages tabIndex correctly while using keyboard", async () => {
|
|
115
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
113
116
|
const el = await fixture(
|
|
114
|
-
|
|
117
|
+
HasActionMenuAsChild({ label: "Action Group" })
|
|
118
|
+
);
|
|
119
|
+
await elementUpdated(el);
|
|
120
|
+
await nextFrame();
|
|
121
|
+
await nextFrame();
|
|
122
|
+
await nextFrame();
|
|
123
|
+
await nextFrame();
|
|
124
|
+
await sendKeys({ press: "Tab" });
|
|
125
|
+
await elementUpdated(el);
|
|
126
|
+
expect((_a = document.activeElement) == null ? void 0 : _a.id).to.equal("first");
|
|
127
|
+
expect((_b = el.children[0]) == null ? void 0 : _b.tabIndex).to.equal(-1);
|
|
128
|
+
expect((_c = el.children[1]) == null ? void 0 : _c.tabIndex).to.equal(-1);
|
|
129
|
+
expect((_d = el.children[2]) == null ? void 0 : _d.tabIndex).to.equal(-1);
|
|
130
|
+
expect((_e = el.children[3]) == null ? void 0 : _e.tabIndex).to.equal(-1);
|
|
131
|
+
await sendKeys({ press: "ArrowRight" });
|
|
132
|
+
await sendKeys({ press: "ArrowRight" });
|
|
133
|
+
await sendKeys({ press: "ArrowRight" });
|
|
134
|
+
await elementUpdated(el);
|
|
135
|
+
expect((_f = el.children[3]) == null ? void 0 : _f.focused).to.be.true;
|
|
136
|
+
await sendKeys({ press: "Enter" });
|
|
137
|
+
const opened = oneEvent(el.children[3], "sp-opened");
|
|
138
|
+
await elementUpdated(el.children[3]);
|
|
139
|
+
await opened;
|
|
140
|
+
const firstMenuItem = el.querySelector("#first-menu-item");
|
|
141
|
+
expect(firstMenuItem == null ? void 0 : firstMenuItem.focused).to.be.true;
|
|
142
|
+
await sendKeys({ press: "ArrowDown" });
|
|
143
|
+
await sendKeys({ press: "ArrowDown" });
|
|
144
|
+
await sendKeys({ press: "ArrowDown" });
|
|
145
|
+
await sendKeys({ press: "Enter" });
|
|
146
|
+
await elementUpdated(el.children[3]);
|
|
147
|
+
await nextFrame();
|
|
148
|
+
await nextFrame();
|
|
149
|
+
await nextFrame();
|
|
150
|
+
await nextFrame();
|
|
151
|
+
const secondSubMenuItem = el.querySelector(
|
|
152
|
+
"#second-sub-menu-item"
|
|
153
|
+
);
|
|
154
|
+
expect(secondSubMenuItem == null ? void 0 : secondSubMenuItem.focused).to.be.true;
|
|
155
|
+
await sendKeys({ press: "Enter" });
|
|
156
|
+
const closed = oneEvent(el.children[3], "sp-closed");
|
|
157
|
+
await elementUpdated(el.children[3]);
|
|
158
|
+
await closed;
|
|
159
|
+
expect((_g = el.children[3]) == null ? void 0 : _g.focused).to.be.true;
|
|
160
|
+
});
|
|
161
|
+
it("action-group with action-menu manages tabIndex correctly while using mouse", async () => {
|
|
162
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
163
|
+
const el = await fixture(
|
|
164
|
+
HasActionMenuAsChild({ label: "Action Group" })
|
|
165
|
+
);
|
|
166
|
+
await elementUpdated(el);
|
|
167
|
+
await aTimeout(500);
|
|
168
|
+
const firstButton = el.querySelector("#first");
|
|
169
|
+
const rect = firstButton.getBoundingClientRect();
|
|
170
|
+
sendMouse({
|
|
171
|
+
steps: [
|
|
172
|
+
{
|
|
173
|
+
position: [
|
|
174
|
+
rect.left + rect.width / 2,
|
|
175
|
+
rect.top + rect.height / 2
|
|
176
|
+
],
|
|
177
|
+
type: "click"
|
|
178
|
+
}
|
|
179
|
+
]
|
|
180
|
+
});
|
|
181
|
+
await elementUpdated(el);
|
|
182
|
+
await aTimeout(500);
|
|
183
|
+
expect((_a = el.children[0]) == null ? void 0 : _a.tabIndex).to.equal(-1);
|
|
184
|
+
expect((_b = el.children[1]) == null ? void 0 : _b.tabIndex).to.equal(-1);
|
|
185
|
+
expect((_c = el.children[2]) == null ? void 0 : _c.tabIndex).to.equal(-1);
|
|
186
|
+
expect((_d = el.children[3]) == null ? void 0 : _d.tabIndex).to.equal(-1);
|
|
187
|
+
sendMouse({
|
|
188
|
+
steps: [
|
|
189
|
+
{
|
|
190
|
+
position: [0, 0],
|
|
191
|
+
type: "click"
|
|
192
|
+
}
|
|
193
|
+
]
|
|
194
|
+
});
|
|
195
|
+
await elementUpdated(el);
|
|
196
|
+
await aTimeout(500);
|
|
197
|
+
expect((_e = el.children[0]) == null ? void 0 : _e.tabIndex).to.equal(0);
|
|
198
|
+
expect((_f = el.children[1]) == null ? void 0 : _f.tabIndex).to.equal(-1);
|
|
199
|
+
expect((_g = el.children[2]) == null ? void 0 : _g.tabIndex).to.equal(-1);
|
|
200
|
+
expect((_h = el.children[3]) == null ? void 0 : _h.tabIndex).to.equal(-1);
|
|
201
|
+
const actionMenu = el.querySelector("#action-menu");
|
|
202
|
+
const actionMenuRect = actionMenu.getBoundingClientRect();
|
|
203
|
+
sendMouse({
|
|
204
|
+
steps: [
|
|
205
|
+
{
|
|
206
|
+
position: [
|
|
207
|
+
actionMenuRect.left + actionMenuRect.width / 2,
|
|
208
|
+
actionMenuRect.top + actionMenuRect.height / 2
|
|
209
|
+
],
|
|
210
|
+
type: "click"
|
|
211
|
+
}
|
|
212
|
+
]
|
|
213
|
+
});
|
|
214
|
+
await elementUpdated(el);
|
|
215
|
+
const opened = oneEvent(el.children[3], "sp-opened");
|
|
216
|
+
await opened;
|
|
217
|
+
await sendKeys({ press: "ArrowDown" });
|
|
218
|
+
await sendKeys({ press: "Enter" });
|
|
219
|
+
const closed = oneEvent(el.children[3], "sp-closed");
|
|
220
|
+
await closed;
|
|
221
|
+
await aTimeout(500);
|
|
222
|
+
expect((_i = el.children[0]) == null ? void 0 : _i.tabIndex).to.equal(0);
|
|
223
|
+
expect((_j = el.children[1]) == null ? void 0 : _j.tabIndex).to.equal(-1);
|
|
224
|
+
expect((_k = el.children[2]) == null ? void 0 : _k.tabIndex).to.equal(-1);
|
|
225
|
+
expect((_l = el.children[3]) == null ? void 0 : _l.tabIndex).to.equal(-1);
|
|
226
|
+
});
|
|
227
|
+
testForLitDevWarnings(
|
|
228
|
+
async () => await fixture(html`
|
|
115
229
|
<sp-action-group aria-label="Default Group">
|
|
116
230
|
<sp-action-button>First</sp-action-button>
|
|
117
231
|
<sp-action-button>Second</sp-action-button>
|
|
118
232
|
<sp-action-button>Third</sp-action-button>
|
|
119
233
|
</sp-action-group>
|
|
120
|
-
`
|
|
121
|
-
|
|
234
|
+
`)
|
|
235
|
+
);
|
|
236
|
+
it("loads default action-group accessibly", async () => {
|
|
237
|
+
const el = await fixture(html`
|
|
238
|
+
<sp-action-group aria-label="Default Group">
|
|
239
|
+
<sp-action-button>First</sp-action-button>
|
|
240
|
+
<sp-action-button>Second</sp-action-button>
|
|
241
|
+
<sp-action-button>Third</sp-action-button>
|
|
242
|
+
</sp-action-group>
|
|
243
|
+
`);
|
|
122
244
|
await elementUpdated(el);
|
|
123
245
|
await expect(el).to.be.accessible();
|
|
124
246
|
expect(el.getAttribute("aria-label")).to.equal("Default Group");
|
|
@@ -126,14 +248,12 @@ describe("ActionGroup", () => {
|
|
|
126
248
|
expect(el.children[0].getAttribute("role")).to.equal("button");
|
|
127
249
|
});
|
|
128
250
|
it("applies `static` attribute to its children", async () => {
|
|
129
|
-
const el = await fixture(
|
|
130
|
-
|
|
131
|
-
<sp-action-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
`
|
|
136
|
-
);
|
|
251
|
+
const el = await fixture(html`
|
|
252
|
+
<sp-action-group static="white">
|
|
253
|
+
<sp-action-button id="first">First</sp-action-button>
|
|
254
|
+
<sp-action-button id="second">Second</sp-action-button>
|
|
255
|
+
</sp-action-group>
|
|
256
|
+
`);
|
|
137
257
|
const firstButton = el.querySelector("#first");
|
|
138
258
|
const secondButton = el.querySelector("#second");
|
|
139
259
|
await elementUpdated(el);
|
|
@@ -146,28 +266,24 @@ describe("ActionGroup", () => {
|
|
|
146
266
|
});
|
|
147
267
|
it('manages "label"', async () => {
|
|
148
268
|
const testLabel = "Testable action group";
|
|
149
|
-
const el = await fixture(
|
|
150
|
-
|
|
151
|
-
<sp-action-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
`
|
|
156
|
-
);
|
|
269
|
+
const el = await fixture(html`
|
|
270
|
+
<sp-action-group label=${testLabel}>
|
|
271
|
+
<sp-action-button id="first">First</sp-action-button>
|
|
272
|
+
<sp-action-button id="second">Second</sp-action-button>
|
|
273
|
+
</sp-action-group>
|
|
274
|
+
`);
|
|
157
275
|
expect(el.getAttribute("aria-label")).to.equal(testLabel);
|
|
158
276
|
el.label = "";
|
|
159
277
|
await elementUpdated(el);
|
|
160
278
|
expect(el.hasAttribute("aria-label")).to.be.false;
|
|
161
279
|
});
|
|
162
280
|
it("applies `quiet` attribute to its children", async () => {
|
|
163
|
-
const el = await fixture(
|
|
164
|
-
|
|
165
|
-
<sp-action-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
`
|
|
170
|
-
);
|
|
281
|
+
const el = await fixture(html`
|
|
282
|
+
<sp-action-group quiet>
|
|
283
|
+
<sp-action-button id="first">First</sp-action-button>
|
|
284
|
+
<sp-action-button id="second">Second</sp-action-button>
|
|
285
|
+
</sp-action-group>
|
|
286
|
+
`);
|
|
171
287
|
const firstButton = el.querySelector("#first");
|
|
172
288
|
const secondButton = el.querySelector("#second");
|
|
173
289
|
await elementUpdated(el);
|
|
@@ -177,18 +293,16 @@ describe("ActionGroup", () => {
|
|
|
177
293
|
expect(secondButton.quiet).to.be.true;
|
|
178
294
|
});
|
|
179
295
|
it("applies `quiet` attribute to its slotted children", async () => {
|
|
180
|
-
const el = await fixture(
|
|
181
|
-
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
`
|
|
191
|
-
);
|
|
296
|
+
const el = await fixture(html`
|
|
297
|
+
<quiet-action-group>
|
|
298
|
+
<sp-action-button slot="first" id="first">
|
|
299
|
+
First
|
|
300
|
+
</sp-action-button>
|
|
301
|
+
<sp-action-button slot="second" id="second">
|
|
302
|
+
Second
|
|
303
|
+
</sp-action-button>
|
|
304
|
+
</quiet-action-group>
|
|
305
|
+
`);
|
|
192
306
|
const firstButton = el.querySelector("#first");
|
|
193
307
|
const secondButton = el.querySelector("#second");
|
|
194
308
|
await elementUpdated(el);
|
|
@@ -198,18 +312,16 @@ describe("ActionGroup", () => {
|
|
|
198
312
|
expect(secondButton.quiet).to.be.true;
|
|
199
313
|
});
|
|
200
314
|
it("applies `emphasized` attribute to its slotted children", async () => {
|
|
201
|
-
const el = await fixture(
|
|
202
|
-
|
|
203
|
-
<
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
`
|
|
212
|
-
);
|
|
315
|
+
const el = await fixture(html`
|
|
316
|
+
<emphasized-action-group>
|
|
317
|
+
<sp-action-button slot="first" id="first">
|
|
318
|
+
First
|
|
319
|
+
</sp-action-button>
|
|
320
|
+
<sp-action-button slot="second" id="second">
|
|
321
|
+
Second
|
|
322
|
+
</sp-action-button>
|
|
323
|
+
</emphasized-action-group>
|
|
324
|
+
`);
|
|
213
325
|
const firstButton = el.querySelector("#first");
|
|
214
326
|
const secondButton = el.querySelector("#second");
|
|
215
327
|
await elementUpdated(el);
|
|
@@ -219,22 +331,20 @@ describe("ActionGroup", () => {
|
|
|
219
331
|
expect(secondButton.emphasized).to.be.true;
|
|
220
332
|
});
|
|
221
333
|
it("applies `quiet` attribute to slotted children with overlays", async () => {
|
|
222
|
-
const el = await fixture(
|
|
223
|
-
|
|
224
|
-
<
|
|
225
|
-
<
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
`
|
|
237
|
-
);
|
|
334
|
+
const el = await fixture(html`
|
|
335
|
+
<quiet-action-group>
|
|
336
|
+
<overlay-trigger slot="first">
|
|
337
|
+
<sp-action-button slot="trigger" id="first">
|
|
338
|
+
First
|
|
339
|
+
</sp-action-button>
|
|
340
|
+
</overlay-trigger>
|
|
341
|
+
<overlay-trigger slot="second">
|
|
342
|
+
<sp-action-button slot="trigger" id="second">
|
|
343
|
+
Second
|
|
344
|
+
</sp-action-button>
|
|
345
|
+
</overlay-trigger>
|
|
346
|
+
</quiet-action-group>
|
|
347
|
+
`);
|
|
238
348
|
const firstButton = el.querySelector("#first");
|
|
239
349
|
const secondButton = el.querySelector("#second");
|
|
240
350
|
await elementUpdated(el);
|
|
@@ -244,22 +354,20 @@ describe("ActionGroup", () => {
|
|
|
244
354
|
expect(secondButton.quiet).to.be.true;
|
|
245
355
|
});
|
|
246
356
|
it("applies `emphasized` attribute to slotted children with overlays", async () => {
|
|
247
|
-
const el = await fixture(
|
|
248
|
-
|
|
249
|
-
<
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
`
|
|
262
|
-
);
|
|
357
|
+
const el = await fixture(html`
|
|
358
|
+
<emphasized-action-group>
|
|
359
|
+
<overlay-trigger slot="first">
|
|
360
|
+
<sp-action-button slot="trigger" id="first">
|
|
361
|
+
First
|
|
362
|
+
</sp-action-button>
|
|
363
|
+
</overlay-trigger>
|
|
364
|
+
<overlay-trigger slot="second">
|
|
365
|
+
<sp-action-button slot="trigger" id="second">
|
|
366
|
+
Second
|
|
367
|
+
</sp-action-button>
|
|
368
|
+
</overlay-trigger>
|
|
369
|
+
</emphasized-action-group>
|
|
370
|
+
`);
|
|
263
371
|
const firstButton = el.querySelector("#first");
|
|
264
372
|
const secondButton = el.querySelector("#second");
|
|
265
373
|
await elementUpdated(el);
|
|
@@ -269,15 +377,13 @@ describe("ActionGroup", () => {
|
|
|
269
377
|
expect(secondButton.emphasized).to.be.true;
|
|
270
378
|
});
|
|
271
379
|
it('loads [selects="single"] action-group accessibly', async () => {
|
|
272
|
-
const el = await fixture(
|
|
273
|
-
|
|
274
|
-
<sp-action-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
`
|
|
280
|
-
);
|
|
380
|
+
const el = await fixture(html`
|
|
381
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
382
|
+
<sp-action-button>First</sp-action-button>
|
|
383
|
+
<sp-action-button>Second</sp-action-button>
|
|
384
|
+
<sp-action-button>Third</sp-action-button>
|
|
385
|
+
</sp-action-group>
|
|
386
|
+
`);
|
|
281
387
|
await elementUpdated(el);
|
|
282
388
|
await expect(el).to.be.accessible();
|
|
283
389
|
expect(el.getAttribute("aria-label")).to.equal("Selects Single Group");
|
|
@@ -285,31 +391,24 @@ describe("ActionGroup", () => {
|
|
|
285
391
|
expect(el.children[0].getAttribute("role")).to.equal("radio");
|
|
286
392
|
});
|
|
287
393
|
it('loads [selects="single"] action-group w/ selection accessibly', async () => {
|
|
288
|
-
const el = await fixture(
|
|
289
|
-
|
|
290
|
-
<sp-action-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
`
|
|
296
|
-
);
|
|
394
|
+
const el = await fixture(html`
|
|
395
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
396
|
+
<sp-action-button>First</sp-action-button>
|
|
397
|
+
<sp-action-button>Second</sp-action-button>
|
|
398
|
+
<sp-action-button selected>Third</sp-action-button>
|
|
399
|
+
</sp-action-group>
|
|
400
|
+
`);
|
|
297
401
|
await elementUpdated(el);
|
|
298
402
|
await expect(el).to.be.accessible();
|
|
299
403
|
});
|
|
300
404
|
it('loads [selects="multiple"] action-group accessibly', async () => {
|
|
301
|
-
const el = await fixture(
|
|
302
|
-
|
|
303
|
-
<sp-action-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
<sp-action-button>Second</sp-action-button>
|
|
309
|
-
<sp-action-button>Third</sp-action-button>
|
|
310
|
-
</sp-action-group>
|
|
311
|
-
`
|
|
312
|
-
);
|
|
405
|
+
const el = await fixture(html`
|
|
406
|
+
<sp-action-group label="Selects Multiple Group" selects="multiple">
|
|
407
|
+
<sp-action-button>First</sp-action-button>
|
|
408
|
+
<sp-action-button>Second</sp-action-button>
|
|
409
|
+
<sp-action-button>Third</sp-action-button>
|
|
410
|
+
</sp-action-group>
|
|
411
|
+
`);
|
|
313
412
|
await elementUpdated(el);
|
|
314
413
|
await expect(el).to.be.accessible();
|
|
315
414
|
expect(el.getAttribute("aria-label")).to.equal(
|
|
@@ -319,59 +418,48 @@ describe("ActionGroup", () => {
|
|
|
319
418
|
expect(el.children[0].getAttribute("role")).to.equal("checkbox");
|
|
320
419
|
});
|
|
321
420
|
it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
|
|
322
|
-
const el = await fixture(
|
|
323
|
-
|
|
324
|
-
<sp-action-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
<sp-action-button selected>Second</sp-action-button>
|
|
330
|
-
<sp-action-button selected>Third</sp-action-button>
|
|
331
|
-
</sp-action-group>
|
|
332
|
-
`
|
|
333
|
-
);
|
|
421
|
+
const el = await fixture(html`
|
|
422
|
+
<sp-action-group label="Selects Multiple Group" selects="multiple">
|
|
423
|
+
<sp-action-button>First</sp-action-button>
|
|
424
|
+
<sp-action-button selected>Second</sp-action-button>
|
|
425
|
+
<sp-action-button selected>Third</sp-action-button>
|
|
426
|
+
</sp-action-group>
|
|
427
|
+
`);
|
|
334
428
|
await elementUpdated(el);
|
|
335
429
|
await expect(el).to.be.accessible();
|
|
336
430
|
});
|
|
337
431
|
it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
|
|
338
|
-
const el = await fixture(
|
|
339
|
-
|
|
340
|
-
<sp-action-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
`
|
|
346
|
-
);
|
|
432
|
+
const el = await fixture(html`
|
|
433
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
434
|
+
<sp-action-button disabled>First</sp-action-button>
|
|
435
|
+
<sp-action-button class="second">Second</sp-action-button>
|
|
436
|
+
<sp-action-button>Third</sp-action-button>
|
|
437
|
+
</sp-action-group>
|
|
438
|
+
`);
|
|
347
439
|
const secondButton = el.querySelector(".second");
|
|
348
440
|
await elementUpdated(el);
|
|
349
441
|
expect(secondButton.hasAttribute("tabindex"));
|
|
350
442
|
expect(secondButton.getAttribute("tabindex")).to.equal("0");
|
|
351
443
|
});
|
|
352
444
|
it('surfaces [selects="single"] selection', async () => {
|
|
353
|
-
const el = await fixture(
|
|
354
|
-
|
|
355
|
-
<sp-action-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
`
|
|
361
|
-
);
|
|
445
|
+
const el = await fixture(html`
|
|
446
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
447
|
+
<sp-action-button>First</sp-action-button>
|
|
448
|
+
<sp-action-button>Second</sp-action-button>
|
|
449
|
+
<sp-action-button selected>Third</sp-action-button>
|
|
450
|
+
</sp-action-group>
|
|
451
|
+
`);
|
|
362
452
|
await elementUpdated(el);
|
|
363
453
|
expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
|
|
364
454
|
});
|
|
365
455
|
it('manages [selects="single"] selection through multiple slots', async () => {
|
|
366
|
-
const test = await fixture(
|
|
367
|
-
|
|
368
|
-
<
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
`
|
|
374
|
-
);
|
|
456
|
+
const test = await fixture(html`
|
|
457
|
+
<div>
|
|
458
|
+
<sp-action-button>First</sp-action-button>
|
|
459
|
+
<sp-action-button>Second</sp-action-button>
|
|
460
|
+
<sp-action-button selected>Third</sp-action-button>
|
|
461
|
+
</div>
|
|
462
|
+
`);
|
|
375
463
|
const firstItem = test.querySelector(
|
|
376
464
|
"sp-action-button"
|
|
377
465
|
);
|
|
@@ -396,18 +484,13 @@ describe("ActionGroup", () => {
|
|
|
396
484
|
expect(thirdItem.selected).to.be.false;
|
|
397
485
|
});
|
|
398
486
|
it('surfaces [selects="multiple"] selection', async () => {
|
|
399
|
-
const el = await fixture(
|
|
400
|
-
|
|
401
|
-
<sp-action-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<sp-action-button selected>Second</sp-action-button>
|
|
407
|
-
<sp-action-button selected>Third</sp-action-button>
|
|
408
|
-
</sp-action-group>
|
|
409
|
-
`
|
|
410
|
-
);
|
|
487
|
+
const el = await fixture(html`
|
|
488
|
+
<sp-action-group label="Selects Multiple Group" selects="multiple">
|
|
489
|
+
<sp-action-button>First</sp-action-button>
|
|
490
|
+
<sp-action-button selected>Second</sp-action-button>
|
|
491
|
+
<sp-action-button selected>Third</sp-action-button>
|
|
492
|
+
</sp-action-group>
|
|
493
|
+
`);
|
|
411
494
|
await elementUpdated(el);
|
|
412
495
|
expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
|
|
413
496
|
"Second",
|
|
@@ -415,15 +498,13 @@ describe("ActionGroup", () => {
|
|
|
415
498
|
]);
|
|
416
499
|
});
|
|
417
500
|
it("does not select without [selects]", async () => {
|
|
418
|
-
const el = await fixture(
|
|
419
|
-
|
|
420
|
-
<sp-action-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
`
|
|
426
|
-
);
|
|
501
|
+
const el = await fixture(html`
|
|
502
|
+
<sp-action-group label="No Selects Group">
|
|
503
|
+
<sp-action-button>First</sp-action-button>
|
|
504
|
+
<sp-action-button selected>Second</sp-action-button>
|
|
505
|
+
<sp-action-button class="third">Third</sp-action-button>
|
|
506
|
+
</sp-action-group>
|
|
507
|
+
`);
|
|
427
508
|
const thirdElement = el.querySelector(".third");
|
|
428
509
|
await elementUpdated(el);
|
|
429
510
|
expect(el.selected.length).to.equal(1);
|
|
@@ -432,19 +513,17 @@ describe("ActionGroup", () => {
|
|
|
432
513
|
expect(el.selected.length).to.equal(1);
|
|
433
514
|
});
|
|
434
515
|
it('selects via `click` while [selects="single"]', async () => {
|
|
435
|
-
const el = await fixture(
|
|
436
|
-
|
|
437
|
-
<sp-action-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
`
|
|
447
|
-
);
|
|
516
|
+
const el = await fixture(html`
|
|
517
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
518
|
+
<sp-action-button value="first">First</sp-action-button>
|
|
519
|
+
<sp-action-button value="second" selected>
|
|
520
|
+
Second
|
|
521
|
+
</sp-action-button>
|
|
522
|
+
<sp-action-button value="third" class="third">
|
|
523
|
+
Third
|
|
524
|
+
</sp-action-button>
|
|
525
|
+
</sp-action-group>
|
|
526
|
+
`);
|
|
448
527
|
const thirdElement = el.querySelector(".third");
|
|
449
528
|
await elementUpdated(el);
|
|
450
529
|
expect(el.selected.length).to.equal(1);
|
|
@@ -458,20 +537,15 @@ describe("ActionGroup", () => {
|
|
|
458
537
|
);
|
|
459
538
|
});
|
|
460
539
|
it('selects via `click` while [selects="multiple"] selection', async () => {
|
|
461
|
-
const el = await fixture(
|
|
462
|
-
|
|
463
|
-
<sp-action-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
>
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
<sp-action-button class="second">Second</sp-action-button>
|
|
471
|
-
<sp-action-button class="third">Third</sp-action-button>
|
|
472
|
-
</sp-action-group>
|
|
473
|
-
`
|
|
474
|
-
);
|
|
540
|
+
const el = await fixture(html`
|
|
541
|
+
<sp-action-group label="Selects Multiple Group" selects="multiple">
|
|
542
|
+
<sp-action-button selected class="first">
|
|
543
|
+
First
|
|
544
|
+
</sp-action-button>
|
|
545
|
+
<sp-action-button class="second">Second</sp-action-button>
|
|
546
|
+
<sp-action-button class="third">Third</sp-action-button>
|
|
547
|
+
</sp-action-group>
|
|
548
|
+
`);
|
|
475
549
|
const firstElement = el.querySelector(".first");
|
|
476
550
|
const secondElement = el.querySelector(".second");
|
|
477
551
|
const thirdElement = el.querySelector(".third");
|
|
@@ -491,25 +565,21 @@ describe("ActionGroup", () => {
|
|
|
491
565
|
});
|
|
492
566
|
it("consumes descendant `change` events when `[selects]`", async () => {
|
|
493
567
|
const changeSpy = spy();
|
|
494
|
-
const el = await fixture(
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
>
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
</sp-action-button>
|
|
510
|
-
</sp-action-group>
|
|
511
|
-
`
|
|
512
|
-
);
|
|
568
|
+
const el = await fixture(html`
|
|
569
|
+
<sp-action-group
|
|
570
|
+
@change=${() => changeSpy()}
|
|
571
|
+
label="Selects Single Group"
|
|
572
|
+
selects="single"
|
|
573
|
+
>
|
|
574
|
+
<sp-action-button toggles value="first">First</sp-action-button>
|
|
575
|
+
<sp-action-button toggles value="second" selected>
|
|
576
|
+
Second
|
|
577
|
+
</sp-action-button>
|
|
578
|
+
<sp-action-button toggles value="third" class="third">
|
|
579
|
+
Third
|
|
580
|
+
</sp-action-button>
|
|
581
|
+
</sp-action-group>
|
|
582
|
+
`);
|
|
513
583
|
const thirdElement = el.querySelector(".third");
|
|
514
584
|
await elementUpdated(el);
|
|
515
585
|
expect(el.selected.length).to.equal(1);
|
|
@@ -525,15 +595,13 @@ describe("ActionGroup", () => {
|
|
|
525
595
|
);
|
|
526
596
|
});
|
|
527
597
|
it("does not respond to clicks on itself", async () => {
|
|
528
|
-
const el = await fixture(
|
|
529
|
-
|
|
530
|
-
<sp-action-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
`
|
|
536
|
-
);
|
|
598
|
+
const el = await fixture(html`
|
|
599
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
600
|
+
<sp-action-button>First</sp-action-button>
|
|
601
|
+
<sp-action-button>Second</sp-action-button>
|
|
602
|
+
<sp-action-button class="third">Third</sp-action-button>
|
|
603
|
+
</sp-action-group>
|
|
604
|
+
`);
|
|
537
605
|
await elementUpdated(el);
|
|
538
606
|
expect(el.selected.length).to.equal(0);
|
|
539
607
|
el.click();
|
|
@@ -541,21 +609,19 @@ describe("ActionGroup", () => {
|
|
|
541
609
|
expect(el.selected.length).to.equal(0);
|
|
542
610
|
});
|
|
543
611
|
it("selection can be prevented", async () => {
|
|
544
|
-
const el = await fixture(
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
>
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
`
|
|
558
|
-
);
|
|
612
|
+
const el = await fixture(html`
|
|
613
|
+
<sp-action-group
|
|
614
|
+
label="Selects Single Group"
|
|
615
|
+
selects="single"
|
|
616
|
+
@change=${(event) => {
|
|
617
|
+
event.preventDefault();
|
|
618
|
+
}}
|
|
619
|
+
>
|
|
620
|
+
<sp-action-button>First</sp-action-button>
|
|
621
|
+
<sp-action-button>Second</sp-action-button>
|
|
622
|
+
<sp-action-button class="third">Third</sp-action-button>
|
|
623
|
+
</sp-action-group>
|
|
624
|
+
`);
|
|
559
625
|
const thirdElement = el.querySelector(".third");
|
|
560
626
|
await elementUpdated(el);
|
|
561
627
|
expect(el.selected.length).to.equal(0);
|
|
@@ -633,25 +699,23 @@ describe("ActionGroup", () => {
|
|
|
633
699
|
expect(secondButton.selected, "second button selected").to.be.true;
|
|
634
700
|
});
|
|
635
701
|
it('selects user-passed value while [selects="multiple"]', async () => {
|
|
636
|
-
const el = await fixture(
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
>
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
`
|
|
654
|
-
);
|
|
702
|
+
const el = await fixture(html`
|
|
703
|
+
<sp-action-group
|
|
704
|
+
label="Selects Multiple Group"
|
|
705
|
+
selects="multiple"
|
|
706
|
+
.selected=${["first", "second"]}
|
|
707
|
+
>
|
|
708
|
+
<sp-action-button class="first" value="first">
|
|
709
|
+
First
|
|
710
|
+
</sp-action-button>
|
|
711
|
+
<sp-action-button class="second" value="second">
|
|
712
|
+
Second
|
|
713
|
+
</sp-action-button>
|
|
714
|
+
<sp-action-button class="third " value="third">
|
|
715
|
+
Third
|
|
716
|
+
</sp-action-button>
|
|
717
|
+
</sp-action-group>
|
|
718
|
+
`);
|
|
655
719
|
await elementUpdated(el);
|
|
656
720
|
await Promise.all(el.buttons.map((button) => elementUpdated(button)));
|
|
657
721
|
const firstButton = el.querySelector(".first");
|
|
@@ -675,25 +739,23 @@ describe("ActionGroup", () => {
|
|
|
675
739
|
expect(thirdButton.selected, "third button selected").to.be.true;
|
|
676
740
|
});
|
|
677
741
|
it('selects can be updated while [selects="multiple"]', async () => {
|
|
678
|
-
const el = await fixture(
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
>
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
`
|
|
696
|
-
);
|
|
742
|
+
const el = await fixture(html`
|
|
743
|
+
<sp-action-group
|
|
744
|
+
label="Selects Multiple Group"
|
|
745
|
+
selects="multiple"
|
|
746
|
+
.selected=${["first", "second"]}
|
|
747
|
+
>
|
|
748
|
+
<sp-action-button class="first" value="first">
|
|
749
|
+
First
|
|
750
|
+
</sp-action-button>
|
|
751
|
+
<sp-action-button class="second" value="second">
|
|
752
|
+
Second
|
|
753
|
+
</sp-action-button>
|
|
754
|
+
<sp-action-button class="third " value="third">
|
|
755
|
+
Third
|
|
756
|
+
</sp-action-button>
|
|
757
|
+
</sp-action-group>
|
|
758
|
+
`);
|
|
697
759
|
await elementUpdated(el);
|
|
698
760
|
await Promise.all(el.buttons.map((button) => elementUpdated(button)));
|
|
699
761
|
const firstButton = el.querySelector(".first");
|
|
@@ -731,22 +793,20 @@ describe("ActionGroup", () => {
|
|
|
731
793
|
expect(secondButton.selected, "second button selected").to.be.true;
|
|
732
794
|
});
|
|
733
795
|
it("Clicking button event should bubble up from inner label to outer button element", async () => {
|
|
734
|
-
const el = await fixture(
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
>
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
`
|
|
749
|
-
);
|
|
796
|
+
const el = await fixture(html`
|
|
797
|
+
<sp-action-group
|
|
798
|
+
label="Selects Multiple Group"
|
|
799
|
+
selects="multiple"
|
|
800
|
+
.selected=${["first", "second"]}
|
|
801
|
+
>
|
|
802
|
+
<sp-action-button class="first" value="first">
|
|
803
|
+
First
|
|
804
|
+
</sp-action-button>
|
|
805
|
+
<sp-action-button class="second" value="second">
|
|
806
|
+
Second
|
|
807
|
+
</sp-action-button>
|
|
808
|
+
</sp-action-group>
|
|
809
|
+
`);
|
|
750
810
|
await elementUpdated(el);
|
|
751
811
|
expect(el.selected.length).to.equal(2);
|
|
752
812
|
const firstButtonEl = el.querySelector(".first");
|
|
@@ -775,21 +835,19 @@ describe("ActionGroup", () => {
|
|
|
775
835
|
expect(firstButton.selected, "first button selected").to.be.false;
|
|
776
836
|
});
|
|
777
837
|
it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => {
|
|
778
|
-
const el = await fixture(
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
>
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
`
|
|
792
|
-
);
|
|
838
|
+
const el = await fixture(html`
|
|
839
|
+
<sp-action-group
|
|
840
|
+
label="Selects User-Chosen Buttons"
|
|
841
|
+
.selected=${["first"]}
|
|
842
|
+
>
|
|
843
|
+
<sp-action-button value="first" class="first">
|
|
844
|
+
First
|
|
845
|
+
</sp-action-button>
|
|
846
|
+
<sp-action-button value="second" class="second">
|
|
847
|
+
Second
|
|
848
|
+
</sp-action-button>
|
|
849
|
+
</sp-action-group>
|
|
850
|
+
`);
|
|
793
851
|
await elementUpdated(el);
|
|
794
852
|
expect(el.selected.length).to.equal(1);
|
|
795
853
|
const firstButton = el.querySelector(".first");
|
|
@@ -803,21 +861,19 @@ describe("ActionGroup", () => {
|
|
|
803
861
|
expect(secondButton.selected, "second button selected").to.be.false;
|
|
804
862
|
});
|
|
805
863
|
it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => {
|
|
806
|
-
const el = await fixture(
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
>
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
`
|
|
820
|
-
);
|
|
864
|
+
const el = await fixture(html`
|
|
865
|
+
<sp-action-group
|
|
866
|
+
label="Selects User-Chosen Buttons"
|
|
867
|
+
.selected=${["first", "second"]}
|
|
868
|
+
>
|
|
869
|
+
<sp-action-button class="first" value="first">
|
|
870
|
+
First
|
|
871
|
+
</sp-action-button>
|
|
872
|
+
<sp-action-button class="second" value="second">
|
|
873
|
+
Second
|
|
874
|
+
</sp-action-button>
|
|
875
|
+
</sp-action-group>
|
|
876
|
+
`);
|
|
821
877
|
await elementUpdated(el);
|
|
822
878
|
expect(el.getAttribute("role")).to.equal("toolbar");
|
|
823
879
|
expect(el.selected.length).to.equal(2);
|
|
@@ -864,28 +920,26 @@ describe("ActionGroup", () => {
|
|
|
864
920
|
);
|
|
865
921
|
});
|
|
866
922
|
it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
|
|
867
|
-
const el = await fixture(
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
>
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
`
|
|
888
|
-
);
|
|
923
|
+
const el = await fixture(html`
|
|
924
|
+
<sp-action-group
|
|
925
|
+
label="Selects Multiple Group"
|
|
926
|
+
selects="multiple"
|
|
927
|
+
.selected=${["first", "second"]}
|
|
928
|
+
@change=${(event) => {
|
|
929
|
+
event.preventDefault();
|
|
930
|
+
}}
|
|
931
|
+
>
|
|
932
|
+
<sp-action-button class="first" value="first">
|
|
933
|
+
First
|
|
934
|
+
</sp-action-button>
|
|
935
|
+
<sp-action-button class="second" value="second">
|
|
936
|
+
Second
|
|
937
|
+
</sp-action-button>
|
|
938
|
+
<sp-action-button class="third " value="third">
|
|
939
|
+
Third
|
|
940
|
+
</sp-action-button>
|
|
941
|
+
</sp-action-group>
|
|
942
|
+
`);
|
|
889
943
|
const firstElement = el.querySelector(".first");
|
|
890
944
|
const secondElement = el.querySelector(".second");
|
|
891
945
|
const thirdElement = el.querySelector(".third");
|
|
@@ -902,25 +956,23 @@ describe("ActionGroup", () => {
|
|
|
902
956
|
expect(secondElement.selected, "second element still selected").to.be.true;
|
|
903
957
|
});
|
|
904
958
|
it('will not change .selected state if event is prevented while [selects="single"]', async () => {
|
|
905
|
-
const el = await fixture(
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
>
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
`
|
|
923
|
-
);
|
|
959
|
+
const el = await fixture(html`
|
|
960
|
+
<sp-action-group
|
|
961
|
+
label="Selects Single Group"
|
|
962
|
+
selects="single"
|
|
963
|
+
.selected=${["first"]}
|
|
964
|
+
@change=${(event) => {
|
|
965
|
+
event.preventDefault();
|
|
966
|
+
}}
|
|
967
|
+
>
|
|
968
|
+
<sp-action-button class="first" value="first">
|
|
969
|
+
First
|
|
970
|
+
</sp-action-button>
|
|
971
|
+
<sp-action-button class="second" value="second">
|
|
972
|
+
Second
|
|
973
|
+
</sp-action-button>
|
|
974
|
+
</sp-action-group>
|
|
975
|
+
`);
|
|
924
976
|
const firstElement = el.querySelector(".first");
|
|
925
977
|
const secondElement = el.querySelector(".second");
|
|
926
978
|
await elementUpdated(el);
|
|
@@ -935,24 +987,22 @@ describe("ActionGroup", () => {
|
|
|
935
987
|
expect(firstElement.selected, "first element still selected").to.be.true;
|
|
936
988
|
});
|
|
937
989
|
it("will not change .selected state if event is prevented while selects is undefined", async () => {
|
|
938
|
-
const el = await fixture(
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
>
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
`
|
|
955
|
-
);
|
|
990
|
+
const el = await fixture(html`
|
|
991
|
+
<sp-action-group
|
|
992
|
+
label="Selects Single Group"
|
|
993
|
+
.selected=${["first"]}
|
|
994
|
+
@change=${(event) => {
|
|
995
|
+
event.preventDefault();
|
|
996
|
+
}}
|
|
997
|
+
>
|
|
998
|
+
<sp-action-button class="first" value="first">
|
|
999
|
+
First
|
|
1000
|
+
</sp-action-button>
|
|
1001
|
+
<sp-action-button class="second" value="second">
|
|
1002
|
+
Second
|
|
1003
|
+
</sp-action-button>
|
|
1004
|
+
</sp-action-group>
|
|
1005
|
+
`);
|
|
956
1006
|
const firstElement = el.querySelector(".first");
|
|
957
1007
|
const secondElement = el.querySelector(".second");
|
|
958
1008
|
await elementUpdated(el);
|
|
@@ -965,13 +1015,11 @@ describe("ActionGroup", () => {
|
|
|
965
1015
|
expect(secondElement.selected, "second child not selected").to.be.false;
|
|
966
1016
|
});
|
|
967
1017
|
it("manages a `size` attribute", async () => {
|
|
968
|
-
const el = await fixture(
|
|
969
|
-
|
|
970
|
-
<sp-action-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
`
|
|
974
|
-
);
|
|
1018
|
+
const el = await fixture(html`
|
|
1019
|
+
<sp-action-group size="xl">
|
|
1020
|
+
<sp-action-button>Button</sp-action-button>
|
|
1021
|
+
</sp-action-group>
|
|
1022
|
+
`);
|
|
975
1023
|
const button = el.querySelector("sp-action-button");
|
|
976
1024
|
await elementUpdated(el);
|
|
977
1025
|
expect(el.size).to.equal("xl");
|
|
@@ -986,13 +1034,11 @@ describe("ActionGroup", () => {
|
|
|
986
1034
|
expect(button.getAttribute("size")).to.equal("m");
|
|
987
1035
|
});
|
|
988
1036
|
it("does not apply a default `size` attribute", async () => {
|
|
989
|
-
const el = await fixture(
|
|
990
|
-
|
|
991
|
-
<sp-action-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
`
|
|
995
|
-
);
|
|
1037
|
+
const el = await fixture(html`
|
|
1038
|
+
<sp-action-group>
|
|
1039
|
+
<sp-action-button>Button</sp-action-button>
|
|
1040
|
+
</sp-action-group>
|
|
1041
|
+
`);
|
|
996
1042
|
const button = el.querySelector("sp-action-button");
|
|
997
1043
|
await elementUpdated(el);
|
|
998
1044
|
expect(el.size).to.equal("m");
|
|
@@ -1001,22 +1047,20 @@ describe("ActionGroup", () => {
|
|
|
1001
1047
|
expect(button.hasAttribute("size")).to.be.false;
|
|
1002
1048
|
});
|
|
1003
1049
|
it("will accept selected as a JSON string", async () => {
|
|
1004
|
-
const el = await fixture(
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
>
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
`
|
|
1019
|
-
);
|
|
1050
|
+
const el = await fixture(html`
|
|
1051
|
+
<sp-action-group
|
|
1052
|
+
label="Selects Single Group"
|
|
1053
|
+
selects="single"
|
|
1054
|
+
selected='["first"]'
|
|
1055
|
+
>
|
|
1056
|
+
<sp-action-button class="first" value="first">
|
|
1057
|
+
First
|
|
1058
|
+
</sp-action-button>
|
|
1059
|
+
<sp-action-button class="second" value="second">
|
|
1060
|
+
Second
|
|
1061
|
+
</sp-action-button>
|
|
1062
|
+
</sp-action-group>
|
|
1063
|
+
`);
|
|
1020
1064
|
await elementUpdated(el);
|
|
1021
1065
|
const firstElement = el.querySelector(".first");
|
|
1022
1066
|
const secondElement = el.querySelector(".second");
|
|
@@ -1025,13 +1069,11 @@ describe("ActionGroup", () => {
|
|
|
1025
1069
|
expect(secondElement.selected, "second child selected").to.be.false;
|
|
1026
1070
|
});
|
|
1027
1071
|
it("accepts role attribute override", async () => {
|
|
1028
|
-
const el = await fixture(
|
|
1029
|
-
|
|
1030
|
-
<sp-action-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
`
|
|
1034
|
-
);
|
|
1072
|
+
const el = await fixture(html`
|
|
1073
|
+
<sp-action-group role="group">
|
|
1074
|
+
<sp-action-button>Button</sp-action-button>
|
|
1075
|
+
</sp-action-group>
|
|
1076
|
+
`);
|
|
1035
1077
|
await elementUpdated(el);
|
|
1036
1078
|
expect(el.getAttribute("role")).to.equal("group");
|
|
1037
1079
|
el.setAttribute("selects", "single");
|
|
@@ -1081,62 +1123,54 @@ describe("ActionGroup", () => {
|
|
|
1081
1123
|
expect(el.selected[0]).to.equal("Second");
|
|
1082
1124
|
};
|
|
1083
1125
|
it("accepts keybord input", async () => {
|
|
1084
|
-
const el = await fixture(
|
|
1085
|
-
|
|
1086
|
-
<sp-action-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
`
|
|
1092
|
-
);
|
|
1126
|
+
const el = await fixture(html`
|
|
1127
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
1128
|
+
<sp-action-button>First</sp-action-button>
|
|
1129
|
+
<sp-action-button selected>Second</sp-action-button>
|
|
1130
|
+
<sp-action-button class="third">Third</sp-action-button>
|
|
1131
|
+
</sp-action-group>
|
|
1132
|
+
`);
|
|
1093
1133
|
await acceptKeyboardInput(el);
|
|
1094
1134
|
});
|
|
1095
1135
|
it("accepts keybord input with tooltip", async () => {
|
|
1096
|
-
const el = await fixture(
|
|
1097
|
-
|
|
1098
|
-
<
|
|
1099
|
-
<
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
</overlay-trigger>
|
|
1121
|
-
</sp-action-group>
|
|
1122
|
-
`
|
|
1123
|
-
);
|
|
1136
|
+
const el = await fixture(html`
|
|
1137
|
+
<sp-action-group label="Selects Single Group" selects="single">
|
|
1138
|
+
<overlay-trigger>
|
|
1139
|
+
<sp-action-button slot="trigger">First</sp-action-button>
|
|
1140
|
+
<sp-tooltip slot="hover-content">
|
|
1141
|
+
Definitely the first one.
|
|
1142
|
+
</sp-tooltip>
|
|
1143
|
+
</overlay-trigger>
|
|
1144
|
+
<overlay-trigger>
|
|
1145
|
+
<sp-action-button slot="trigger" selected>
|
|
1146
|
+
Second
|
|
1147
|
+
</sp-action-button>
|
|
1148
|
+
<sp-tooltip slot="hover-content">
|
|
1149
|
+
Not the first, not the last.
|
|
1150
|
+
</sp-tooltip>
|
|
1151
|
+
</overlay-trigger>
|
|
1152
|
+
<overlay-trigger>
|
|
1153
|
+
<sp-action-button slot="trigger" class="third">
|
|
1154
|
+
Third
|
|
1155
|
+
</sp-action-button>
|
|
1156
|
+
<sp-tooltip slot="hover-content">Select me.</sp-tooltip>
|
|
1157
|
+
</overlay-trigger>
|
|
1158
|
+
</sp-action-group>
|
|
1159
|
+
`);
|
|
1124
1160
|
await acceptKeyboardInput(el);
|
|
1125
1161
|
});
|
|
1126
1162
|
it('accepts keybord input when [dir="ltr"]', async () => {
|
|
1127
|
-
const el = await fixture(
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
>
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
`
|
|
1139
|
-
);
|
|
1163
|
+
const el = await fixture(html`
|
|
1164
|
+
<sp-action-group
|
|
1165
|
+
label="Selects Single Group"
|
|
1166
|
+
selects="single"
|
|
1167
|
+
dir="ltr"
|
|
1168
|
+
>
|
|
1169
|
+
<sp-action-button>First</sp-action-button>
|
|
1170
|
+
<sp-action-button disabled>Second</sp-action-button>
|
|
1171
|
+
<sp-action-button class="third">Third</sp-action-button>
|
|
1172
|
+
</sp-action-group>
|
|
1173
|
+
`);
|
|
1140
1174
|
const thirdElement = el.querySelector(".third");
|
|
1141
1175
|
await elementUpdated(el);
|
|
1142
1176
|
expect(el.selected.length).to.equal(0);
|