genesys-spark-components 4.0.0-beta.7 → 4.0.0-beta.70

package/dist/collection/components/stable/gux-toggle/tests/gux-toggle.e2e.js

@@ -0,0 +1,154 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'color-contrast',
+    target: '#disabledToggle,#gux-toggle-label-i',
+    exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+  }
+];
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-toggle', () => {
+  it('should build', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `<gux-toggle lang="en"></gux-toggle>`
+    });
+    const element = await page.find('gux-toggle');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  describe('#render', () => {
+    [
+      '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>',
+      '<gux-toggle lang="en" checked checked-label="on" unchecked-label="off"></gux-toggle>',
+      '<gux-toggle lang="en" id="disabledToggle" checked-label="On" unchecked-label="Off" disabled></gux-toggle>',
+      '<gux-toggle lang="en" id="disabledToggle" checked checked-label="on" unchecked-label="off" disabled></gux-toggle>',
+      `<gux-toggle lang="en"
+        checked-label="On"
+        unchecked-label="Off"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle lang="en"
+        checked
+        checked-label="on"
+        unchecked-label="off"
+        label-position="right"
+      ></gux-toggle>`,
+      `<gux-toggle lang="en"
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle lang="en"
+        checked
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="right"
+      ></gux-toggle>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-toggle');
+        await a11yCheck(page, axeExclusions);
+        expect(element.innerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('User Interactions', () => {
+    [
+      {
+        name: 'clicked',
+        userInteraction: async (element) => await element.click()
+      }
+    ].forEach(({ name, userInteraction }) => {
+      describe(name, () => {
+        it(`should not fire a check event when an enabled toggle is disabled and ${name}`, async () => {
+          const html = '<gux-toggle lang="en" disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const checkSpy = await element.spyOnEvent('check');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(checkSpy).toHaveLength(0);
+        });
+        it(`should fire a check event when an enabled toggle is ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const checkSpy = await element.spyOnEvent('check');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(checkSpy).toHaveLength(1);
+        });
+        it(`should check an unchecked toggle when ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSparkE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          expect(await element.getProperty('checked')).toBe(false);
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(true);
+        });
+        it(`should uncheck a checked toggle when ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          expect(await element.getProperty('checked')).toBe(true);
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(false);
+        });
+        it(`should not check an unchecked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle lang="en" disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          expect(await element.getProperty('checked')).toBe(false);
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(false);
+        });
+        it(`should not uncheck a checked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          expect(await element.getProperty('checked')).toBe(true);
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(true);
+        });
+        it(`should not check the toggle if preventDefault is called on the event`, async () => {
+          const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          await page.evaluate(() => {
+            document.addEventListener('check', event => {
+              event.preventDefault();
+            });
+          });
+          expect(await element.getProperty('checked')).toBe(false);
+          await userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(false);
+        });
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-toggle/tests/gux-toggle.spec.js

@@ -0,0 +1,128 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxToggle } from "../gux-toggle";
+import { GuxToggleSlider } from "../gux-toggle-slider/gux-toggle-slider";
+const components = [GuxToggle, GuxToggleSlider];
+const language = 'en';
+describe('gux-toggle', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-toggle></gux-toggle>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxToggle);
+  });
+  describe('#render', () => {
+    [
+      '<gux-toggle></gux-toggle>',
+      '<gux-toggle checked></gux-toggle>',
+      '<gux-toggle checked disabled></gux-toggle>',
+      '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>',
+      '<gux-toggle checked checked-label="on" unchecked-label="off"></gux-toggle>',
+      `<gux-toggle
+        checked-label="On"
+        unchecked-label="Off"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle
+        checked
+        checked-label="on"
+        unchecked-label="off"
+        label-position="right"
+      ></gux-toggle>`,
+      `<gux-toggle
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle
+        checked
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="right"
+      ></gux-toggle>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('User Interactions', () => {
+    [
+      {
+        name: 'clicked',
+        userInteraction: (element) => element.click()
+      },
+      {
+        name: 'Space is pressed',
+        userInteraction: (element) => element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }))
+      }
+    ].forEach(({ name, userInteraction }) => {
+      describe(name, () => {
+        it(`should not fire a check event when an enabled toggle is disabled and ${name}`, async () => {
+          const html = '<gux-toggle disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
+          const checkSpy = jest.fn();
+          element.addEventListener('check', checkSpy);
+          userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(checkSpy).not.toHaveBeenCalled();
+        });
+        it(`should fire a check event when an enabled toggle is ${name}`, async () => {
+          const html = '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
+          const checkSpy = jest.fn();
+          element.addEventListener('check', checkSpy);
+          userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(checkSpy).toHaveBeenCalled();
+        });
+        it(`should check an unchecked toggle when ${name}`, async () => {
+          const html = '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
+          expect(element.checked).toBe(false);
+          userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(element.checked).toBe(true);
+        });
+        it(`should uncheck a checked toggle when ${name}`, async () => {
+          const html = '<gux-toggle checked checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
+          expect(element.checked).toBe(true);
+          userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(element.checked).toBe(false);
+        });
+        it(`should not check an unchecked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
+          expect(element.checked).toBe(false);
+          userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(element.checked).toBe(false);
+        });
+        it(`should not uncheck a checked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle checked disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSpecPage({ components, html, language });
+          const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
+          expect(element.checked).toBe(true);
+          userInteraction(toggleSlider);
+          await page.waitForChanges();
+          expect(element.checked).toBe(true);
+        });
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-tooltip/gux-tooltip.css

@@ -1,12 +1,13 @@
 :host {
   position: fixed;
-  z-index: var(--gux-zindex-tooltip, 1);
+  z-index: var(--gse-semantic-zIndex-tooltip);
   display: none;
   width: max-content;
   max-width: 250px;
-  overflow: hidden;
+  box-shadow: var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
   opacity: 0;
 }
+
 :host(.gux-show) {
   display: block;
   animation-name: fade-in;
@@ -14,15 +15,42 @@
   animation-delay: 1s;
   animation-fill-mode: forwards;
 }
+
 .gux-container {
   box-sizing: border-box;
-  padding: 6px 12px;
-  color: #2e394c;
+  display: flex;
+  flex-direction: row;
+  gap: var(--gse-ui-tooltip-gap);
+  place-content: center flex-start;
+  padding: var(--gse-ui-tooltip-padding);
+  font-family: var(--gse-ui-tooltip-text-fontFamily);
+  font-size: var(--gse-ui-tooltip-text-fontSize);
+  font-weight: var(--gse-ui-tooltip-text-fontWeight);
+  line-height: var(--gse-ui-tooltip-text-lineHeight);
+  color: var(--gse-ui-tooltip-light-foregroundColor);
   pointer-events: none;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  background-color: var(--gse-ui-tooltip-light-backgroundColor);
+  border: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  border-radius: var(--gse-ui-tooltip-borderRadius);
 }
+.gux-container ::slotted(gux-icon) {
+  align-self: center;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-tooltip-light-iconColor);
+}
+.gux-container.gux-dark {
+  color: var(--gse-ui-tooltip-dark-foregroundColor);
+  background-color: var(--gse-ui-tooltip-dark-backgroundColor);
+  border-color: var(--gse-ui-tooltip-dark-border-color);
+}
+.gux-container.gux-dark ::slotted(gux-icon) {
+  align-self: center;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-tooltip-dark-iconColor);
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -30,4 +58,4 @@
   100% {
     opacity: 1;
   }
-}
+}

package/dist/collection/components/stable/gux-tooltip/gux-tooltip.js

@@ -1,9 +1,9 @@
-import { h, Host } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { trackComponent } from '@utils/tracking/usage';
-import { findElementById } from '@utils/dom/find-element-by-id';
-import { afterNextRender } from '@utils/dom/after-next-render';
+import { h, Host } from "@stencil/core";
+import { autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { findElementById } from "../../../utils/dom/find-element-by-";
+import { afterNextRender } from "../../../utils/dom/after-next-render";
 /**
  * @slot - Content of the tooltip
  */
@@ -16,6 +16,7 @@ export class GuxTooltip {
     this.id = randomHTMLId('gux-tooltip');
     this.for = undefined;
     this.placement = 'bottom-start';
+    this.accent = 'light';
     this.isShown = false;
   }
   handleKeyDown(event) {
@@ -46,17 +47,20 @@ export class GuxTooltip {
     });
   }
   updatePosition() {
+    const middleware = [offset(16), flip(), shift(), hide()];
     void computePosition(this.forElement, this.root, {
       placement: this.placement,
       strategy: 'fixed',
-      middleware: [offset(16), flip(), shift()]
-    }).then(({ x, y, placement }) => {
+      middleware: middleware
+    }).then(({ x, y, middlewareData }) => {
+      var _a;
       Object.assign(this.root.style, {
         left: `${x}px`,
-        top: `${y}px`
+        top: `${y}px`,
+        visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
       });
-      // data-placement is currently only used for e2e tests
-      this.root.setAttribute('data-placement', placement);
+      //data-placement needed on the for e2e tests.
+      this.root.setAttribute('data-placement', this.placement);
     });
   }
   show() {
@@ -98,7 +102,7 @@ export class GuxTooltip {
     }
   }
   componentWillLoad() {
-    trackComponent(this.root);
+    trackComponent(this.root, { variant: this.placement });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -112,13 +116,16 @@ export class GuxTooltip {
     (_e = this.forElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.focusoutHandler);
   }
   render() {
-    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: "gux-container" }, h("slot", null))));
+    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.accent}`]: true
+      }, "data-placement": this.placement }, h("slot", null))));
   }
   static get is() { return "gux-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-tooltip.less"]
+      "$": ["gux-tooltip.scss"]
     };
   }
   static get styleUrls() {
@@ -154,7 +161,8 @@ export class GuxTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@floating-ui/dom"
+              "path": "@floating-ui/dom",
+              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
             }
           }
         },
@@ -167,6 +175,30 @@ export class GuxTooltip {
         "attribute": "placement",
         "reflect": false,
         "defaultValue": "'bottom-start'"
+      },
+      "accent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxTooltipAccent",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "GuxTooltipAccent": {
+              "location": "import",
+              "path": "./gux-tooltip-types",
+              "id": "src/components/stable/gux-tooltip/gux-tooltip-types.ts::GuxTooltipAccent"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accent",
+        "reflect": false,
+        "defaultValue": "'light'"
       }
     };
   }
@@ -183,7 +215,8 @@ export class GuxTooltip {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -199,7 +232,8 @@ export class GuxTooltip {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-tooltip/tests/gux-tooltip.e2e.js

@@ -0,0 +1,33 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-tooltip', () => {
+  describe('#render', () => {
+    [
+      `
+        <div id="element" lang="en">
+          <div>Element</div>
+          <gux-tooltip>Tooltip</gux-tooltip>
+        </div>
+      `,
+      `
+        <div lang="en">
+          <div id="element">Element</div>
+          <gux-tooltip for="element">Tooltip</gux-tooltip>
+        </div>
+      `
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('#element');
+        const tooltip = await page.find('gux-tooltip');
+        expect(tooltip.className.split(' ')).not.toContain('gux-show');
+        await element.hover();
+        await page.waitForChanges();
+        await a11yCheck(page);
+        expect(element.getAttribute('aria-describedby')).toBe(tooltip.id);
+        expect(tooltip.className.split(' ')).toContain('gux-show');
+        expect(tooltip.getAttribute('data-placement')).toBe('bottom-start');
+        expect(tooltip).toHaveAttribute('hydrated');
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-tooltip/tests/gux-tooltip.spec.js

@@ -0,0 +1,55 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxTooltip } from "../gux-tooltip";
+const components = [GuxTooltip];
+const language = 'en';
+describe('gux-tooltip', () => {
+  it('should build', async () => {
+    const html = '<gux-tooltip></gux-tooltip>';
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxTooltip);
+  });
+  describe('#render', () => {
+    [
+      `
+        <div>
+          <div>Element</div>
+          <gux-tooltip>Tooltip</gux-tooltip>
+        </div>
+      `,
+      `
+        <div>
+          <div id="element">Element</div>
+          <gux-tooltip for="element">Tooltip</gux-tooltip>
+        </div>
+      `
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.body).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#remove', () => {
+    [
+      `
+        <div>
+          <div>Element</div>
+          <gux-tooltip>Tooltip</gux-tooltip>
+        </div>
+      `,
+      `
+        <div>
+          <div id="element">Element</div>
+          <gux-tooltip for="element">Tooltip</gux-tooltip>
+        </div>
+      `
+    ].forEach((html, index) => {
+      it(`should remove component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        page.root.remove();
+        await page.waitForChanges();
+        expect(page.body).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.css

@@ -32,7 +32,12 @@ gux-tooltip {
 .gux-tooltip-icon-decorative .gux-title-container gux-icon,
 .gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon) {
   position: absolute;
+  top: 2px;
   left: -20px;
   flex-shrink: 0;
   width: 16px;
+}
+
+.gux-icon-only {
+  line-height: 0px;
 }

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.js

@@ -8,9 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
-import { logWarn } from '../../../utils/error/log-error';
-import { OnMutation } from '../../../utils/decorator/on-mutation';
+import { h } from "@stencil/core";
+import { logWarn } from "../../../utils/error/log-error";
+import { OnMutation } from "../../../utils/decorator/on-mutation";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
 export class GuxTooltipTitle {
   constructor() {
     this.hasTooltip = false;
@@ -46,6 +47,10 @@ export class GuxTooltipTitle {
   onMutation() {
     this.titleName = this.setTooltipTitleText();
     this.checkForTooltipHideOrShow();
+    // Handle checking if the tooltip should hide/show for dynamic content
+    afterNextRenderTimeout(() => {
+      this.checkForTooltipHideOrShow();
+    }, 500);
   }
   componentWillLoad() {
     this.titleName = this.setTooltipTitleText();
@@ -116,7 +121,10 @@ export class GuxTooltipTitle {
   }
   render() {
     return [
-      h("span", { class: "gux-title-container" }, h("slot", null)),
+      h("span", { class: {
+          'gux-title-container': true,
+          'gux-icon-only': this.iconOnly
+        } }, h("slot", null)),
       this.renderTooltip()
     ];
   }
@@ -152,7 +160,8 @@ export class GuxTooltipTitle {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -168,7 +177,8 @@ export class GuxTooltipTitle {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"