docs(popover): add toggleSpectrumPopover to show open/close

adobe · Oct 31, 2023 · 1f3c77d · 1f3c77d
1 parent 89206a2
commit 1f3c77d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/components/popover/metadata/popover.yml b/components/popover/metadata/popover.yml
@@ -51,7 +51,7 @@ examples:
               </li>
             </ul>
           </div>
-          <div class="dummy-spacing" style="position: relative; height: 162px; min-width: 200px; max-width: 50%;"></div>
+          <div class="dummy-spacing" style="position: relative; height: 146px; min-width: 166px; max-width: 50%;"></div>
         </div>
 
         <div class="spectrum-Examples-item">
@@ -76,7 +76,7 @@ examples:
               <path class="spectrum-Popover-tip-triangle" d="M-1,-1 8,8 17,-1">
             </svg>
           </div>
-          <div class="dummy-spacing" style="position: relative; height: 170px; min-width: 200px; max-width: 50%;"></div>
+          <div class="dummy-spacing" style="position: relative; height: 146px; min-width: 166px; max-width: 50%;"></div>
         </div>
       </div>
 
@@ -87,7 +87,8 @@ examples:
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 16px;">Cross Offset of Tip =  50px</h4>
-          <div class="spectrum-Popover spectrum-Popover--top-start spectrum-Popover--withTip is-open" role="presentation" style="--spectrum-popover-pointer-edge-offset: 50px;">
+          <br>
+          <div class="spectrum-Popover spectrum-Popover--top-start spectrum-Popover--withTip is-open" role="presentation" style="--spectrum-popover-pointer-edge-offset: 50px;" id="popover1">
             <section class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
               <div class="spectrum-Dialog-grid" style="display: grid;">
                 <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Popover Title</h1>
@@ -99,19 +100,20 @@ examples:
               <path class="spectrum-Popover-tip-triangle" d="M-1,-1 8,8 17,-1">
             </svg>
           </div>
-          <div class="dummy-spacing" style="position: relative; box-sizing: border-box; height: 235px; min-width: 400px; max-width: 50%;"></div>
+          <div class="dummy-spacing" style="position: relative; box-sizing: border-box; height: 233px; min-width: 402px; max-width: 50%;"></div>
 
-          <div class="dummy-source" style="position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 50px; background: #E6E6E6; border-radius: 8px; box-sizing: border-box;">
-            <span><em>Source 50x100</em></span>
-          </div>
+          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="toggleSpectrumPopover(document.getElementById('popover1'))" style="position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;">
+            <span>Source 50x100</span>
+          </button>
           <br>
         </div>
 
         <div class="spectrum-Examples-item" style="position: relative;">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading" style="margin-bottom: 16px;">Cross Offset of Tip = 50px</h4>
-          <div class="dummy-source" style="position: relative; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 100px; height: 50px; background: #E6E6E6; border-radius: 8px; box-sizing: border-box; margin-bottom: 16px;">
-            <span><em>Source 50x100</em></span>
-          </div>
+
+          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="toggleSpectrumPopover(this.nextElementSibling)" style="position: relative; margin-left: auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box;">
+            <span class="spectrum-Button-label">Source 50x100</span>
+          </button>
 
           <div class="spectrum-Popover spectrum-Popover--bottom-end spectrum-Popover--withTip is-open" role="presentation" style="--spectrum-popover-pointer-edge-offset: 50px;">
             <section class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
@@ -125,7 +127,7 @@ examples:
               <path class="spectrum-Popover-tip-triangle" d="M-1,-1 8,8 17,-1">
             </svg>
           </div>
-          <div class="dummy-spacing" style="position: relative; box-sizing: border-box; height: 224px; min-width: 400px; max-width: 50%;"></div>
+          <div class="dummy-spacing" style="position: relative; box-sizing: border-box; height: 233px; min-width: 402px; max-width: 50%;"></div>
         </div>
       </div>
 

diff --git a/site/resources/js/enhancement.js b/site/resources/js/enhancement.js
@@ -880,6 +880,12 @@ function closeDialog(dialog) {
 	}, 130);
 }
 
+function toggleSpectrumPopover(popover) {
+	popover.classList.contains("is-open")
+		? popover.classList.remove("is-open")
+		: popover.classList.add("is-open");
+}
+
 function animateCircleLoaders() {
 	var value = 0;
 	setInterval(function () {