feat(popover): use core tokens

adobe · May 22, 2023 · 68328cc · 68328cc
1 parent c139923
commit 68328cc
Show file tree

Hide file tree

Showing 18 changed files with 999 additions and 472 deletions.
diff --git a/packages/dialog/stories/index.ts b/packages/dialog/stories/index.ts
@@ -29,9 +29,10 @@ class OverlayTriggerReady extends HTMLElement {
 
     async setup(): Promise<void> {
         await nextFrame();
+        await nextFrame();
 
         const overlay = document.querySelector(
-            `overlay-trigger`
+            `overlay-trigger[open]`
         ) as HTMLElement;
         overlay.addEventListener('sp-opened', this.handleTriggerOpened);
     }

diff --git a/packages/overlay/overlay-trigger.md b/packages/overlay/overlay-trigger.md
@@ -45,8 +45,8 @@ Here a default `<overlay-trigger>` manages content that is triggered by click an
 ```html
 <overlay-trigger id="trigger" placement="bottom" offset="6">
     <sp-button variant="primary" slot="trigger">Button popover</sp-button>
-    <sp-popover dialog slot="click-content" direction="bottom" tip>
-        <div class="options-popover-content">
+    <sp-popover slot="click-content" direction="bottom" tip>
+        <sp-dialog no-divider class="options-popover-content">
             <sp-slider
                 value="5"
                 step="0.5"
@@ -55,7 +55,7 @@ Here a default `<overlay-trigger>` manages content that is triggered by click an
                 label="Awesomeness"
             ></sp-slider>
             <sp-button>Press me</sp-button>
-        </div>
+        </sp-dialog>
     </sp-popover>
     <sp-tooltip slot="hover-content" delayed>Tooltip</sp-tooltip>
     <sp-popover slot="longpress-content" tip>

diff --git a/packages/overlay/stories/overlay-story-components.ts b/packages/overlay/stories/overlay-story-components.ts
@@ -286,23 +286,24 @@ class RecursivePopover extends LitElement {
                     Open Popover
                 </sp-button>
                 <sp-popover
-                    dialog
                     slot="click-content"
                     direction="${this.placement}"
                     tip
                     open
                 >
-                    ${this.depth < MAX_DEPTH
-                        ? html`
-                              <recursive-popover
-                                  position="${this.placement}"
-                                  depth="${this.depth + 1}"
-                                  tabindex="0"
-                              ></recursive-popover>
-                          `
-                        : html`
-                              <div>Maximum Depth</div>
-                          `}
+                    <sp-dialog size="s" no-divider>
+                        ${this.depth < MAX_DEPTH
+                            ? html`
+                                  <recursive-popover
+                                      position="${this.placement}"
+                                      depth="${this.depth + 1}"
+                                      tabindex="0"
+                                  ></recursive-popover>
+                              `
+                            : html`
+                                  <div>Maximum Depth</div>
+                              `}
+                    </sp-dialog>
                 </sp-popover>
             </overlay-trigger>
         `;
@@ -321,11 +322,13 @@ export class PopoverContent extends LitElement {
         return html`
             <overlay-trigger>
                 <sp-button slot="trigger">Open me</sp-button>
-                <sp-popover slot="click-content" direction="bottom" dialog>
-                    <p>This is all the content.</p>
-                    <p>This is all the content.</p>
-                    <p>This is all the content.</p>
-                    <p>This is all the content.</p>
+                <sp-popover slot="click-content" direction="bottom">
+                    <sp-dialog no-divider>
+                        <p>This is all the content.</p>
+                        <p>This is all the content.</p>
+                        <p>This is all the content.</p>
+                        <p>This is all the content.</p>
+                    </sp-dialog>
                 </sp-popover>
             </overlay-trigger>
         `;