@spectrum-web-components/overlay 0.31.1-react.2 → 0.31.1-react.21

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 (12) hide show
  1. package/custom-elements.json +16 -4
  2. package/package.json +6 -6
  3. package/stories/overlay-story-components.js +18 -15
  4. package/stories/overlay-story-components.js.map +2 -2
  5. package/stories/overlay.stories.js +217 -194
  6. package/stories/overlay.stories.js.map +2 -2
  7. package/test/index.js +53 -39
  8. package/test/index.js.map +2 -2
  9. package/test/overlay-trigger-extended.test.js +3 -2
  10. package/test/overlay-trigger-extended.test.js.map +2 -2
  11. package/test/overlay.test.js +2 -3
  12. package/test/overlay.test.js.map +2 -2
package/stories/overlay.stories.js CHANGED
@@ -128,42 +128,44 @@ const template = ({
128
128
  type=${ifDefined(type)}
129
129
  >
130
130
  <sp-button variant="primary" slot="trigger">Show Popover</sp-button>
131
- <sp-popover
132
- dialog
133
- slot="click-content"
134
- placement="${placement}"
135
- tip
136
- >
137
- <div class="options-popover-content">
138
- <sp-slider
139
- value="5"
140
- step="0.5"
141
- min="0"
142
- max="20"
143
- label="Awesomeness"
144
- ></sp-slider>
145
- <div id="styled-div">
146
- The background of this div should be blue
147
- </div>
148
- <overlay-trigger id="inner-trigger" placement="bottom">
149
- <sp-button slot="trigger">Press Me</sp-button>
150
- <sp-popover
151
- dialog
152
- slot="click-content"
153
- placement="bottom"
154
- tip
155
- open
156
- >
157
- <div class="options-popover-content">
158
- Another Popover
159
- </div>
160
- </sp-popover>
131
+ <sp-popover slot="click-content" placement="${placement}" tip>
132
+ <sp-dialog no-divider>
133
+ <div class="options-popover-content">
134
+ <sp-slider
135
+ value="5"
136
+ step="0.5"
137
+ min="0"
138
+ max="20"
139
+ label="Awesomeness"
140
+ ></sp-slider>
141
+ <div id="styled-div">
142
+ The background of this div should be blue
143
+ </div>
144
+ <overlay-trigger id="inner-trigger" placement="bottom">
145
+ <sp-button slot="trigger">Press Me</sp-button>
146
+ <sp-popover
147
+ slot="click-content"
148
+ placement="bottom"
149
+ tip
150
+ open
151
+ >
152
+ <sp-dialog size="s" no-divider>
153
+ <div class="options-popover-content">
154
+ Another Popover
155
+ </div>
156
+ </sp-dialog>
157
+ </sp-popover>
161
158
 
162
- <sp-tooltip slot="hover-content" delayed tip="bottom">
163
- Click to open another popover.
164
- </sp-tooltip>
165
- </overlay-trigger>
166
- </div>
159
+ <sp-tooltip
160
+ slot="hover-content"
161
+ delayed
162
+ tip="bottom"
163
+ >
164
+ Click to open another popover.
165
+ </sp-tooltip>
166
+ </overlay-trigger>
167
+ </div>
168
+ </sp-dialog>
167
169
  </sp-popover>
168
170
  <sp-tooltip
169
171
  slot="hover-content"
@@ -323,19 +325,21 @@ export const deep = () => html`
323
325
  <sp-button variant="primary" slot="trigger">
324
326
  Open popover 1 with buttons + selfmanaged Tooltips
325
327
  </sp-button>
326
- <sp-popover dialog slot="click-content" direction="bottom" tip open>
327
- <sp-action-button>
328
- <sp-tooltip self-managed placement="bottom" offset="0">
329
- My Tooltip 1
330
- </sp-tooltip>
331
- A
332
- </sp-action-button>
333
- <sp-action-button>
334
- <sp-tooltip self-managed placement="bottom" offset="0">
335
- My Tooltip 1
336
- </sp-tooltip>
337
- B
338
- </sp-action-button>
328
+ <sp-popover slot="click-content" direction="bottom" tip open>
329
+ <sp-dialog size="s" no-divider>
330
+ <sp-action-button>
331
+ <sp-tooltip self-managed placement="bottom" offset="0">
332
+ My Tooltip 1
333
+ </sp-tooltip>
334
+ A
335
+ </sp-action-button>
336
+ <sp-action-button>
337
+ <sp-tooltip self-managed placement="bottom" offset="0">
338
+ My Tooltip 1
339
+ </sp-tooltip>
340
+ B
341
+ </sp-action-button>
342
+ </sp-dialog>
339
343
  </sp-popover>
340
344
  </overlay-trigger>
341
345
 
@@ -343,9 +347,11 @@ export const deep = () => html`
343
347
  <sp-button variant="primary" slot="trigger">
344
348
  Open popover 2 with buttons without ToolTips
345
349
  </sp-button>
346
- <sp-popover dialog slot="click-content" direction="bottom" tip open>
347
- <sp-action-button>X</sp-action-button>
348
- <sp-action-button>Y</sp-action-button>
350
+ <sp-popover slot="click-content" direction="bottom" tip open>
351
+ <sp-dialog size="s" no-divider>
352
+ <sp-action-button>X</sp-action-button>
353
+ <sp-action-button>Y</sp-action-button>
354
+ </sp-dialog>
349
355
  </sp-popover>
350
356
  </overlay-trigger>
351
357
  `;
@@ -529,47 +535,47 @@ export const updated = () => {
529
535
  <sp-tooltip slot="hover-content" delayed tip="bottom">
530
536
  Click to open popover
531
537
  </sp-tooltip>
532
- <sp-popover
533
- dialog
534
- slot="click-content"
535
- position="bottom"
536
- tip
537
- open
538
- >
539
- <div class="options-popover-content">
540
- <sp-slider
541
- value="5"
542
- step="0.5"
543
- min="0"
544
- max="20"
545
- label="Awesomeness"
546
- ></sp-slider>
547
- <div id="styled-div">
548
- The background of this div should be blue
549
- </div>
550
- <overlay-trigger id="inner-trigger" placement="bottom">
551
- <sp-button slot="trigger">Press Me</sp-button>
552
- <sp-popover
553
- dialog
554
- slot="click-content"
538
+ <sp-popover slot="click-content" position="bottom" tip open>
539
+ <sp-dialog size="s" no-divider>
540
+ <div class="options-popover-content">
541
+ <sp-slider
542
+ value="5"
543
+ step="0.5"
544
+ min="0"
545
+ max="20"
546
+ label="Awesomeness"
547
+ ></sp-slider>
548
+ <div id="styled-div">
549
+ The background of this div should be blue
550
+ </div>
551
+ <overlay-trigger
552
+ id="inner-trigger"
555
553
  placement="bottom"
556
- tip
557
- open
558
554
  >
559
- <div class="options-popover-content">
560
- Another Popover
561
- </div>
562
- </sp-popover>
555
+ <sp-button slot="trigger">Press Me</sp-button>
556
+ <sp-popover
557
+ slot="click-content"
558
+ placement="bottom"
559
+ tip
560
+ open
561
+ >
562
+ <sp-dialog size="s" no-divider>
563
+ <div class="options-popover-content">
564
+ Another Popover
565
+ </div>
566
+ </sp-dialog>
567
+ </sp-popover>
563
568
 
564
- <sp-tooltip
565
- slot="hover-content"
566
- delayed
567
- tip="bottom"
568
- >
569
- Click to open another popover.
570
- </sp-tooltip>
571
- </overlay-trigger>
572
- </div>
569
+ <sp-tooltip
570
+ slot="hover-content"
571
+ delayed
572
+ tip="bottom"
573
+ >
574
+ Click to open another popover.
575
+ </sp-tooltip>
576
+ </overlay-trigger>
577
+ </div>
578
+ </sp-dialog>
573
579
  </sp-popover>
574
580
  </overlay-trigger>
575
581
  </overlay-drag>
@@ -788,34 +794,45 @@ export const superComplexModal = () => {
788
794
  return html`
789
795
  <overlay-trigger type="modal" placement="none">
790
796
  <sp-button slot="trigger" variant="accent">Toggle Dialog</sp-button>
791
- <sp-popover dialog slot="click-content">
792
- <overlay-trigger>
793
- <sp-button slot="trigger" variant="primary">
794
- Toggle Dialog
795
- </sp-button>
796
- <sp-popover dialog slot="click-content">
797
- <overlay-trigger type="modal">
798
- <sp-button slot="trigger" variant="secondary">
799
- Toggle Dialog
800
- </sp-button>
801
- <sp-popover dialog slot="click-content">
802
- <p>
803
- When you get this deep, this ActiveOverlay
804
- should be the only one in [slot="open"].
805
- </p>
806
- <p>
807
- All of the rest of the ActiveOverlay
808
- elements should have had their [slot]
809
- attribute removed.
810
- </p>
811
- <p>
812
- Closing this ActiveOverlay should replace
813
- them...
814
- </p>
815
- </sp-popover>
816
- </overlay-trigger>
817
- </sp-popover>
818
- </overlay-trigger>
797
+ <sp-popover slot="click-content">
798
+ <sp-dialog size="s">
799
+ <overlay-trigger>
800
+ <sp-button slot="trigger" variant="primary">
801
+ Toggle Dialog
802
+ </sp-button>
803
+ <sp-popover slot="click-content">
804
+ <sp-dialog size="s" no-divider>
805
+ <overlay-trigger type="modal">
806
+ <sp-button
807
+ slot="trigger"
808
+ variant="secondary"
809
+ >
810
+ Toggle Dialog
811
+ </sp-button>
812
+ <sp-popover slot="click-content">
813
+ <sp-dialog size="s" no-divider>
814
+ <p>
815
+ When you get this deep, this
816
+ ActiveOverlay should be the only
817
+ one in [slot="open"].
818
+ </p>
819
+ <p>
820
+ All of the rest of the
821
+ ActiveOverlay elements should
822
+ have had their [slot] attribute
823
+ removed.
824
+ </p>
825
+ <p>
826
+ Closing this ActiveOverlay
827
+ should replace them...
828
+ </p>
829
+ </sp-dialog>
830
+ </sp-popover>
831
+ </overlay-trigger>
832
+ </sp-dialog>
833
+ </sp-popover>
834
+ </overlay-trigger>
835
+ </sp-dialog>
819
836
  </sp-popover>
820
837
  </overlay-trigger>
821
838
  `;
@@ -991,8 +1008,10 @@ export const definedOverlayElement = () => {
991
1008
  return html`
992
1009
  <overlay-trigger placement="bottom" type="modal">
993
1010
  <sp-button variant="primary" slot="trigger">Open popover</sp-button>
994
- <sp-popover slot="click-content" direction="bottom" dialog>
995
- <popover-content></popover-content>
1011
+ <sp-popover slot="click-content" direction="bottom">
1012
+ <sp-dialog no-divider>
1013
+ <popover-content></popover-content>
1014
+ </sp-dialog>
996
1015
  </sp-popover>
997
1016
  </overlay-trigger>
998
1017
  `;
@@ -1004,15 +1023,19 @@ export const modalWithinNonModal = () => {
1004
1023
  <sp-button variant="primary" slot="trigger">
1005
1024
  Open inline overlay
1006
1025
  </sp-button>
1007
- <sp-popover slot="click-content" dialog>
1008
- <overlay-trigger type="modal">
1009
- <sp-button variant="primary" slot="trigger">
1010
- Open modal overlay
1011
- </sp-button>
1012
- <sp-popover slot="click-content" dialog>
1013
- Modal overlay
1014
- </sp-popover>
1015
- </overlay-trigger>
1026
+ <sp-popover slot="click-content">
1027
+ <sp-dialog size="s" no-divider>
1028
+ <overlay-trigger type="modal">
1029
+ <sp-button variant="primary" slot="trigger">
1030
+ Open modal overlay
1031
+ </sp-button>
1032
+ <sp-popover slot="click-content">
1033
+ <sp-dialog size="s" no-divider>
1034
+ Modal overlay
1035
+ </sp-dialog>
1036
+ </sp-popover>
1037
+ </overlay-trigger>
1038
+ </sp-dialog>
1016
1039
  </sp-popover>
1017
1040
  </overlay-trigger>
1018
1041
  `;
@@ -1030,10 +1053,12 @@ export const updating = () => {
1030
1053
  <sp-button variant="primary" slot="trigger">
1031
1054
  Open inline overlay
1032
1055
  </sp-button>
1033
- <sp-popover slot="click-content" dialog>
1034
- <sp-button variant="primary" @click=${update}>
1035
- Update trigger location.
1036
- </sp-button>
1056
+ <sp-popover slot="click-content">
1057
+ <sp-dialog size="s" no-divider>
1058
+ <sp-button variant="primary" @click=${update}>
1059
+ Update trigger location.
1060
+ </sp-button>
1061
+ </sp-dialog>
1037
1062
  </sp-popover>
1038
1063
  </overlay-trigger>
1039
1064
  `;
@@ -1051,68 +1076,66 @@ export const accordion = () => {
1051
1076
  Open overlay w/ accordion
1052
1077
  </sp-button>
1053
1078
  <div slot="click-content" style="max-height: 100%;display: flex;">
1054
- <sp-popover
1055
- open
1056
- dialog
1057
- style="overflow-y: scroll;position: static;"
1058
- >
1059
- <sp-accordion
1060
- allow-multiple
1061
- @sp-accordion-item-toggle=${handleToggle}
1062
- >
1063
- <sp-accordion-item label="Some things">
1064
- <p>
1065
- Thing
1066
- <br />
1067
- <br />
1068
- <br />
1069
- <br />
1070
- <br />
1071
- <br />
1072
- <br />
1073
- more things
1074
- </p>
1075
- </sp-accordion-item>
1076
- <sp-accordion-item label="Other things">
1077
- <p>
1078
- Thing
1079
- <br />
1080
- <br />
1081
- <br />
1082
- <br />
1083
- <br />
1084
- <br />
1085
- <br />
1086
- more things
1087
- </p>
1088
- </sp-accordion-item>
1089
- <sp-accordion-item label="More things">
1090
- <p>
1091
- Thing
1092
- <br />
1093
- <br />
1094
- <br />
1095
- <br />
1096
- <br />
1097
- <br />
1098
- <br />
1099
- more things
1100
- </p>
1101
- </sp-accordion-item>
1102
- <sp-accordion-item label="Additional things">
1103
- <p>
1104
- Thing
1105
- <br />
1106
- <br />
1107
- <br />
1108
- <br />
1109
- <br />
1110
- <br />
1111
- <br />
1112
- more things
1113
- </p>
1114
- </sp-accordion-item>
1115
- </sp-accordion>
1079
+ <sp-popover open style="overflow-y: scroll;position: static;">
1080
+ <sp-dialog size="s" no-divider>
1081
+ <sp-accordion
1082
+ allow-multiple
1083
+ @sp-accordion-item-toggle=${handleToggle}
1084
+ >
1085
+ <sp-accordion-item label="Some things">
1086
+ <p>
1087
+ Thing
1088
+ <br />
1089
+ <br />
1090
+ <br />
1091
+ <br />
1092
+ <br />
1093
+ <br />
1094
+ <br />
1095
+ more things
1096
+ </p>
1097
+ </sp-accordion-item>
1098
+ <sp-accordion-item label="Other things">
1099
+ <p>
1100
+ Thing
1101
+ <br />
1102
+ <br />
1103
+ <br />
1104
+ <br />
1105
+ <br />
1106
+ <br />
1107
+ <br />
1108
+ more things
1109
+ </p>
1110
+ </sp-accordion-item>
1111
+ <sp-accordion-item label="More things">
1112
+ <p>
1113
+ Thing
1114
+ <br />
1115
+ <br />
1116
+ <br />
1117
+ <br />
1118
+ <br />
1119
+ <br />
1120
+ <br />
1121
+ more things
1122
+ </p>
1123
+ </sp-accordion-item>
1124
+ <sp-accordion-item label="Additional things">
1125
+ <p>
1126
+ Thing
1127
+ <br />
1128
+ <br />
1129
+ <br />
1130
+ <br />
1131
+ <br />
1132
+ <br />
1133
+ <br />
1134
+ more things
1135
+ </p>
1136
+ </sp-accordion-item>
1137
+ </sp-accordion>
1138
+ </sp-dialog>
1116
1139
  </sp-popover>
1117
1140
  </div>
1118
1141
  </overlay-trigger>