fix(action): Support slotting icon after initialization (#913)

* support adding icon slot in action after initialization

* add test

* decrease delay

src/components/calcite-action/calcite-action.e2e.ts

@@ -43,6 +43,23 @@ describe("calcite-action", () => {
     expect(iconContainer).not.toBeNull();
   });
 
+  it("should have icon container with calcite-icon: after delay", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-action></calcite-action>`);
+
+    const action = await page.find("calcite-action");
+
+    const delay = 1;
+    await new Promise((resolve) => setTimeout(resolve, delay));
+
+    action.innerHTML = `<calcite-icon icon="hamburger" scale="s"></calcite-icon>`;
+
+    await page.waitForChanges();
+
+    const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
+    expect(iconContainer).not.toBeNull();
+  });
+
   it("should have icon container with svg", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-action><svg></svg></calcite-action>`);

src/components/calcite-action/calcite-action.tsx

@@ -9,7 +9,7 @@ import { CSS } from "./resources";
 import { CSS_UTILITY } from "../utils/resources";
 
 import { getElementDir } from "../utils/dom";
-import { VNode } from "@stencil/core/internal";
+import { VNode, State } from "@stencil/core/internal";
 
 /**
  * @slot - A slot for adding a `calcite-icon`.
@@ -91,7 +91,29 @@ export class CalciteAction {
 
   @Element() el: HTMLCalciteActionElement;
 
-  private buttonEl: HTMLButtonElement;
+  @State() hasChildren = false;
+
+  buttonEl: HTMLButtonElement;
+
+  observer = new MutationObserver(() => this.setHasChildren());
+
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+
+  componentWillLoad(): void {
+    this.setHasChildren();
+  }
+
+  componentDidLoad(): void {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+
+  componentDidUnload(): void {
+    this.observer.disconnect();
+  }
 
   // --------------------------------------------------------------------------
   //
@@ -104,6 +126,16 @@ export class CalciteAction {
     this.buttonEl.focus();
   }
 
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+
+  setHasChildren = (): void => {
+    this.hasChildren = !!this.el.children?.length;
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -125,12 +157,12 @@ export class CalciteAction {
   }
 
   renderIconContainer(): VNode {
-    const { el, loading, icon, scale } = this;
+    const { loading, icon, scale, hasChildren } = this;
     const iconScale = scale === "l" ? "m" : "s";
     const calciteLoaderNode = loading ? <calcite-loader is-active inline /> : null;
     const calciteIconNode = icon ? <calcite-icon icon={icon} scale={iconScale} /> : null;
     const iconNode = calciteLoaderNode || calciteIconNode;
-    const hasIconToDisplay = iconNode || el.children?.length;
+    const hasIconToDisplay = iconNode || hasChildren;
 
     const slotContainerNode = (
       <div

src/demos/action/add-action-icon-after-init.html

@@ -18,19 +18,18 @@ <h1>calcite-action</h1>
         <h2>LTR</h2>
         <div class="action-container">
           <h3>With text</h3>
-          <calcite-action id="slot-test" indicator active text="click-me" label="hello world" text-enabled
-            >
+          <calcite-action id="slot-test" indicator active text="click-me" label="hello world" text-enabled>
           </calcite-action>
 
           <script>
             const slotTestNode = document.getElementById("slot-test");
-            setTimeout(function(){
-            const div = document.createElement("div");
-            div.innerHTML = `<calcite-icon scale="s" icon="configure-popup"></calcite-icon>`;
-            slotTestNode.appendChild(div);
-          }, 2000)
+            setTimeout(function () {
+              const icon = document.createElement("calcite-icon");
+              icon.icon = "configure-popup";
+              icon.scale = "s";
+              slotTestNode.appendChild(icon);
+            }, 2000);
           </script>
-
         </div>
       </section>
     </main>