feat: popover plugin support

package.json

@@ -53,6 +53,7 @@
     "@spectrum-web-components/menu": "0.43.0",
     "@spectrum-web-components/overlay": "0.43.0",
     "@spectrum-web-components/picker": "0.43.0",
+    "@spectrum-web-components/popover": "0.43.0",
     "@spectrum-web-components/progress-circle": "0.43.0",
     "@spectrum-web-components/search": "0.43.0",
     "@spectrum-web-components/status-light": "0.43.0",

src/extension/app/components/plugin/plugin-action-bar.css.js

@@ -143,6 +143,18 @@ export const style = css`
     opacity: 0.5;
   }
 
+  action-bar overlay-trigger sp-popover .content {
+    padding: 10px;
+    height: 100%;
+  }
+
+  action-bar overlay-trigger sp-popover .content iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    color-scheme: auto;
+  }
+
   #plugin-menu sp-menu-group [slot="header"] {
     text-transform: uppercase;
     font-size: var(--spectrum-global-dimension-font-size-75);

src/extension/app/components/plugin/plugin.js

@@ -13,6 +13,7 @@
 /* eslint-disable max-len */
 
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { EXTERNAL_EVENTS } from '../../constants.js';
 
 /**
@@ -150,6 +151,14 @@
     return this.config.isBadge;
   }
 
+  /**
+   * Is this plugin a popover?
+   * @returns {boolean} True if the plugin is a popover
+   */
+  isPopover() {
+    return this.config.isPopover;
+  }
+
   /**
    * Adds a plugin to this plugin's children.
    * @param {Plugin} plugin The plugin to add
@@ -257,13 +266,29 @@
         `;
       }
 
+      if (this.isPopover() && this.config.url) {
+        const src = new URL(this.config.url);
+        src.searchParams.set('theme', this.appStore.theme);
+        return html`
+          <overlay-trigger receivesFocus="true" offset="-3">
+            <sk-action-button quiet slot="trigger">${this.getButtonText()}</sk-action-button>
+            <sp-popover slot="click-content" placement="top" tip style=${ifDefined(this.config.popoverRect)}>
+              <div class="content">
+                <iframe title="Popover content" src=${src}></iframe>
+              </div>
+            </sp-popover>
+          </overlay-trigger>`;
+      }
+
       return html`
         <sk-action-button
           class=${this.getId()}
           .disabled=${!this.isEnabled()}
           quiet
           @click=${(evt) => this.onButtonClick(evt)}
-        >${this.getButtonText()}</sk-action-button>
+        >
+          ${this.getButtonText()}
+        </sk-action-button>
       `;
     }
 

src/extension/app/store/app.js

@@ -337,6 +337,8 @@ export class AppStore {
             passConfig,
             passReferrer,
             isPalette,
+            isPopover,
+            popoverRect,
             event: eventName,
             environments,
             excludePaths,
@@ -417,7 +419,10 @@ export class AppStore {
             pinned,
             confirm,
             container: containerId,
+            url,
             isBadge,
+            isPopover,
+            popoverRect,
             badgeVariant,
           };
 

src/extension/index.js

@@ -18,6 +18,8 @@ import '@spectrum-web-components/divider/sp-divider.js';
 import '@spectrum-web-components/dialog/sp-dialog-base.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/overlay/sp-overlay.js';
+import '@spectrum-web-components/overlay/overlay-trigger.js';
+import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/status-light/sp-status-light.js';
 import '@spectrum-web-components/switch/sp-switch.js';

src/extension/types/typedefs.js

@@ -109,6 +109,8 @@
  * @prop {boolean} [isContainer] Determines whether to turn this plugin into a dropdown
  * @prop {boolean} [isPalette] Determines whether a URL is opened in a palette instead of a new tab
  * @prop {string} [paletteRect] The dimensions and position of a palette (optional)
+ * @prop {boolean} [isPopover] Determines whether a URL is opened in a popover instead of a new tab
+ * @prop {string} [popoverRect] The dimensions and position of a popover (optional)
  * @prop {boolean} [isBadge] Determines whether the plugin is a badge (optional)
  * @prop {string} [badgeVariant] The color variant of the badge (optional)
  * @prop {string[]} [environments] Specifies when to show this plugin (admin, edit, dev, preview, live, prod)