popover example in the dialog improved

Author: anna-lach

packages/components/dialog/src/dialog.stories.ts

@@ -246,6 +246,11 @@ export const DialogWithOverlayComponents: Story = {
         popover?.togglePopover();
       };
 
+      const hidePopover = (): void => {
+        const popover = document.getElementById('popover-example') as HTMLElement & { togglePopover(): void };
+        popover?.hidePopover();
+      };
+
       dialog.innerHTML = `
         <span slot="title">Dialog with overlay components</span>
         <div class="container">
@@ -280,7 +285,7 @@ export const DialogWithOverlayComponents: Story = {
                use sunlight to synthesize foods from carbon dioxide and water.
             </section>
             <footer>
-              <sl-button size="sm" variant="primary">Got it</sl-button>
+              <sl-button id="closeButton" size="sm" variant="primary">Got it</sl-button>
             </footer>
           </sl-popover>
 
@@ -304,6 +309,8 @@ export const DialogWithOverlayComponents: Story = {
 
       dialog.querySelector('#anchor')?.addEventListener('click', onClickPopover);
 
+      dialog.querySelector('#closeButton')?.addEventListener('click', hidePopover);
+
       await dialog.updateComplete;
 
       dialog.showModal();