@spectrum-web-components/overlay 1.3.0-beta.2 → 1.3.0-testing.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.
Files changed (62) hide show
  1. package/package.json +7 -8
  2. package/LICENSE +0 -201
  3. package/stories/index.js +0 -48
  4. package/stories/index.js.map +0 -7
  5. package/stories/overlay-directive.stories.js +0 -340
  6. package/stories/overlay-directive.stories.js.map +0 -7
  7. package/stories/overlay-element.stories.js +0 -687
  8. package/stories/overlay-element.stories.js.map +0 -7
  9. package/stories/overlay-story-components.js +0 -338
  10. package/stories/overlay-story-components.js.map +0 -7
  11. package/stories/overlay.stories.js +0 -1470
  12. package/stories/overlay.stories.js.map +0 -7
  13. package/test/benchmark/basic-test.js +0 -40
  14. package/test/benchmark/basic-test.js.map +0 -7
  15. package/test/benchmark/directive-test.js +0 -43
  16. package/test/benchmark/directive-test.js.map +0 -7
  17. package/test/benchmark/element-test.js +0 -40
  18. package/test/benchmark/element-test.js.map +0 -7
  19. package/test/benchmark/lazy-test.js +0 -47
  20. package/test/benchmark/lazy-test.js.map +0 -7
  21. package/test/index.js +0 -605
  22. package/test/index.js.map +0 -7
  23. package/test/overlay-directive.test-vrt.js +0 -5
  24. package/test/overlay-directive.test-vrt.js.map +0 -7
  25. package/test/overlay-directive.test.js +0 -162
  26. package/test/overlay-directive.test.js.map +0 -7
  27. package/test/overlay-element.test-vrt.js +0 -5
  28. package/test/overlay-element.test-vrt.js.map +0 -7
  29. package/test/overlay-element.test.js +0 -934
  30. package/test/overlay-element.test.js.map +0 -7
  31. package/test/overlay-lifecycle.test.js +0 -139
  32. package/test/overlay-lifecycle.test.js.map +0 -7
  33. package/test/overlay-memory.test.js +0 -10
  34. package/test/overlay-memory.test.js.map +0 -7
  35. package/test/overlay-timer.test.js +0 -118
  36. package/test/overlay-timer.test.js.map +0 -7
  37. package/test/overlay-trigger-click.test.js +0 -164
  38. package/test/overlay-trigger-click.test.js.map +0 -7
  39. package/test/overlay-trigger-directive.test.js +0 -75
  40. package/test/overlay-trigger-directive.test.js.map +0 -7
  41. package/test/overlay-trigger-extended.test.js +0 -235
  42. package/test/overlay-trigger-extended.test.js.map +0 -7
  43. package/test/overlay-trigger-hover-click.test.js +0 -225
  44. package/test/overlay-trigger-hover-click.test.js.map +0 -7
  45. package/test/overlay-trigger-hover.test.js +0 -308
  46. package/test/overlay-trigger-hover.test.js.map +0 -7
  47. package/test/overlay-trigger-longpress.test.js +0 -531
  48. package/test/overlay-trigger-longpress.test.js.map +0 -7
  49. package/test/overlay-trigger-optimization.test.js +0 -134
  50. package/test/overlay-trigger-optimization.test.js.map +0 -7
  51. package/test/overlay-trigger-sync.test.js +0 -5
  52. package/test/overlay-trigger-sync.test.js.map +0 -7
  53. package/test/overlay-trigger.test.js +0 -5
  54. package/test/overlay-trigger.test.js.map +0 -7
  55. package/test/overlay-update.test.js +0 -28
  56. package/test/overlay-update.test.js.map +0 -7
  57. package/test/overlay-v1.test.js +0 -569
  58. package/test/overlay-v1.test.js.map +0 -7
  59. package/test/overlay.test-vrt.js +0 -5
  60. package/test/overlay.test-vrt.js.map +0 -7
  61. package/test/overlay.test.js +0 -865
  62. package/test/overlay.test.js.map +0 -7
package/stories/overlay-element.stories.js DELETED
@@ -1,687 +0,0 @@
1
- "use strict";
2
- import { html, render } from "@spectrum-web-components/base";
3
- import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
4
- import "@spectrum-web-components/dialog/sp-dialog.js";
5
- import "@spectrum-web-components/overlay/sp-overlay.js";
6
- import "@spectrum-web-components/action-button/sp-action-button.js";
7
- import "@spectrum-web-components/action-menu/sp-action-menu.js";
8
- import "@spectrum-web-components/action-group/sp-action-group.js";
9
- import "@spectrum-web-components/popover/sp-popover.js";
10
- import "@spectrum-web-components/menu/sp-menu-group.js";
11
- import "@spectrum-web-components/menu/sp-menu-item.js";
12
- import "@spectrum-web-components/menu/sp-menu-divider.js";
13
- import "@spectrum-web-components/link/sp-link.js";
14
- import "@spectrum-web-components/tooltip/sp-tooltip.js";
15
- import "@spectrum-web-components/slider/sp-slider.js";
16
- import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
17
- import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
18
- import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
19
- import { notAgain } from "../../dialog/stories/dialog-base.stories.js";
20
- import "./overlay-story-components.js";
21
- import {
22
- removeSlottableRequest
23
- } from "../src/slottable-request-event.js";
24
- export default {
25
- title: "Overlay Element",
26
- component: "sp-overlay",
27
- args: {
28
- open: true,
29
- delayed: false
30
- },
31
- argTypes: {
32
- open: {
33
- name: "open",
34
- type: { name: "boolean", required: false },
35
- description: "Whether the second accordion item is open.",
36
- table: {
37
- type: { summary: "boolean" },
38
- defaultValue: { summary: false }
39
- },
40
- control: {
41
- type: "boolean"
42
- }
43
- },
44
- delayed: {
45
- name: "delayed",
46
- type: { name: "boolean", required: false },
47
- description: "Whether the tooltips are delayed.",
48
- table: {
49
- type: { summary: "boolean" },
50
- defaultValue: { summary: false }
51
- },
52
- control: {
53
- type: "boolean"
54
- }
55
- }
56
- }
57
- };
58
- const Template = ({
59
- interaction,
60
- open,
61
- placement,
62
- type,
63
- delayed,
64
- style
65
- }) => html`
66
- ${style === "will-change" ? html`
67
- <style>
68
- .wrapper {
69
- will-change: transform;
70
- }
71
- </style>
72
- ` : html`
73
- <style>
74
- .wrapper {
75
- container-type: size;
76
- }
77
- </style>
78
- `}
79
- <div class="wrapper">
80
- <sp-action-button id="trigger">Open the overlay</sp-action-button>
81
- <sp-overlay
82
- ?open=${open}
83
- trigger="trigger@${interaction}"
84
- type=${ifDefined(type)}
85
- placement=${ifDefined(placement)}
86
- offset="-10"
87
- >
88
- <sp-popover ?delayed=${delayed}>
89
- <sp-dialog size="s" no-divider>
90
- <p>
91
- Content goes here.
92
- ${type === "modal" || type === "page" ? html`
93
- Or, a link,
94
- <sp-link
95
- href="https://opensource.adobe.com/spectrum-web-components"
96
- >
97
- Spectrum Web Components
98
- </sp-link>
99
- .
100
- ` : ""}
101
- </p>
102
- </sp-dialog>
103
- </sp-popover>
104
- </sp-overlay>
105
- </div>
106
- `;
107
- export const modal = (args) => Template(args);
108
- modal.args = {
109
- interaction: "click",
110
- placement: "right",
111
- style: "will-change",
112
- type: "modal"
113
- };
114
- export const page = ({
115
- interaction,
116
- open,
117
- placement,
118
- type
119
- }) => html`
120
- <sp-action-button id="trigger">Open the overlay</sp-action-button>
121
- <sp-overlay
122
- ?open=${open}
123
- trigger="trigger@${interaction}"
124
- type=${ifDefined(type)}
125
- placement=${ifDefined(placement)}
126
- >
127
- ${notAgain()}
128
- </sp-overlay>
129
- `;
130
- page.args = {
131
- interaction: "click",
132
- placement: "right",
133
- type: "page"
134
- };
135
- export const click = (args) => Template(args);
136
- click.args = {
137
- interaction: "click",
138
- placement: "right",
139
- style: "container-type",
140
- type: "auto"
141
- };
142
- export const withSlider = () => html`
143
- <sp-button id="triggerEl" variant="primary">Button popover</sp-button>
144
- <sp-overlay trigger="triggerEl@click" placement="bottom">
145
- <sp-popover tip>
146
- <sp-dialog no-divider class="options-popover-content">
147
- <p>Try clicking the slider after popover opens</p>
148
- <p>It shouldn't close the popover</p>
149
- <sp-slider
150
- value="5"
151
- step="0.5"
152
- min="0"
153
- max="20"
154
- label="Awesomeness"
155
- ></sp-slider>
156
- <sp-button>Press me</sp-button>
157
- </sp-dialog>
158
- </sp-popover>
159
- </sp-overlay>
160
- `;
161
- withSlider.swc_vrt = {
162
- skip: true
163
- };
164
- withSlider.parameters = {
165
- // Disables Chromatic's snapshotting on a global level
166
- chromatic: { disableSnapshot: true }
167
- };
168
- export const hover = (args) => Template(args);
169
- hover.args = {
170
- interaction: "hover",
171
- placement: "right",
172
- style: "will-change"
173
- };
174
- export const hoverTooltip = ({
175
- interaction,
176
- open,
177
- placement,
178
- type
179
- }) => html`
180
- <style>
181
- .wrapper {
182
- will-change: transform;
183
- }
184
- </style>
185
- <div class="wrapper">
186
- <sp-action-button id="trigger">Open the overlay</sp-action-button>
187
- <sp-overlay
188
- ?open=${open}
189
- trigger="trigger@${interaction}"
190
- type=${ifDefined(type)}
191
- placement=${ifDefined(placement)}
192
- offset="-10"
193
- >
194
- <sp-tooltip>Tooltip goes here.</sp-tooltip>
195
- </sp-overlay>
196
- </div>
197
- `;
198
- hoverTooltip.args = {
199
- interaction: "hover",
200
- placement: "right"
201
- };
202
- export const longpress = (args) => Template(args);
203
- longpress.args = {
204
- interaction: "longpress",
205
- placement: "right",
206
- style: "container-type",
207
- type: "auto"
208
- };
209
- export const receivesFocus = ({
210
- interaction,
211
- open,
212
- placement,
213
- receivesFocus: receivesFocus2,
214
- type
215
- }) => html`
216
- <sp-action-button id="trigger">
217
- Open the overlay (with focus)
218
- </sp-action-button>
219
- <sp-overlay
220
- ?open=${open}
221
- trigger="trigger@${interaction}"
222
- type=${ifDefined(type)}
223
- placement=${ifDefined(placement)}
224
- .receivesFocus=${receivesFocus2}
225
- >
226
- <sp-popover>
227
- <sp-dialog size="s" no-divider>
228
- <a href="https://example.com">Click Content</a>
229
- </sp-dialog>
230
- </sp-popover>
231
- </sp-overlay>
232
- `;
233
- receivesFocus.args = {
234
- interaction: "click",
235
- placement: "bottom-start",
236
- type: "auto",
237
- receivesFocus: "true"
238
- };
239
- export const transformed = (args) => html`
240
- <style>
241
- .transformed {
242
- transform: translateX(-50%);
243
- position: absolute;
244
- inset: auto;
245
- inset-inline-start: 200px;
246
- inset-block-start: 200px;
247
- inline-size: 100px;
248
- block-size: 50px;
249
- }
250
- </style>
251
- <div class="transformed">${Template(args)}</div>
252
- `;
253
- transformed.args = {
254
- interaction: "click",
255
- placement: "right",
256
- type: "auto"
257
- };
258
- export const contained = (args) => html`
259
- <style>
260
- .contained {
261
- contain: strict;
262
- position: absolute;
263
- inset: auto;
264
- inset-inline-start: 200px;
265
- inset-block-start: 200px;
266
- inline-size: 200px;
267
- block-size: 50px;
268
- padding-block: 75px;
269
- padding-inline-start: 300px;
270
- }
271
- </style>
272
- <div class="contained">${Template(args)}</div>
273
- `;
274
- contained.args = {
275
- interaction: "click",
276
- placement: "right",
277
- type: "auto"
278
- };
279
- export const all = ({ delayed }) => html`
280
- <sp-action-button id="trigger" hold-affordance>
281
- Open the overlay
282
- </sp-action-button>
283
- <sp-overlay trigger="trigger@click" type="auto" placement="right">
284
- <sp-popover>
285
- <sp-dialog size="s" no-divider>Click content</sp-dialog>
286
- </sp-popover>
287
- </sp-overlay>
288
- <sp-overlay ?delayed=${delayed} trigger="trigger@hover" type="hint">
289
- <sp-tooltip>Hover content</sp-tooltip>
290
- </sp-overlay>
291
- <sp-overlay trigger="trigger@longpress" type="auto" placement="right">
292
- <sp-popover>
293
- <sp-dialog size="s" no-divider>Longpress content</sp-dialog>
294
- </sp-popover>
295
- </sp-overlay>
296
- `;
297
- export const actionGroup = ({ delayed }) => {
298
- const popoverOffset = [6, -13];
299
- return html`
300
- <style>
301
- sp-popover sp-action-group {
302
- padding: calc(
303
- var(--spectrum-actiongroup-vertical-spacing-regular) *
304
- 0.75
305
- )
306
- calc(
307
- var(--spectrum-actiongroup-vertical-spacing-regular) / 2
308
- );
309
- }
310
- .root {
311
- inset-inline-end: 0em;
312
- inset-block-start: 3em;
313
- padding-block-end: 3em;
314
- }
315
- .root > sp-action-group > sp-action-button,
316
- .root > sp-action-group > sp-action-menu {
317
- top: 3em;
318
- position: relative;
319
- }
320
- </style>
321
- <sp-popover open class="root">
322
- <sp-action-group vertical quiet emphasized selects="single">
323
- <sp-action-button id="trigger-1" hold-affordance>
324
- <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
325
- </sp-action-button>
326
- <sp-action-button id="trigger-2" hold-affordance>
327
- <sp-icon-polygon-select
328
- slot="icon"
329
- ></sp-icon-polygon-select>
330
- </sp-action-button>
331
- <sp-action-button id="trigger-3" hold-affordance>
332
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
333
- </sp-action-button>
334
- <sp-action-menu label="More Actions" placement="left">
335
- <sp-menu-group id="cms">
336
- <span slot="header">cms</span>
337
- <sp-menu-item value="updateAllSiteContent">
338
- Update All Content
339
- </sp-menu-item>
340
- <sp-menu-item value="refreshAllXDs">
341
- Refresh All XDs
342
- </sp-menu-item>
343
- </sp-menu-group>
344
- <sp-menu-group id="ssg">
345
- <span slot="header">ssg</span>
346
- <sp-menu-item value="clearCache">
347
- Clear Cache
348
- </sp-menu-item>
349
- </sp-menu-group>
350
- <sp-menu-group id="vrt">
351
- <span slot="header">vrt</span>
352
- <sp-menu-item value="vrt-contributions">
353
- Contributions
354
- </sp-menu-item>
355
- <sp-menu-item value="vrt-internal">
356
- Internal
357
- </sp-menu-item>
358
- <sp-menu-item value="vrt-public">Public</sp-menu-item>
359
- <sp-menu-item value="vrt-patterns">
360
- Patterns
361
- </sp-menu-item>
362
- <sp-menu-item value="vrt">All</sp-menu-item>
363
- </sp-menu-group>
364
- <sp-menu-divider></sp-menu-divider>
365
- <sp-menu-group id="misc">
366
- <sp-menu-item value="logout">Logout</sp-menu-item>
367
- </sp-menu-group>
368
- </sp-action-menu>
369
- </sp-action-group>
370
- </sp-popover>
371
- <sp-overlay ?delayed=${delayed} trigger="trigger-1@hover" type="hint">
372
- <sp-tooltip>Hover</sp-tooltip>
373
- </sp-overlay>
374
- <sp-overlay
375
- trigger="trigger-1@longpress"
376
- type="auto"
377
- placement="right-start"
378
- .offset=${popoverOffset}
379
- >
380
- <sp-popover tip>
381
- <sp-action-group vertical quiet>
382
- <sp-action-button>
383
- <sp-icon-anchor-select
384
- slot="icon"
385
- ></sp-icon-anchor-select>
386
- </sp-action-button>
387
- <sp-action-button>
388
- <sp-icon-polygon-select
389
- slot="icon"
390
- ></sp-icon-polygon-select>
391
- </sp-action-button>
392
- <sp-action-button>
393
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
394
- </sp-action-button>
395
- </sp-action-group>
396
- </sp-popover>
397
- </sp-overlay>
398
- <sp-overlay ?delayed=${delayed} trigger="trigger-2@hover" type="hint">
399
- <sp-tooltip>Hover</sp-tooltip>
400
- </sp-overlay>
401
- <sp-overlay
402
- trigger="trigger-2@longpress"
403
- type="auto"
404
- placement="right-start"
405
- .offset=${popoverOffset}
406
- >
407
- <sp-popover tip>
408
- <sp-action-group vertical quiet>
409
- <sp-action-button>
410
- <sp-icon-anchor-select
411
- slot="icon"
412
- ></sp-icon-anchor-select>
413
- </sp-action-button>
414
- <sp-action-button>
415
- <sp-icon-polygon-select
416
- slot="icon"
417
- ></sp-icon-polygon-select>
418
- </sp-action-button>
419
- <sp-action-button>
420
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
421
- </sp-action-button>
422
- </sp-action-group>
423
- </sp-popover>
424
- </sp-overlay>
425
- <sp-overlay
426
- ?delayed=${delayed}
427
- trigger="trigger-3@hover"
428
- type="hint"
429
- open
430
- >
431
- <sp-tooltip>Hover</sp-tooltip>
432
- </sp-overlay>
433
- <sp-overlay
434
- trigger="trigger-3@longpress"
435
- type="auto"
436
- placement="right-start"
437
- .offset=${popoverOffset}
438
- >
439
- <sp-popover tip>
440
- <sp-action-group vertical quiet>
441
- <sp-action-button>
442
- <sp-icon-anchor-select
443
- slot="icon"
444
- ></sp-icon-anchor-select>
445
- </sp-action-button>
446
- <sp-action-button>
447
- <sp-icon-polygon-select
448
- slot="icon"
449
- ></sp-icon-polygon-select>
450
- </sp-action-button>
451
- <sp-action-button>
452
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
453
- </sp-action-button>
454
- </sp-action-group>
455
- </sp-popover>
456
- </sp-overlay>
457
- `;
458
- };
459
- export const actionGroupWithFilters = ({
460
- delayed
461
- }) => {
462
- const popoverOffset = [6, -13];
463
- return html`
464
- <style>
465
- sp-popover sp-action-group {
466
- padding: calc(
467
- var(--spectrum-actiongroup-vertical-spacing-regular) *
468
- 0.75
469
- )
470
- calc(
471
- var(--spectrum-actiongroup-vertical-spacing-regular) / 2
472
- );
473
- }
474
- .root {
475
- inset-inline-end: 0em;
476
- inset-block-start: 3em;
477
- padding-block-end: 3em;
478
- overflow: hidden;
479
- }
480
- .root > sp-action-group > sp-action-button,
481
- .root > sp-action-group > sp-action-menu {
482
- top: 3em;
483
- position: relative;
484
- }
485
- sp-action-button,
486
- sp-action-menu {
487
- background-image: linear-gradient(
488
- rgba(125, 125, 125, 0.2),
489
- rgba(125, 125, 125, 0.2)
490
- );
491
- background-blend-mode: multiply;
492
- filter: brightness(1) saturate(1);
493
- }
494
- </style>
495
- <p>
496
- This story outlines some CSS usage that is not yet covered by the
497
- placement calculations within the Overlay API.
498
- </p>
499
- <sp-popover open class="root">
500
- <sp-action-group vertical quiet emphasized selects="single">
501
- <sp-action-button id="trigger-1" hold-affordance>
502
- <sp-icon-anchor-select slot="icon"></sp-icon-anchor-select>
503
- <sp-tooltip ?delayed=${delayed} self-managed>
504
- Hover
505
- </sp-tooltip>
506
- <sp-overlay
507
- trigger="trigger-1@longpress"
508
- type="auto"
509
- placement="right-start"
510
- .offset=${popoverOffset}
511
- >
512
- <sp-popover tip>
513
- <sp-action-group vertical quiet>
514
- <sp-action-button>
515
- <sp-icon-anchor-select
516
- slot="icon"
517
- ></sp-icon-anchor-select>
518
- </sp-action-button>
519
- <sp-action-button>
520
- <sp-icon-polygon-select
521
- slot="icon"
522
- ></sp-icon-polygon-select>
523
- </sp-action-button>
524
- <sp-action-button>
525
- <sp-icon-rect-select
526
- slot="icon"
527
- ></sp-icon-rect-select>
528
- </sp-action-button>
529
- </sp-action-group>
530
- </sp-popover>
531
- </sp-overlay>
532
- </sp-action-button>
533
- <sp-action-button id="trigger-2" hold-affordance>
534
- <sp-icon-polygon-select
535
- slot="icon"
536
- ></sp-icon-polygon-select>
537
- </sp-action-button>
538
- <sp-action-button id="trigger-3" hold-affordance>
539
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
540
- <sp-tooltip ?delayed=${delayed} self-managed>
541
- Hover
542
- </sp-tooltip>
543
- </sp-action-button>
544
- <sp-action-menu label="More Actions">
545
- <sp-menu-group id="cms">
546
- <span slot="header">cms</span>
547
- <sp-menu-item value="updateAllSiteContent">
548
- Update All Content
549
- </sp-menu-item>
550
- <sp-menu-item value="refreshAllXDs">
551
- Refresh All XDs
552
- </sp-menu-item>
553
- </sp-menu-group>
554
- <sp-menu-group id="ssg">
555
- <span slot="header">ssg</span>
556
- <sp-menu-item value="clearCache">
557
- Clear Cache
558
- </sp-menu-item>
559
- </sp-menu-group>
560
- <sp-menu-group id="vrt">
561
- <span slot="header">vrt</span>
562
- <sp-menu-item value="vrt-contributions">
563
- Contributions
564
- </sp-menu-item>
565
- <sp-menu-item value="vrt-internal">
566
- Internal
567
- </sp-menu-item>
568
- <sp-menu-item value="vrt-public">Public</sp-menu-item>
569
- <sp-menu-item value="vrt-patterns">
570
- Patterns
571
- </sp-menu-item>
572
- <sp-menu-item value="vrt">All</sp-menu-item>
573
- </sp-menu-group>
574
- <sp-menu-divider></sp-menu-divider>
575
- <sp-menu-group id="misc">
576
- <sp-menu-item value="logout">Logout</sp-menu-item>
577
- </sp-menu-group>
578
- </sp-action-menu>
579
- </sp-action-group>
580
- </sp-popover>
581
- <sp-overlay ?delayed=${delayed} trigger="trigger-2@hover" type="hint">
582
- <sp-tooltip>Hover</sp-tooltip>
583
- </sp-overlay>
584
- <sp-overlay
585
- trigger="trigger-2@longpress"
586
- type="auto"
587
- placement="right-start"
588
- .offset=${popoverOffset}
589
- >
590
- <sp-popover tip>
591
- <sp-action-group vertical quiet>
592
- <sp-action-button>
593
- <sp-icon-anchor-select
594
- slot="icon"
595
- ></sp-icon-anchor-select>
596
- </sp-action-button>
597
- <sp-action-button>
598
- <sp-icon-polygon-select
599
- slot="icon"
600
- ></sp-icon-polygon-select>
601
- </sp-action-button>
602
- <sp-action-button>
603
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
604
- </sp-action-button>
605
- </sp-action-group>
606
- </sp-popover>
607
- </sp-overlay>
608
- <sp-overlay
609
- trigger="trigger-3@longpress"
610
- type="auto"
611
- placement="right-start"
612
- .offset=${popoverOffset}
613
- >
614
- <sp-popover tip>
615
- <sp-action-group vertical quiet>
616
- <sp-action-button>
617
- <sp-icon-anchor-select
618
- slot="icon"
619
- ></sp-icon-anchor-select>
620
- </sp-action-button>
621
- <sp-action-button>
622
- <sp-icon-polygon-select
623
- slot="icon"
624
- ></sp-icon-polygon-select>
625
- </sp-action-button>
626
- <sp-action-button>
627
- <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
628
- </sp-action-button>
629
- </sp-action-group>
630
- </sp-popover>
631
- </sp-overlay>
632
- `;
633
- };
634
- export const transientHover = () => html`
635
- <transient-hover></transient-hover>
636
- `;
637
- transientHover.swc_vrt = {
638
- skip: true
639
- };
640
- transientHover.parameters = {
641
- // Disables Chromatic's snapshotting on a global level
642
- chromatic: { disableSnapshot: true }
643
- };
644
- export const lazyElements = () => {
645
- const handleSlottableRequest = (event) => {
646
- const template = event.data === removeSlottableRequest ? void 0 : html`
647
- <sp-popover>
648
- <sp-dialog no-divider>
649
- <sp-slider
650
- value="5"
651
- step="0.5"
652
- min="0"
653
- max="20"
654
- label="Awesomeness"
655
- ></sp-slider>
656
- <div id="styled-div">
657
- The background of this div should be blue
658
- </div>
659
- <sp-button>
660
- Press Me
661
- <sp-tooltip self-managed delayed>
662
- Click to open another popover.
663
- </sp-tooltip>
664
- </sp-button>
665
- </sp-dialog>
666
- </sp-popover>
667
- `;
668
- render(template, event.target);
669
- };
670
- return html`
671
- <sp-button id="button">Trigger</sp-button>
672
- <sp-overlay
673
- placement="bottom"
674
- type="auto"
675
- trigger="button@click"
676
- @slottable-request=${handleSlottableRequest}
677
- ></sp-overlay>
678
- `;
679
- };
680
- lazyElements.swc_vrt = {
681
- skip: true
682
- };
683
- lazyElements.parameters = {
684
- // Disables Chromatic's snapshotting on a global level
685
- chromatic: { disableSnapshot: true }
686
- };
687
- //# sourceMappingURL=overlay-element.stories.js.map