@spectrum-web-components/overlay 0.31.1-react.3 → 0.32.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 (16) hide show
  1. package/custom-elements.json +25 -13
  2. package/package.json +6 -6
  3. package/src/overlay-stack.dev.js +3 -2
  4. package/src/overlay-stack.dev.js.map +2 -2
  5. package/src/overlay-stack.js +5 -4
  6. package/src/overlay-stack.js.map +2 -2
  7. package/stories/overlay-story-components.js +18 -15
  8. package/stories/overlay-story-components.js.map +2 -2
  9. package/stories/overlay.stories.js +217 -194
  10. package/stories/overlay.stories.js.map +2 -2
  11. package/test/index.js +53 -39
  12. package/test/index.js.map +2 -2
  13. package/test/overlay-trigger-extended.test.js +3 -2
  14. package/test/overlay-trigger-extended.test.js.map +2 -2
  15. package/test/overlay.test.js +2 -3
  16. package/test/overlay.test.js.map +2 -2
package/stories/overlay-story-components.js CHANGED
@@ -253,21 +253,22 @@ class RecursivePopover extends LitElement {
253
253
  Open Popover
254
254
  </sp-button>
255
255
  <sp-popover
256
- dialog
257
256
  slot="click-content"
258
257
  direction="${this.placement}"
259
258
  tip
260
259
  open
261
260
  >
262
- ${this.depth < MAX_DEPTH ? html`
263
- <recursive-popover
264
- position="${this.placement}"
265
- depth="${this.depth + 1}"
266
- tabindex="0"
267
- ></recursive-popover>
268
- ` : html`
269
- <div>Maximum Depth</div>
270
- `}
261
+ <sp-dialog size="s" no-divider>
262
+ ${this.depth < MAX_DEPTH ? html`
263
+ <recursive-popover
264
+ position="${this.placement}"
265
+ depth="${this.depth + 1}"
266
+ tabindex="0"
267
+ ></recursive-popover>
268
+ ` : html`
269
+ <div>Maximum Depth</div>
270
+ `}
271
+ </sp-dialog>
271
272
  </sp-popover>
272
273
  </overlay-trigger>
273
274
  `;
@@ -288,11 +289,13 @@ export class PopoverContent extends LitElement {
288
289
  return html`
289
290
  <overlay-trigger>
290
291
  <sp-button slot="trigger">Open me</sp-button>
291
- <sp-popover slot="click-content" direction="bottom" dialog>
292
- <p>This is all the content.</p>
293
- <p>This is all the content.</p>
294
- <p>This is all the content.</p>
295
- <p>This is all the content.</p>
292
+ <sp-popover slot="click-content" direction="bottom">
293
+ <sp-dialog no-divider>
294
+ <p>This is all the content.</p>
295
+ <p>This is all the content.</p>
296
+ <p>This is all the content.</p>
297
+ <p>This is all the content.</p>
298
+ </sp-dialog>
296
299
  </sp-popover>
297
300
  </overlay-trigger>
298
301
  `;
package/stories/overlay-story-components.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["overlay-story-components.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n Overlay,\n OverlayTrigger,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { RadioGroup } from '@spectrum-web-components/radio';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\n// Prevent infinite recursion in browser\nconst MAX_DEPTH = 7;\n\nclass OverlayTargetIcon extends LitElement {\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n display: block;\n color: var(--spectrum-global-color-magenta-700);\n width: 64px;\n height: 64px;\n top: 0;\n left: 0;\n }\n `;\n }\n\n public override render(): TemplateResult {\n return html`\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"bullseye\"\n class=\"svg-inline--fa fa-bullseye fa-w-16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 496 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z\"\n ></path>\n </svg>\n `;\n }\n}\ncustomElements.define('overlay-target-icon', OverlayTargetIcon);\n\nclass OverlayDrag extends LitElement {\n @property({ type: Number })\n private top = 100;\n @property({ type: Number })\n private left = 100;\n\n private targetElement: HTMLElement | undefined | null;\n\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n ::slotted(*) {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n }\n\n private onSlotChange(event: Event & { target: HTMLSlotElement }): void {\n const slot = event.target as HTMLSlotElement;\n this.targetElement = undefined;\n\n const nodes = slot.assignedNodes();\n const slotElement = nodes.find(\n (node) => node instanceof HTMLElement\n ) as HTMLElement;\n if (!slotElement) return;\n\n this.targetElement = slotElement.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLElement;\n if (!this.targetElement) return;\n\n this.targetElement.addEventListener('mousedown', (event) =>\n this.onMouseDown(event)\n );\n\n this.resetTargetPosition();\n }\n\n private onMouseDown(event: MouseEvent): void {\n const target = event.target as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n const max = {\n x: parent.offsetWidth - target.offsetWidth,\n y: parent.offsetHeight - target.offsetHeight,\n };\n const dragStart = {\n x: event.clientX,\n y: event.clientY,\n };\n const originalPos = {\n x: this.left,\n y: this.top,\n };\n\n const onMouseMove = (event: MouseEvent): void => {\n const dragDelta = {\n x: event.clientX - dragStart.x,\n y: event.clientY - dragStart.y,\n };\n const newPosition = {\n x: dragDelta.x + originalPos.x,\n y: dragDelta.y + originalPos.y,\n };\n this.left = Math.min(Math.max(newPosition.x, 0), max.x);\n this.top = Math.min(Math.max(newPosition.y, 0), max.y);\n Overlay.update();\n };\n\n const onMouseUp = (): void => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n\n public resetTargetPosition(): void {\n if (!this.targetElement) return;\n const target = this.targetElement as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n this.left = (parent.offsetWidth - target.offsetWidth) / 2;\n this.top = (parent.offsetHeight - target.offsetHeight) / 2;\n }\n\n public override updated(): void {\n if (this.targetElement) {\n this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <slot @slotchange=${this.onSlotChange}></slot>\n `;\n }\n}\ncustomElements.define('overlay-drag', OverlayDrag);\n\nclass RecursivePopover extends LitElement {\n @property({ type: String })\n private placement: Placement;\n\n @property({ type: Number })\n private depth = 0;\n\n @query('[slot=\"trigger\"]')\n private trigger!: Button;\n\n protected isShiftTabbing = false;\n\n public override shadowRoot!: ShadowRoot;\n\n public static override get styles(): CSSResultGroup {\n return [\n css`\n :host {\n display: block;\n text-align: center;\n }\n\n overlay-trigger {\n display: inline-flex;\n margin-top: 11px;\n }\n `,\n ];\n }\n\n public constructor() {\n super();\n this.placement = 'right';\n this.depth = 0;\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code } = event;\n if (code === 'Enter') {\n this.trigger.click();\n }\n });\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin(): void {\n this.focus();\n }\n\n public override focus(): void {\n if (this.shadowRoot.activeElement !== null) {\n return;\n }\n const firstFocusable = this.shadowRoot.querySelector(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as LitElement;\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n } else {\n firstFocusable.focus();\n }\n return;\n }\n super.focus();\n }\n\n public onRadioChange(event: Event): void {\n const target = event.target as RadioGroup;\n this.placement = target.selected as Placement;\n }\n\n private captureEnter(event: KeyboardEvent): void {\n const { code } = event;\n if (code === 'Enter') {\n event.stopPropagation();\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <sp-radio-group\n horizontal\n @change=${this.onRadioChange}\n selected=\"${this.placement}\"\n name=\"group-example\"\n >\n <sp-radio value=\"top\">Top</sp-radio>\n <sp-radio value=\"right\">Right</sp-radio>\n <sp-radio value=\"bottom\">Bottom</sp-radio>\n <sp-radio value=\"left\">Left</sp-radio>\n </sp-radio-group>\n <overlay-trigger placement=\"${this.placement}\" type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"accent\"\n @keydown=${this.captureEnter}\n >\n Open Popover\n </sp-button>\n <sp-popover\n dialog\n slot=\"click-content\"\n direction=\"${this.placement}\"\n tip\n open\n >\n ${this.depth < MAX_DEPTH\n ? html`\n <recursive-popover\n position=\"${this.placement}\"\n depth=\"${this.depth + 1}\"\n tabindex=\"0\"\n ></recursive-popover>\n `\n : html`\n <div>Maximum Depth</div>\n `}\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\ncustomElements.define('recursive-popover', RecursivePopover);\n\nexport class PopoverContent extends LitElement {\n @query('[slot=\"trigger\"]')\n public button!: Button;\n\n @query('overlay-trigger')\n public trigger!: OverlayTrigger;\n\n override render(): TemplateResult {\n return html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Open me</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" dialog>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\n\ncustomElements.define('popover-content', PopoverContent);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'popover-content': PopoverContent;\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport {\n Overlay,\n OverlayTrigger,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { RadioGroup } from '@spectrum-web-components/radio';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\n// Prevent infinite recursion in browser\nconst MAX_DEPTH = 7;\n\nclass OverlayTargetIcon extends LitElement {\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n display: block;\n color: var(--spectrum-global-color-magenta-700);\n width: 64px;\n height: 64px;\n top: 0;\n left: 0;\n }\n `;\n }\n\n public override render(): TemplateResult {\n return html`\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"bullseye\"\n class=\"svg-inline--fa fa-bullseye fa-w-16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 496 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z\"\n ></path>\n </svg>\n `;\n }\n}\ncustomElements.define('overlay-target-icon', OverlayTargetIcon);\n\nclass OverlayDrag extends LitElement {\n @property({ type: Number })\n private top = 100;\n @property({ type: Number })\n private left = 100;\n\n private targetElement: HTMLElement | undefined | null;\n\n static override get styles(): CSSResultGroup {\n return css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n ::slotted(*) {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n }\n\n private onSlotChange(event: Event & { target: HTMLSlotElement }): void {\n const slot = event.target as HTMLSlotElement;\n this.targetElement = undefined;\n\n const nodes = slot.assignedNodes();\n const slotElement = nodes.find(\n (node) => node instanceof HTMLElement\n ) as HTMLElement;\n if (!slotElement) return;\n\n this.targetElement = slotElement.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLElement;\n if (!this.targetElement) return;\n\n this.targetElement.addEventListener('mousedown', (event) =>\n this.onMouseDown(event)\n );\n\n this.resetTargetPosition();\n }\n\n private onMouseDown(event: MouseEvent): void {\n const target = event.target as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n const max = {\n x: parent.offsetWidth - target.offsetWidth,\n y: parent.offsetHeight - target.offsetHeight,\n };\n const dragStart = {\n x: event.clientX,\n y: event.clientY,\n };\n const originalPos = {\n x: this.left,\n y: this.top,\n };\n\n const onMouseMove = (event: MouseEvent): void => {\n const dragDelta = {\n x: event.clientX - dragStart.x,\n y: event.clientY - dragStart.y,\n };\n const newPosition = {\n x: dragDelta.x + originalPos.x,\n y: dragDelta.y + originalPos.y,\n };\n this.left = Math.min(Math.max(newPosition.x, 0), max.x);\n this.top = Math.min(Math.max(newPosition.y, 0), max.y);\n Overlay.update();\n };\n\n const onMouseUp = (): void => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n\n public resetTargetPosition(): void {\n if (!this.targetElement) return;\n const target = this.targetElement as HTMLElement;\n const parent = target.parentElement;\n if (!parent) return;\n\n this.left = (parent.offsetWidth - target.offsetWidth) / 2;\n this.top = (parent.offsetHeight - target.offsetHeight) / 2;\n }\n\n public override updated(): void {\n if (this.targetElement) {\n this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <slot @slotchange=${this.onSlotChange}></slot>\n `;\n }\n}\ncustomElements.define('overlay-drag', OverlayDrag);\n\nclass RecursivePopover extends LitElement {\n @property({ type: String })\n private placement: Placement;\n\n @property({ type: Number })\n private depth = 0;\n\n @query('[slot=\"trigger\"]')\n private trigger!: Button;\n\n protected isShiftTabbing = false;\n\n public override shadowRoot!: ShadowRoot;\n\n public static override get styles(): CSSResultGroup {\n return [\n css`\n :host {\n display: block;\n text-align: center;\n }\n\n overlay-trigger {\n display: inline-flex;\n margin-top: 11px;\n }\n `,\n ];\n }\n\n public constructor() {\n super();\n this.placement = 'right';\n this.depth = 0;\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code } = event;\n if (code === 'Enter') {\n this.trigger.click();\n }\n });\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin(): void {\n this.focus();\n }\n\n public override focus(): void {\n if (this.shadowRoot.activeElement !== null) {\n return;\n }\n const firstFocusable = this.shadowRoot.querySelector(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as LitElement;\n if (firstFocusable) {\n if (firstFocusable.updateComplete) {\n firstFocusable.updateComplete.then(() =>\n firstFocusable.focus()\n );\n } else {\n firstFocusable.focus();\n }\n return;\n }\n super.focus();\n }\n\n public onRadioChange(event: Event): void {\n const target = event.target as RadioGroup;\n this.placement = target.selected as Placement;\n }\n\n private captureEnter(event: KeyboardEvent): void {\n const { code } = event;\n if (code === 'Enter') {\n event.stopPropagation();\n }\n }\n\n public override render(): TemplateResult {\n return html`\n <sp-radio-group\n horizontal\n @change=${this.onRadioChange}\n selected=\"${this.placement}\"\n name=\"group-example\"\n >\n <sp-radio value=\"top\">Top</sp-radio>\n <sp-radio value=\"right\">Right</sp-radio>\n <sp-radio value=\"bottom\">Bottom</sp-radio>\n <sp-radio value=\"left\">Left</sp-radio>\n </sp-radio-group>\n <overlay-trigger placement=\"${this.placement}\" type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"accent\"\n @keydown=${this.captureEnter}\n >\n Open Popover\n </sp-button>\n <sp-popover\n slot=\"click-content\"\n direction=\"${this.placement}\"\n tip\n open\n >\n <sp-dialog size=\"s\" no-divider>\n ${this.depth < MAX_DEPTH\n ? html`\n <recursive-popover\n position=\"${this.placement}\"\n depth=\"${this.depth + 1}\"\n tabindex=\"0\"\n ></recursive-popover>\n `\n : html`\n <div>Maximum Depth</div>\n `}\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\ncustomElements.define('recursive-popover', RecursivePopover);\n\nexport class PopoverContent extends LitElement {\n @query('[slot=\"trigger\"]')\n public button!: Button;\n\n @query('overlay-trigger')\n public trigger!: OverlayTrigger;\n\n override render(): TemplateResult {\n return html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Open me</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\">\n <sp-dialog no-divider>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n <p>This is all the content.</p>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n }\n}\n\ncustomElements.define('popover-content', PopoverContent);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'popover-content': PopoverContent;\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["event"]
7
7
  }
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>