fix: allow ActiveOverlay to manage open state

adobe · Jan 27, 2021 · a7c4cff · a7c4cff
1 parent 6c496c0
commit a7c4cff
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md
@@ -38,16 +38,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
     >
         Content of the dialog
     </sp-dialog-wrapper>
-    <sp-button
-        slot="trigger"
-        variant="primary"
-        onClick="
-            const overlayTrigger = this.parentElement;
-            overlayTrigger.clickContent.open = true;
-        "
-    >
-        Toggle Dialog
-    </sp-button>
+    <sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
 </overlay-trigger>
 ```
 
@@ -72,7 +63,6 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
         onClick="
             const overlayTrigger = this.parentElement;
             const dialogWrapper = overlayTrigger.clickContent;
-            dialogWrapper.open = true;
             function handleEvent({type}) {
                 spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
                 dialogWrapper.open = false;

diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts
@@ -35,6 +35,9 @@ export class Popover extends SpectrumElement {
         return [popoverStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
     /**
      * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
      * @attr

diff --git a/packages/tooltip/src/Tooltip.ts b/packages/tooltip/src/Tooltip.ts
@@ -35,6 +35,9 @@ export class Tooltip extends SpectrumElement {
         return [tooltipStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
     /**
      * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
      * @attr