Merge pull request #2708 from mi6/fix/1880-toggle-button-slots-not-sh…

…owing-if-initially-empty Fix/1880 toggle button slots not showing if initially empty
mi6 · Nov 26, 2024 · a2c609d · a2c609d
2 parents cc19356 + 4a07fe3
commit a2c609d
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 9 deletions.
diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx
@@ -13,6 +13,7 @@ import {
 } from "../utils/constants";
 import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";
 import {
+  ConditionalBadge,
   Dark,
   IconPlacementRight,
   IconPlacementTop,
@@ -94,6 +95,14 @@ describe("IcToggleButton end-to-end tests", () => {
     cy.clickOnButton(IC_TOGGLE_BUTTON_SELECTOR);
     cy.get(WIN_CONSOLE_SPY).should(NOT_BE_CALLED_ONCE);
   });
+
+  it("should render elements passed into slots after initial render", () => {
+    mount(<ConditionalBadge />);
+    cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR);
+    cy.get("ic-badge").should("not.exist");
+    cy.get("button").click();
+    cy.get("ic-badge").should("be.visible");
+  });
 });
 
 describe("IcToggleButton visual regression and a11y tests", () => {

diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx
@@ -1,5 +1,5 @@
-import React, { ReactElement } from "react";
-import { IcToggleButton } from "../../components";
+import React, { ReactElement, useState } from "react";
+import { IcBadge, IcToggleButton } from "../../components";
 import { SlottedSVG } from "../../react-component-lib/slottedSVG";
 
 const ReusableSlottedIcon = (): ReactElement => (
@@ -165,3 +165,29 @@ export const Light = (): ReactElement => {
     </div>
   );
 };
+
+export const ConditionalBadge = (): ReactElement => {
+  const [count, setCount] = useState(0);
+  const incrementCount = () => setCount((previous) => previous + 1);
+
+  return (
+    <div
+      style={{
+        padding: "var(--ic-space-sm)",
+      }}
+    >
+      <IcToggleButton>
+        Button with badge
+        {count > 0 && (
+          <IcBadge
+            slot="badge"
+            variant="info"
+            textLabel={`${count}`}
+            maxNumber={99}
+          />
+        )}
+      </IcToggleButton>
+      <button onClick={incrementCount}>Increment count</button>
+    </div>
+  );
+};
diff --git a/packages/react/src/stories/ic-button.stories.mdx b/packages/react/src/stories/ic-button.stories.mdx
@@ -6,7 +6,7 @@ import {
   Description,
 } from "@storybook/addon-docs";
 import { useRef } from "react";
-import { IcButton, IcPopoverMenu, IcMenuItem } from "../components";
+import { IcButton, IcPopoverMenu, IcMenuItem, IcBadge } from "../components";
 import readme from "../../../web-components/src/components/ic-button/readme.md";
 import { SlottedSVG } from "../react-component-lib/slottedSVG";
 import  { iconProps } from "../component-tests/IcButton/IcButtonTestData"
@@ -24,6 +24,8 @@ export const defaultArgs = {
   size: "default",
   variant: "secondary",
   fullWidth: false,
+  hasIcon: true,
+  hasBadge: false,
 };
 
 ### Primary
@@ -1150,6 +1152,12 @@ export const IconBtnGroup = (iconProps) => {
       fullWidth: {
         control: { type: "boolean" },
       },
+      hasIcon: {
+        control: { type: "boolean" },
+      },
+      hasBadge: {
+        control: { type: "boolean" },
+      },
     }}
     name="Playground with icon"
   >
@@ -1163,7 +1171,7 @@ export const IconBtnGroup = (iconProps) => {
         fullWidth={args.fullWidth}
       >
         {args.message}
-        <svg
+        {args.hasIcon && <svg
           slot="left-icon"
           xmlns="http://www.w3.org/2000/svg"
           height="24px"
@@ -1173,7 +1181,8 @@ export const IconBtnGroup = (iconProps) => {
         >
           <path d="M0 0h24v24H0V0z" fill="none" />
           <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-        </svg>
+        </svg>}
+        {args.hasBadge && <IcBadge textLabel="9+" slot="badge" variant="info"/>}
       </IcButton>
     )}
   </Story>

diff --git a/packages/react/src/stories/ic-toggle-button.stories.mdx b/packages/react/src/stories/ic-toggle-button.stories.mdx
@@ -259,6 +259,8 @@ export const defaultWithIconArgs = {
   iconPlacement: "left",
   toggleChecked: false,
   accessibleLabel: "Custom Button Ally Label",
+  hasIcon: true,
+  hasBadge: false,
 };
 
 <Canvas>
@@ -283,6 +285,12 @@ export const defaultWithIconArgs = {
       fullWidth: {
         control: { type: "boolean" },
       },
+      hasIcon: {
+        control: { type: "boolean" },
+      },
+      hasBadge: {
+        control: { type: "boolean"},
+      }
     }}
     name="Playground - default with icon"
   >
@@ -299,7 +307,7 @@ export const defaultWithIconArgs = {
           toggleChecked={args.toggleChecked}
           iconPlacement={args.iconPlacement}
         >
-          <SlottedSVG
+          {args.hasIcon &&<SlottedSVG
           xmlns="http://www.w3.org/2000/svg"
           slot="icon"
           height="24px"
@@ -309,7 +317,8 @@ export const defaultWithIconArgs = {
         >
           <path d="M0 0h24v24H0V0z" fill="none" />
           <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-        </SlottedSVG>
+        </SlottedSVG>}
+        {args.hasBadge && <IcBadge textLabel="9+" slot="badge" variant="info"/>}
         </IcToggleButton>
       </div>
     )}

diff --git a/packages/web-components/src/components/ic-button/ic-button.tsx b/packages/web-components/src/components/ic-button/ic-button.tsx
@@ -300,7 +300,6 @@ export class Button {
 
   componentDidLoad(): void {
     this.updateTheme();
-
     if (typeof MutationObserver !== "undefined") {
       if (this.describedById) {
         this.mutationObserver = new MutationObserver(this.mutationCallback);
@@ -316,6 +315,7 @@ export class Button {
       );
       this.hostMutationObserver.observe(this.el, {
         attributes: true,
+        childList: true,
       });
     }
   }
@@ -435,7 +435,10 @@ export class Button {
   // triggered when attributes of host element change
   private hostMutationCallback = (mutationList: MutationRecord[]): void => {
     let forceComponentUpdate = false;
-    mutationList.forEach(({ attributeName }) => {
+    mutationList.forEach(({ attributeName, type }) => {
+      if (type === "childList") {
+        forceComponentUpdate = true;
+      }
       const attribute = this.el.getAttribute(attributeName);
       if (attributeName === "title") this.title = attribute;
       else if (attributeName === "aria-label") this.ariaLabel = attribute;

diff --git a/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.tsx b/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.tsx
@@ -7,6 +7,7 @@ import {
   EventEmitter,
   Listen,
   h,
+  forceUpdate,
 } from "@stencil/core";
 import {
   isSlotUsed,
@@ -29,6 +30,7 @@ import { IcSizes, IcThemeForeground } from "../../utils/types";
 })
 export class ToggleButton {
   private iconPosition: "left" | "right" | "top";
+  private hostMutationObserver: MutationObserver = null;
 
   @Element() el: HTMLIcToggleButtonElement;
 
@@ -108,8 +110,29 @@ export class ToggleButton {
       ],
       "Toggle button"
     );
+    if (typeof MutationObserver !== "undefined") {
+      this.hostMutationObserver = new MutationObserver(
+        this.hostMutationCallback
+      );
+      this.hostMutationObserver.observe(this.el, {
+        childList: true,
+      });
+    }
   }
 
+  disconnectedCallback(): void {
+    if (
+      this.hostMutationObserver !== null &&
+      this.hostMutationObserver !== undefined
+    ) {
+      this.hostMutationObserver.disconnect();
+    }
+  }
+
+  private hostMutationCallback = (): void => {
+    forceUpdate(this);
+  };
+
   @Listen("click", { capture: true })
   handleHostClick(e: Event): void {
     if (this.disabled) {