From f34bb69b67d6dc45d577d28ccb933a98ef226b4f Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Fri, 4 Oct 2024 13:30:35 -0400
Subject: [PATCH 01/10] feat(popover-beta): Added popover-beta component that
 uses the native popover-api
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../beta/gux-popover-beta/example.html        |  69 ++++
 .../beta/gux-popover-beta/gux-popover.scss    |  73 ++++
 .../beta/gux-popover-beta/gux-popover.tsx     | 321 ++++++++++++++++++
 .../beta/gux-popover-beta/readme.md           |  56 +++
 .../__snapshots__/gux-popover.spec.ts.snap    |  25 ++
 .../gux-popover-beta/tests/gux-popover.e2e.ts |  66 ++++
 .../tests/gux-popover.spec.ts                 |  89 +++++
 .../stable/gux-dismiss-button/readme.md       |   2 +
 8 files changed, 701 insertions(+)
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/example.html
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/readme.md
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/example.html b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/example.html
new file mode 100644
index 000000000..7f1cee3ef
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/example.html
@@ -0,0 +1,69 @@
+<h1>gux-popover</h1>
+<div class="scroll-container">
+  <div class="scroll-interior">
+    <gux-button id="popover-target">Example Element</gux-button>
+    <gux-popover-beta
+      id="popover-example"
+      position="top"
+      for="popover-target"
+      is-open
+      display-dismiss-button
+    >
+      <span slot="title">Title</span>
+      <div class="popover-content-wrapper">
+        <div>Popover Content</div>
+        <gux-cta-group align="end">
+          <gux-button slot="primary" onclick="notify(event)"
+            >Action 3</gux-button
+          >
+          <gux-button slot="secondary" onclick="notify(event)"
+            >Action 2</gux-button
+          >
+          <gux-button slot="dismiss" onclick="notify(event)"
+            >Action 1</gux-button
+          >
+        </gux-cta-group>
+      </div>
+    </gux-popover-beta>
+  </div>
+</div>
+
+<style>
+  .scroll-container {
+    width: 900px;
+    height: 300px;
+    margin: auto;
+    overflow: scroll;
+    border: 1px solid #aaa;
+  }
+
+  .scroll-interior {
+    position: relative;
+    width: 600px;
+    height: 600px;
+    background-color: #fff;
+  }
+
+  .popover-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .popover-content {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    width: 280px;
+  }
+
+  #popover-target {
+    position: absolute;
+    left: 250px;
+    display: inline-block;
+    padding: 10px 15px;
+    background-color: #fdfdfd;
+    border: 1px #e4e9f0;
+    box-shadow: 0 0 2px fade(#202937, 24%);
+  }
+</style>
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
new file mode 100644
index 000000000..9fb11023a
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
@@ -0,0 +1,73 @@
+/* This is necessary to override the position of the popover on the page. By default, an HTML popover will
+   render in the middle of the screen, which we do not want */
+:popover-open {
+  position: absolute;
+  inset: unset;
+}
+
+.gux-popover-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--gse-semantic-zIndex-popover);
+  display: inline-block;
+  min-width: 280px;
+  padding: var(--gse-ui-popover-gap);
+  overflow: hidden;
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border: none;
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(
+      --gse-ui-popover-boxShadow-x,
+      --gse-ui-popover-boxShadow-offsetX
+    )
+    var(--gse-ui-popover-boxShadow-y, --gse-ui-popover-boxShadow-offsetY)
+    var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread)
+    var(--gse-ui-tooltip-boxShadow-color);
+
+  &.gux-hidden {
+    display: none;
+  }
+
+  .gux-arrow {
+    position: absolute;
+    width: var(--gse-ui-popover-anchor-width);
+    height: var(--gse-ui-popover-anchor-height);
+
+    /* 4px padding leaves some space for the shadow to bleed into */
+    padding-bottom: 4px;
+    overflow: hidden;
+  }
+
+  .gux-arrow-caret {
+    width: 0;
+    height: 0;
+    filter: drop-shadow(
+      var(--gse-ui-popover-boxShadow-x, --gse-ui-popover-boxShadow-offsetX)
+        var(--gse-ui-popover-boxShadow-y, --gse-ui-popover-boxShadow-offsetY)
+        calc(var(--gse-ui-popover-boxShadow-blur) / 2)
+        var(--gse-ui-tooltip-boxShadow-color)
+    );
+    border-top: calc(var(--gse-ui-popover-anchor-width) / 2) solid
+      var(--gse-ui-popover-backgroundColor);
+    border-right: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+    border-left: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  }
+
+  .gux-popover-header {
+    display: flex;
+    flex-direction: row;
+    place-content: center space-between;
+    align-items: center;
+    padding-bottom: var(--gse-ui-popover-gap);
+    font-family: var(--gse-ui-popover-title-text-fontFamily);
+    font-size: var(--gse-ui-popover-title-text-fontSize);
+    font-weight: var(--gse-ui-popover-title-text-fontWeight);
+    line-height: var(--gse-ui-popover-title-text-lineHeight);
+    color: var(--gse-ui-popover-headerColor);
+  }
+
+  gux-dismiss-button {
+    float: right;
+  }
+}
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
new file mode 100644
index 000000000..3b4211e27
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -0,0 +1,321 @@
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  JSX,
+  Listen,
+  Prop,
+  Watch,
+  State
+} from '@stencil/core';
+import {
+  autoUpdate,
+  computePosition,
+  arrow,
+  flip,
+  offset,
+  Placement,
+  shift
+} from '@floating-ui/dom';
+
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
+import { trackComponent } from '@utils/tracking/usage';
+import { getSlot } from '@utils/dom/get-slot';
+import { findElementById } from '@utils/dom/find-element-by-id';
+
+/**
+ * @slot - popover content
+ * @slot title - Slot for popover title
+ */
+
+@Component({
+  styleUrl: 'gux-popover.scss',
+  tag: 'gux-popover-beta',
+  shadow: true
+})
+export class GuxPopover {
+  private popupElement: HTMLElement;
+  private arrowElement: HTMLDivElement;
+  private cleanupUpdatePosition: ReturnType<typeof autoUpdate>;
+
+  @Element()
+  private root: HTMLElement;
+
+  /**
+   * Indicates the id of the element the popover should anchor to
+   */
+  @Prop()
+  for!: string;
+
+  /**
+   * Indicate position of popover element arrow (follow floating ui placement attribute api)
+   */
+  @Prop()
+  position: Placement = 'bottom';
+
+  /**
+   * Indicate if the dismiss button is displayed
+   */
+  @Prop()
+  displayDismissButton: boolean;
+
+  /**
+   * Close popover when the user clicks outside of its bounds
+   */
+  @Prop()
+  closeOnClickOutside: boolean = false;
+
+  /**
+   * Controls hiding and showing the popover
+   */
+  @Prop({ mutable: true })
+  isOpen: boolean = false;
+
+  /**
+   * Fired when a user dismisses the popover
+   */
+  @Event()
+  guxdismiss: EventEmitter<void>;
+
+  @State()
+  private forElement: HTMLInputElement;
+
+  @Watch('for')
+  private updateForElement(): void {
+    this.forElement = this.getForElement();
+  }
+
+  @Listen('keydown')
+  onKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Escape':
+        this.dismiss();
+        break;
+    }
+  }
+
+  @Listen('focusout')
+  onFocusout(event: FocusEvent): void {
+    if (!this.closeOnClickOutside && this.displayDismissButton) {
+      return;
+    }
+
+    const focusIsOutsidePopover =
+      event.relatedTarget && !this.root.contains(event.relatedTarget as Node);
+
+    if (focusIsOutsidePopover) {
+      this.dismiss();
+    }
+  }
+
+  @OnClickOutside({ triggerEvents: 'mousedown' })
+  checkForClickOutside(event: MouseEvent) {
+    const clickPath = event.composedPath();
+    const forElement = findElementById(this.root, this.for);
+    const clickedForElement = clickPath.includes(forElement);
+
+    if (
+      (this.closeOnClickOutside || !this.displayDismissButton) &&
+      this.isOpen &&
+      !clickedForElement
+    ) {
+      this.dismiss();
+    }
+
+    if (clickedForElement) {
+      this.popupElement.showPopover();
+      this.isOpen = true;
+      this.runUpdatePosition();
+    }
+  }
+
+  get titleSlot(): HTMLSlotElement | null {
+    return getSlot(this.root, 'title');
+  }
+
+  private getForElement(): HTMLInputElement {
+    if (this.for) {
+      const forElement = document.getElementById(this.for) as HTMLInputElement;
+
+      if (!forElement) {
+        this.logForAttributeError();
+      }
+
+      return forElement;
+    } else {
+      this.logForAttributeError();
+    }
+  }
+
+  private runUpdatePosition(): void {
+    if (this.root.isConnected) {
+      this.cleanupUpdatePosition = autoUpdate(
+        findElementById(this.root, this.for),
+        this.popupElement,
+        () => this.updatePosition(),
+        {
+          ancestorScroll: true,
+          elementResize: true,
+          animationFrame: true,
+          ancestorResize: true
+        }
+      );
+    } else {
+      this.disconnectedCallback();
+    }
+  }
+
+  private updatePosition(): void {
+    const forElement = findElementById(this.root, this.for);
+
+    if (this.popupElement && forElement) {
+      void computePosition(forElement, this.popupElement, {
+        placement: this.position,
+        middleware: [
+          offset(7),
+          flip(),
+          shift(),
+          arrow({
+            element: this.arrowElement,
+            padding: 16
+          })
+        ]
+      }).then(({ x, y, middlewareData, placement }) => {
+        Object.assign(this.popupElement.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+
+        const side = placement.split('-')[0];
+
+        const staticSide = {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right'
+        }[side];
+
+        const arrowRotation = {
+          top: 0,
+          right: 90,
+          bottom: 180,
+          left: -90
+        }[side];
+
+        // This is 13 because this makes the arrow look aligned when horizontal
+        // or 15 if vertical due to extra padding needed to show the shadow.
+        const arrowLen = side === 'left' || side === 'right' ? 15 : 13;
+
+        if (middlewareData.arrow) {
+          let x = middlewareData.arrow.x;
+          const y = middlewareData.arrow.y;
+
+          if (side === 'left' || side === 'right') {
+            x = x + 4;
+          }
+
+          this.popupElement.setAttribute('data-placement', placement);
+
+          Object.assign(this.arrowElement.style, {
+            left: x != null ? `${x}px` : '',
+            top: y != null ? `${y}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: `${-arrowLen}px`,
+            transform: `rotate(${arrowRotation}deg)`
+          });
+        }
+      });
+    }
+  }
+
+  private dismiss(): void {
+    const dismissEvent = this.guxdismiss.emit();
+    if (!dismissEvent.defaultPrevented) {
+      this.isOpen = false;
+      this.popupElement.hidePopover();
+    }
+  }
+
+  private logForAttributeError(): void {
+    if (this.root.isConnected) {
+      console.error(
+        `gux-popover: invalid element supplied to 'for': "${this.for}"`
+      );
+    }
+  }
+
+  connectedCallback(): void {
+    this.updateForElement();
+    trackComponent(this.root, { variant: this.position });
+  }
+
+  componentDidLoad(): void {
+    if (!this.forElement) {
+      return;
+    }
+
+    this.popupElement.popover = 'manual';
+    this.forElement.popoverTargetElement = this.popupElement;
+    this.forElement.popoverTargetAction = 'toggle';
+
+    if (this.isOpen) {
+      this.popupElement.showPopover();
+      this.runUpdatePosition();
+    }
+  }
+
+  componentDidUpdate(): void {
+    if (this.isOpen) {
+      this.runUpdatePosition();
+    } else if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
+  }
+
+  private renderDismissButton(): JSX.Element {
+    if (this.displayDismissButton) {
+      return (
+        <gux-dismiss-button
+          onClick={this.dismiss.bind(this)}
+          position="inherit"
+        ></gux-dismiss-button>
+      ) as JSX.Element;
+    }
+  }
+
+  render(): JSX.Element {
+    return (
+      <popover
+        ref={(el: HTMLDivElement) => (this.popupElement = el)}
+        class={{
+          'gux-hidden': !this.isOpen,
+          'gux-popover-wrapper': true
+        }}
+        data-placement
+      >
+        <div
+          ref={(el: HTMLDivElement) => (this.arrowElement = el)}
+          class="gux-arrow"
+        >
+          <div class="gux-arrow-caret"></div>
+        </div>
+        <div class={{ 'gux-popover-header': Boolean(this.titleSlot) }}>
+          <slot name="title"></slot>
+          {this.renderDismissButton()}
+        </div>
+        <div class="gux-popover-content">
+          <slot />
+        </div>
+      </popover>
+    ) as JSX.Element;
+  }
+}
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/readme.md b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/readme.md
new file mode 100644
index 000000000..4ecae048a
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/readme.md
@@ -0,0 +1,56 @@
+# gux-popover
+
+## Possible Improvements
+
+- add a dark theme. There is currently none in the style guide (No Jira)
+- add a gux-popover-paragraph component with title and content slots (No Jira)
+- add a gux-popover-list component and gux-popover-list-option component (No Jira)
+  - It may be possible to use gux-list for this.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property               | Attribute                | Description                                                                             | Type                                                                                                                                                                 | Default     |
+| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `closeOnClickOutside`  | `close-on-click-outside` | Close popover when the user clicks outside of its bounds                                | `boolean`                                                                                                                                                            | `false`     |
+| `displayDismissButton` | `display-dismiss-button` | Indicate if the dismiss button is displayed                                             | `boolean`                                                                                                                                                            | `undefined` |
+| `for` _(required)_     | `for`                    | Indicates the id of the element the popover should anchor to                            | `string`                                                                                                                                                             | `undefined` |
+| `isOpen`               | `is-open`                | Controls hiding and showing the popover                                                 | `boolean`                                                                                                                                                            | `false`     |
+| `position`             | `position`               | Indicate position of popover element arrow (follow floating ui placement attribute api) | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'`  |
+
+
+## Events
+
+| Event        | Description                             | Type                |
+| ------------ | --------------------------------------- | ------------------- |
+| `guxdismiss` | Fired when a user dismisses the popover | `CustomEvent<void>` |
+
+
+## Slots
+
+| Slot      | Description            |
+| --------- | ---------------------- |
+|           | popover content        |
+| `"title"` | Slot for popover title |
+
+
+## Dependencies
+
+### Depends on
+
+- [gux-dismiss-button](../../stable/gux-dismiss-button)
+
+### Graph
+```mermaid
+graph TD;
+  gux-popover-beta --> gux-dismiss-button
+  gux-dismiss-button --> gux-button-slot
+  gux-dismiss-button --> gux-icon
+  style gux-popover-beta fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
new file mode 100644
index 000000000..c7346d835
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gux-popover #render should render popover 1`] = `
+<gux-popover for="popover-target" id="popover-example" is-open="" position="top">
+  <template shadowrootmode="open">
+    <div class="gux-popover-wrapper" data-placement>
+      <div class="gux-arrow">
+        <div class="gux-arrow-caret"></div>
+      </div>
+      <div class="gux-popover-header">
+        <slot name="title"></slot>
+      </div>
+      <div class="gux-popover-content">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+  <span slot="title">
+    Title
+  </span>
+  <div>
+    popover content
+  </div>
+</gux-popover>
+`;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts
new file mode 100644
index 000000000..9e1ff1fbc
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts
@@ -0,0 +1,66 @@
+import { newSparkE2EPage, a11yCheck } from '../../../../test/e2eTestUtils';
+
+describe('gux-popover', () => {
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover position="top" for="popover-target">
+          <span slot="title">Title</span>
+          <div>popover content</div>
+        </gux-popover>
+      </div>
+      `
+    });
+
+    const element = await page.find('gux-popover');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+
+  it('should trigger guxdismiss event on popover dismiss button click', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <button id="popover-target">
+          Example Element
+        </button>
+        <gux-popover position="top" for="popover-target" display-dismiss-button is-open>
+          <div>popover content</div>
+        </gux-popover>
+      </div>
+      `
+    });
+
+    const component = await page.find('gux-popover');
+    const guxdismiss = await component.spyOnEvent('guxdismiss');
+    const button = await page.find('pierce/gux-dismiss-button');
+    await button.click();
+    expect(guxdismiss).toHaveReceivedEvent();
+  });
+
+  it('Supports hiding the close button', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover position="top" for="popover-target">
+          <div>popover content</div>
+        </gux-popover>
+      </div>
+      `
+    });
+
+    const component = await page.find('gux-popover');
+    component.setProperty('displayDismissDutton', false);
+    await page.waitForChanges();
+    const button = await page.find('pierce/gux-dismiss-button');
+    await a11yCheck(page);
+    expect(button).toBeNull();
+  });
+});
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
new file mode 100644
index 000000000..03ddd2b92
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
@@ -0,0 +1,89 @@
+jest.mock('@floating-ui/dom', () => {
+  const originalModule = jest.requireActual('@floating-ui/dom');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    autoUpdate: jest.fn()
+  } as unknown;
+});
+
+import { newSpecPage } from '@test/specTestUtils';
+import * as floatingUi from '@floating-ui/dom';
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+
+import { GuxPopover } from '../gux-popover';
+
+//Mocks
+const showPopover = jest.fn();
+
+const components = [GuxPopover];
+const language = 'en';
+const html = `
+  <div>
+    <button id="popover-target">
+      Example Element
+    </button>
+    <gux-popover id="popover-example" position="top" for="popover-target" is-open="false">
+      <span slot="title">Title</span>
+      <div>popover content</div>
+    </gux-popover>
+  </div>`;
+
+describe('gux-popover', () => {
+  beforeAll(() => {
+    Object.assign(MockHTMLElement.prototype, {
+      showPopover: showPopover
+    });
+  });
+
+  afterEach(async () => {
+    jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
+  });
+
+  describe('#render', () => {
+    it('should render popover', async () => {
+      jest.spyOn(floatingUi, 'autoUpdate').mockReturnValue(jest.fn());
+      jest.spyOn(floatingUi, 'autoUpdate').mockReturnValue(jest.fn());
+
+      const page = await newSpecPage({ components, html, language });
+
+      expect(page.rootInstance).toBeInstanceOf(GuxPopover);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+
+  describe('#interaction', () => {
+    it('should open and close', async () => {
+      const cleanupSpy = jest.fn();
+      const autoUpdateSpy = jest
+        .spyOn(floatingUi, 'autoUpdate')
+        .mockReturnValue(cleanupSpy);
+
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root as HTMLGuxPopoverElement;
+      const targetElement = document.getElementById(
+        'popover-target'
+      ) as HTMLInputElement;
+      const elementWrapper = element.shadowRoot.querySelector(
+        '.gux-popover-wrapper'
+      );
+      targetElement.click();
+      element.isOpen = true;
+      await page.waitForChanges();
+      expect(elementWrapper).not.toHaveClass('gux-hidden');
+      expect(autoUpdateSpy).toBeCalledTimes(1);
+      expect(cleanupSpy).not.toBeCalled();
+
+      element.isOpen = false;
+      await page.waitForChanges();
+      expect(elementWrapper).toHaveClass('gux-hidden');
+      expect(cleanupSpy).toBeCalledTimes(1);
+
+      element.isOpen = true;
+      await page.waitForChanges();
+      expect(autoUpdateSpy).toBeCalledTimes(2);
+      expect(cleanupSpy).toBeCalledTimes(1);
+    });
+  });
+});
diff --git a/packages/genesys-spark-components/src/components/stable/gux-dismiss-button/readme.md b/packages/genesys-spark-components/src/components/stable/gux-dismiss-button/readme.md
index 09ecce194..f7f09f8c2 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-dismiss-button/readme.md
+++ b/packages/genesys-spark-components/src/components/stable/gux-dismiss-button/readme.md
@@ -21,6 +21,7 @@ This component is meant for use in other components as a dismiss button.
  - [gux-modal-legacy](../../legacy/gux-modal-legacy)
  - [gux-notification-toast-legacy](../../legacy/gux-notification-toast-legacy)
  - [gux-popover](../gux-popover)
+ - [gux-popover-beta](../../beta/gux-popover-beta)
  - [gux-popover-list](../gux-popover-list)
  - [gux-simple-toast-legacy](../../legacy/gux-simple-toast-legacy)
  - [gux-toast](../gux-toast)
@@ -39,6 +40,7 @@ graph TD;
   gux-modal-legacy --> gux-dismiss-button
   gux-notification-toast-legacy --> gux-dismiss-button
   gux-popover --> gux-dismiss-button
+  gux-popover-beta --> gux-dismiss-button
   gux-popover-list --> gux-dismiss-button
   gux-simple-toast-legacy --> gux-dismiss-button
   gux-toast --> gux-dismiss-button

From b9aa75e77506946ff1f2336d049ff3ecaa2d8274 Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Mon, 7 Oct 2024 10:30:44 -0400
Subject: [PATCH 02/10] chore(popover-beta): PR feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../beta/gux-popover-beta/gux-popover.scss           |  7 +++++--
 .../components/beta/gux-popover-beta/gux-popover.tsx | 12 ++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
index 9fb11023a..592c74168 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
@@ -9,9 +9,12 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--gse-semantic-zIndex-popover);
+  z-index: var(
+    --gse-semantic-zIndex-popover
+  ); // TODO: this will not work because the popover will display in the top layer. Figure out a solution.
+
   display: inline-block;
-  min-width: 280px;
+  min-width: 280px; // TODO: add possible token?
   padding: var(--gse-ui-popover-gap);
   overflow: hidden;
   background-color: var(--gse-ui-popover-backgroundColor);
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
index 3b4211e27..80db859ca 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -137,8 +137,10 @@ export class GuxPopover {
 
   private getForElement(): HTMLInputElement {
     if (this.for) {
-      const forElement = document.getElementById(this.for) as HTMLInputElement;
-
+      const forElement = findElementById(
+        this.root,
+        this.for
+      ) as HTMLInputElement;
       if (!forElement) {
         this.logForAttributeError();
       }
@@ -259,7 +261,6 @@ export class GuxPopover {
 
     this.popupElement.popover = 'manual';
     this.forElement.popoverTargetElement = this.popupElement;
-    this.forElement.popoverTargetAction = 'toggle';
 
     if (this.isOpen) {
       this.popupElement.showPopover();
@@ -294,10 +295,9 @@ export class GuxPopover {
 
   render(): JSX.Element {
     return (
-      <popover
+      <div
         ref={(el: HTMLDivElement) => (this.popupElement = el)}
         class={{
-          'gux-hidden': !this.isOpen,
           'gux-popover-wrapper': true
         }}
         data-placement
@@ -315,7 +315,7 @@ export class GuxPopover {
         <div class="gux-popover-content">
           <slot />
         </div>
-      </popover>
+      </div>
     ) as JSX.Element;
   }
 }

From ac36a96972c6f755101375ef3d2326baed7633e6 Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Mon, 7 Oct 2024 10:35:34 -0400
Subject: [PATCH 03/10] chore(popover-beta): Using togglePopover method
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../src/components/beta/gux-popover-beta/gux-popover.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
index 80db859ca..aaecddeb8 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -125,7 +125,7 @@ export class GuxPopover {
     }
 
     if (clickedForElement) {
-      this.popupElement.showPopover();
+      this.popupElement.togglePopover();
       this.isOpen = true;
       this.runUpdatePosition();
     }
@@ -237,7 +237,7 @@ export class GuxPopover {
     const dismissEvent = this.guxdismiss.emit();
     if (!dismissEvent.defaultPrevented) {
       this.isOpen = false;
-      this.popupElement.hidePopover();
+      this.popupElement.togglePopover();
     }
   }
 
@@ -263,7 +263,7 @@ export class GuxPopover {
     this.forElement.popoverTargetElement = this.popupElement;
 
     if (this.isOpen) {
-      this.popupElement.showPopover();
+      this.popupElement.togglePopover();
       this.runUpdatePosition();
     }
   }

From df4f6d9b19ffe33d8f9a1d49e5628d30aea5e3df Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:12:39 -0400
Subject: [PATCH 04/10] chore(popover-beta): More PR feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../src/components/beta/gux-popover-beta/gux-popover.tsx   | 7 ++++---
 .../tests/__snapshots__/gux-popover.spec.ts.snap           | 6 +++---
 .../beta/gux-popover-beta/tests/gux-popover.spec.ts        | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
index aaecddeb8..785dbdd79 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -126,7 +126,7 @@ export class GuxPopover {
 
     if (clickedForElement) {
       this.popupElement.togglePopover();
-      this.isOpen = true;
+      this.isOpen = !this.isOpen;
       this.runUpdatePosition();
     }
   }
@@ -259,7 +259,6 @@ export class GuxPopover {
       return;
     }
 
-    this.popupElement.popover = 'manual';
     this.forElement.popoverTargetElement = this.popupElement;
 
     if (this.isOpen) {
@@ -298,9 +297,11 @@ export class GuxPopover {
       <div
         ref={(el: HTMLDivElement) => (this.popupElement = el)}
         class={{
-          'gux-popover-wrapper': true
+          'gux-popover-wrapper': true,
+          'gux-hidden': !this.isOpen
         }}
         data-placement
+        popover="manual"
       >
         <div
           ref={(el: HTMLDivElement) => (this.arrowElement = el)}
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
index c7346d835..d76f74e79 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`gux-popover #render should render popover 1`] = `
-<gux-popover for="popover-target" id="popover-example" is-open="" position="top">
+<gux-popover-beta for="popover-target" id="popover-example" is-open="false" position="top">
   <template shadowrootmode="open">
-    <div class="gux-popover-wrapper" data-placement>
+    <div class="gux-hidden gux-popover-wrapper" data-placement popover="manual">
       <div class="gux-arrow">
         <div class="gux-arrow-caret"></div>
       </div>
@@ -21,5 +21,5 @@ exports[`gux-popover #render should render popover 1`] = `
   <div>
     popover content
   </div>
-</gux-popover>
+</gux-popover-beta>
 `;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
index 03ddd2b92..864622797 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
@@ -24,10 +24,10 @@ const html = `
     <button id="popover-target">
       Example Element
     </button>
-    <gux-popover id="popover-example" position="top" for="popover-target" is-open="false">
+    <gux-popover-beta id="popover-example" position="top" for="popover-target" is-open="false">
       <span slot="title">Title</span>
       <div>popover content</div>
-    </gux-popover>
+    </gux-popover-beta>
   </div>`;
 
 describe('gux-popover', () => {

From e8cac12bce86df5192e60f55d9ac67061569f2ae Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:23:25 -0400
Subject: [PATCH 05/10] chore(popover-beta): Fixed positioning issue of popover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../src/components/beta/gux-popover-beta/gux-popover.scss      | 1 -
 .../src/components/beta/gux-popover-beta/gux-popover.tsx       | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
index 592c74168..b59b56cdb 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
@@ -13,7 +13,6 @@
     --gse-semantic-zIndex-popover
   ); // TODO: this will not work because the popover will display in the top layer. Figure out a solution.
 
-  display: inline-block;
   min-width: 280px; // TODO: add possible token?
   padding: var(--gse-ui-popover-gap);
   overflow: hidden;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
index 785dbdd79..b98119437 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -297,8 +297,7 @@ export class GuxPopover {
       <div
         ref={(el: HTMLDivElement) => (this.popupElement = el)}
         class={{
-          'gux-popover-wrapper': true,
-          'gux-hidden': !this.isOpen
+          'gux-popover-wrapper': true
         }}
         data-placement
         popover="manual"

From 96eb1b929e18f777886e336032a7efe194ac7242 Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:47:38 -0400
Subject: [PATCH 06/10] chore(popover-beta): Fixed tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../src/components/beta/gux-popover-beta/gux-popover.scss   | 6 +-----
 .../src/components/beta/gux-popover-beta/gux-popover.tsx    | 3 ++-
 .../tests/__snapshots__/gux-popover.spec.ts.snap            | 2 +-
 .../src/components/stable/gux-popover/gux-popover.tsx       | 2 ++
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
index b59b56cdb..b8e899a35 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
@@ -13,7 +13,7 @@
     --gse-semantic-zIndex-popover
   ); // TODO: this will not work because the popover will display in the top layer. Figure out a solution.
 
-  min-width: 280px; // TODO: add possible token?
+  min-width: 280px; // TODO: add new token once UX has added it: GDS-2672
   padding: var(--gse-ui-popover-gap);
   overflow: hidden;
   background-color: var(--gse-ui-popover-backgroundColor);
@@ -27,10 +27,6 @@
     var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread)
     var(--gse-ui-tooltip-boxShadow-color);
 
-  &.gux-hidden {
-    display: none;
-  }
-
   .gux-arrow {
     position: absolute;
     width: var(--gse-ui-popover-anchor-width);
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
index b98119437..785dbdd79 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -297,7 +297,8 @@ export class GuxPopover {
       <div
         ref={(el: HTMLDivElement) => (this.popupElement = el)}
         class={{
-          'gux-popover-wrapper': true
+          'gux-popover-wrapper': true,
+          'gux-hidden': !this.isOpen
         }}
         data-placement
         popover="manual"
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
index d76f74e79..bedf608ca 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`gux-popover #render should render popover 1`] = `
 <gux-popover-beta for="popover-target" id="popover-example" is-open="false" position="top">
   <template shadowrootmode="open">
-    <div class="gux-hidden gux-popover-wrapper" data-placement popover="manual">
+    <div class="gux-popover-wrapper" data-placement popover="manual">
       <div class="gux-arrow">
         <div class="gux-arrow-caret"></div>
       </div>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx b/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx
index 1102a0ab7..61d1dc0ca 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx
@@ -215,6 +215,8 @@ export class GuxPopover {
   componentDidLoad(): void {
     if (this.isOpen) {
       this.runUpdatePosition();
+    } else {
+      this.popupElement.hidePopover();
     }
   }
 

From 5d7a009642d6c1d18fd8a077b9092511b52304a1 Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:10:35 -0400
Subject: [PATCH 07/10] chore(popover-beta): Snapshot test update
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../tests/__snapshots__/gux-popover.spec.ts.snap            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
index bedf608ca..ae2eec31a 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`gux-popover #render should render popover 1`] = `
 <gux-popover-beta for="popover-target" id="popover-example" is-open="false" position="top">
-  <template shadowrootmode="open">
-    <div class="gux-popover-wrapper" data-placement popover="manual">
+  <mock:shadow-root>
+    <div class="gux-hidden gux-popover-wrapper" data-placement popover="manual">
       <div class="gux-arrow">
         <div class="gux-arrow-caret"></div>
       </div>
@@ -14,7 +14,7 @@ exports[`gux-popover #render should render popover 1`] = `
         <slot></slot>
       </div>
     </div>
-  </template>
+  </mock:shadow-root>
   <span slot="title">
     Title
   </span>

From c8ef7ebc1e78908249b167981563a56358825863 Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:17:04 -0400
Subject: [PATCH 08/10] chore(popover-beta): Fixed snapshot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../tests/__snapshots__/gux-popover.spec.ts.snap              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
index ae2eec31a..d76f74e79 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`gux-popover #render should render popover 1`] = `
 <gux-popover-beta for="popover-target" id="popover-example" is-open="false" position="top">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div class="gux-hidden gux-popover-wrapper" data-placement popover="manual">
       <div class="gux-arrow">
         <div class="gux-arrow-caret"></div>
@@ -14,7 +14,7 @@ exports[`gux-popover #render should render popover 1`] = `
         <slot></slot>
       </div>
     </div>
-  </mock:shadow-root>
+  </template>
   <span slot="title">
     Title
   </span>

From 090b604e5ecd730d578b76dd1875829b0b535671 Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Fri, 11 Oct 2024 10:47:36 -0400
Subject: [PATCH 09/10] chore(popover-beta): Using floating-ui hide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../components/beta/gux-popover-beta/gux-popover.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
index 785dbdd79..5c937f644 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.tsx
@@ -17,7 +17,8 @@ import {
   flip,
   offset,
   Placement,
-  shift
+  shift,
+  hide
 } from '@floating-ui/dom';
 
 import { OnClickOutside } from '@utils/decorator/on-click-outside';
@@ -176,6 +177,7 @@ export class GuxPopover {
       void computePosition(forElement, this.popupElement, {
         placement: this.position,
         middleware: [
+          hide(),
           offset(7),
           flip(),
           shift(),
@@ -229,6 +231,14 @@ export class GuxPopover {
             transform: `rotate(${arrowRotation}deg)`
           });
         }
+
+        if (middlewareData.hide) {
+          Object.assign(this.popupElement.style, {
+            visibility: middlewareData.hide.referenceHidden
+              ? 'hidden'
+              : 'visible'
+          });
+        }
       });
     }
   }

From fa5c7ea5d9c62bc83c2e9d0ace111ca1198c309a Mon Sep 17 00:00:00 2001
From: jason-evans-genesys
 <127438502+jason-evans-genesys@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:15:22 -0400
Subject: [PATCH 10/10] chore(popover-beta): Fixed tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-1637
---
 .../__snapshots__/gux-popover.spec.ts.snap    |  2 +-
 .../gux-popover-beta/tests/gux-popover.e2e.ts | 20 +++++++++----------
 .../tests/gux-popover.spec.ts                 |  2 +-
 .../stable/gux-popover/gux-popover.tsx        |  2 --
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
index d76f74e79..ff7a1aa42 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/__snapshots__/gux-popover.spec.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`gux-popover #render should render popover 1`] = `
+exports[`gux-popover-beta #render should render popover 1`] = `
 <gux-popover-beta for="popover-target" id="popover-example" is-open="false" position="top">
   <template shadowrootmode="open">
     <div class="gux-hidden gux-popover-wrapper" data-placement popover="manual">
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts
index 9e1ff1fbc..a037033a3 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.e2e.ts
@@ -1,6 +1,6 @@
 import { newSparkE2EPage, a11yCheck } from '../../../../test/e2eTestUtils';
 
-describe('gux-popover', () => {
+describe('gux-popover-beta', () => {
   it('renders', async () => {
     const page = await newSparkE2EPage({
       html: `
@@ -8,15 +8,15 @@ describe('gux-popover', () => {
         <div id="popover-target">
           Example Element
         </div>
-        <gux-popover position="top" for="popover-target">
+        <gux-popover-beta position="top" for="popover-target">
           <span slot="title">Title</span>
           <div>popover content</div>
-        </gux-popover>
+        </gux-popover-beta>
       </div>
       `
     });
 
-    const element = await page.find('gux-popover');
+    const element = await page.find('gux-popover-beta');
     await a11yCheck(page);
     expect(element).toHaveAttribute('hydrated');
   });
@@ -28,14 +28,14 @@ describe('gux-popover', () => {
         <button id="popover-target">
           Example Element
         </button>
-        <gux-popover position="top" for="popover-target" display-dismiss-button is-open>
+        <gux-popover-beta position="top" for="popover-target" display-dismiss-button is-open>
           <div>popover content</div>
-        </gux-popover>
+        </gux-popover-beta>
       </div>
       `
     });
 
-    const component = await page.find('gux-popover');
+    const component = await page.find('gux-popover-beta');
     const guxdismiss = await component.spyOnEvent('guxdismiss');
     const button = await page.find('pierce/gux-dismiss-button');
     await button.click();
@@ -49,14 +49,14 @@ describe('gux-popover', () => {
         <div id="popover-target">
           Example Element
         </div>
-        <gux-popover position="top" for="popover-target">
+        <gux-popover-beta position="top" for="popover-target">
           <div>popover content</div>
-        </gux-popover>
+        </gux-popover-beta>
       </div>
       `
     });
 
-    const component = await page.find('gux-popover');
+    const component = await page.find('gux-popover-beta');
     component.setProperty('displayDismissDutton', false);
     await page.waitForChanges();
     const button = await page.find('pierce/gux-dismiss-button');
diff --git a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
index 864622797..c31ea13bd 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
+++ b/packages/genesys-spark-components/src/components/beta/gux-popover-beta/tests/gux-popover.spec.ts
@@ -30,7 +30,7 @@ const html = `
     </gux-popover-beta>
   </div>`;
 
-describe('gux-popover', () => {
+describe('gux-popover-beta', () => {
   beforeAll(() => {
     Object.assign(MockHTMLElement.prototype, {
       showPopover: showPopover
diff --git a/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx b/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx
index 0ab5cfe1f..d67df6a9d 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-popover/gux-popover.tsx
@@ -218,8 +218,6 @@ export class GuxPopover {
   componentDidLoad(): void {
     if (this.isOpen) {
       this.runUpdatePosition();
-    } else {
-      this.popupElement.hidePopover();
     }
   }