fix(scrim): handle slotted children correctly (#7477)

**Related Issue:** #7032 ## Summary - Support adding slotted content after initial render - Uses `onSlotChange` to detect slotted elements - Hides content container via the hidden attribute - Updates test
Esri · Aug 8, 2023 · c5ce008 · c5ce008
1 parent e4017dc
commit c5ce008
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
@@ -89,14 +89,21 @@ describe("calcite-scrim", () => {
     expect(clickSpy).toHaveReceivedEventTimes(1);
   });
 
-  it("does not render content if the default slot if it is empty", async () => {
+  it("does not display content if the default slot if it is empty", async () => {
     const page = await newE2EPage();
 
     await page.setContent(`<calcite-scrim></calcite-scrim>`);
-
     const contentNode = await page.find(`calcite-scrim >>> .${CSS.content}`);
+    expect(contentNode).toHaveAttribute("hidden");
+
+    const scrim = await page.find("calcite-scrim");
+    scrim.innerHTML = "<p>Content added after initialization</p>";
+    await page.waitForChanges();
 
-    expect(contentNode).toBeNull();
+    const content = await page.find("p");
+    expect(content).toBeTruthy();
+    expect(await content.isVisible()).toBe(true);
+    expect(contentNode).not.toHaveAttribute("hidden");
   });
 
   it("renders content in the default slot has content", async () => {

diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx
@@ -11,6 +11,7 @@ import { ScrimMessages } from "./assets/scrim/t9n";
 import { CSS, BREAKPOINTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { Scale } from "../interfaces";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
 
 /**
  * @slot - A slot for adding custom content, primarily loading information.
@@ -75,6 +76,8 @@ export class Scrim implements LocalizedComponent, T9nComponent {
     updateMessages(this, this.effectiveLocale);
   }
 
+  @State() hasContent = false;
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -104,21 +107,20 @@ export class Scrim implements LocalizedComponent, T9nComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { el, loading, messages } = this;
-    const hasContent = el.innerHTML.trim().length > 0;
-    const loaderNode = loading ? (
-      <calcite-loader label={messages.loading} ref={this.storeLoaderEl} scale={this.loaderScale} />
-    ) : null;
-    const contentNode = hasContent ? (
-      <div class={CSS.content}>
-        <slot />
-      </div>
-    ) : null;
+    const { hasContent, loading, messages } = this;
 
     return (
       <div class={CSS.scrim}>
-        {loaderNode}
-        {contentNode}
+        {loading ? (
+          <calcite-loader
+            label={messages.loading}
+            ref={this.storeLoaderEl}
+            scale={this.loaderScale}
+          />
+        ) : null}
+        <div class={CSS.content} hidden={!hasContent}>
+          <slot onSlotchange={this.handleDefaultSlotChange} />
+        </div>
       </div>
     );
   }
@@ -129,6 +131,10 @@ export class Scrim implements LocalizedComponent, T9nComponent {
   //
   // --------------------------------------------------------------------------
 
+  private handleDefaultSlotChange = (event: Event): void => {
+    this.hasContent = slotChangeHasAssignedElement(event);
+  };
+
   private storeLoaderEl = (el: HTMLCalciteLoaderElement): void => {
     this.loaderEl = el;
     this.handleResize();