fix(web-components): hides tooltips for navigation buttons on menu

hides tooltips for top navigation icon buttons, when on popout menu 1267
mi6 · Jan 2, 2024 · 0ad0151 · 0ad0151
1 parent 0beaa5f
commit 0ad0151
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/packages/web-components/src/components/ic-button/ic-button.tsx b/packages/web-components/src/components/ic-button/ic-button.tsx
@@ -202,6 +202,7 @@ export class Button {
 
   componentWillUpdate(): void {
     this.loadingWidth();
+    this.setHasTooltip();
   }
 
   componentWillLoad(): void {
@@ -226,8 +227,7 @@ export class Button {
 
     const id = this.el.id;
     this.id = id !== undefined ? id : null;
-    this.hasTooltip =
-      !this.disableTooltip && (!!this.title || this.variant === "icon");
+    this.setHasTooltip();
 
     if (!this.hasTooltip) {
       const describedById = this.inheritedAttributes[
@@ -395,6 +395,11 @@ export class Button {
     }
   };
 
+  private setHasTooltip = (): void => {
+    this.hasTooltip =
+      !this.disableTooltip && (!!this.title || this.variant === "icon");
+  };
+
   render() {
     const TagType = (this.href && "a") || "button";
     const { title, ariaLabel, inheritedAttributes } = this;

diff --git a/...s/web-components/src/components/ic-button/test/basic/__snapshots__/ic-button.spec.ts.snap b/...s/web-components/src/components/ic-button/test/basic/__snapshots__/ic-button.spec.ts.snap
@@ -278,6 +278,43 @@ exports[`button component should test button as submit button on form 1`] = `
 </ic-button>
 `;
 
+exports[`button component should test tooltip visibility changes when disable tooltip prop changes 1`] = `
+<ic-button class="button-size-default button-variant-icon light" exportparts="button" id="test-button" variant="icon">
+  <mock:shadow-root>
+    <ic-tooltip id="ic-tooltip-ic-button-with-tooltip-test-button" label="Tooltip text" placement="bottom" target="ic-button-with-tooltip-test-button">
+      <button aria-describedby="ic-tooltip-ic-button-with-tooltip-test-button" aria-label="Tooltip text" class="button" part="button" type="button">
+        <slot></slot>
+      </button>
+    </ic-tooltip>
+  </mock:shadow-root>
+  Button
+</ic-button>
+`;
+
+exports[`button component should test tooltip visibility changes when disable tooltip prop changes 2`] = `
+<ic-button class="button-size-default button-variant-icon light" exportparts="button" id="test-button" variant="icon">
+  <mock:shadow-root>
+    <button aria-label="Tooltip text" class="button" part="button" type="button">
+      <slot></slot>
+    </button>
+  </mock:shadow-root>
+  Button
+</ic-button>
+`;
+
+exports[`button component should test tooltip visibility changes when disable tooltip prop changes 3`] = `
+<ic-button class="button-size-default button-variant-icon light" exportparts="button" id="test-button" variant="icon">
+  <mock:shadow-root>
+    <ic-tooltip id="ic-tooltip-ic-button-with-tooltip-test-button" label="Tooltip text" placement="bottom" target="ic-button-with-tooltip-test-button">
+      <button aria-describedby="ic-tooltip-ic-button-with-tooltip-test-button" aria-label="Tooltip text" class="button" part="button" type="button">
+        <slot></slot>
+      </button>
+    </ic-tooltip>
+  </mock:shadow-root>
+  Button
+</ic-button>
+`;
+
 exports[`button component should update aria-expanded when attribute changed 1`] = `
 <ic-button class="button-size-default button-variant-icon" exportparts="button" id="test-button" variant="icon">
   <mock:shadow-root>

diff --git a/packages/web-components/src/components/ic-button/test/basic/ic-button.spec.ts b/packages/web-components/src/components/ic-button/test/basic/ic-button.spec.ts
@@ -344,6 +344,24 @@ describe("button component", () => {
     expect(page.root).toMatchSnapshot();
   });
 
+  it("should test tooltip visibility changes when disable tooltip prop changes", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='icon' aria-label='Tooltip text' id='test-button'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+
+    page.root.disableTooltip = true;
+    await page.waitForChanges();
+
+    expect(page.root).toMatchSnapshot();
+
+    page.root.disableTooltip = false;
+    await page.waitForChanges();
+
+    expect(page.root).toMatchSnapshot();
+  });
+
   it("should test blur handler", async () => {
     const page = await newSpecPage({
       components: [Button],

diff --git a/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.tsx b/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.tsx
@@ -137,6 +137,7 @@ export class NavigationButton {
       this.initialAppearance;
     let size: "default" | "large" = "large";
     let fullWidth = false;
+    let disableTooltip = false;
 
     if (this.mode === "menu") {
       label = this.label;
@@ -145,6 +146,7 @@ export class NavigationButton {
       size = "default";
       fullWidth = true;
       className = "popout-menu-button";
+      disableTooltip = true;
     }
 
     const buttonProps = {
@@ -157,6 +159,7 @@ export class NavigationButton {
       download,
       referrerpolicy,
       fullWidth,
+      disableTooltip,
     };
 
     return (