fix(scrim): render text content inside scrim (#7509)

**Related Issue:** #7032 ## Summary - Use new dom utility to test for content - Add stories - Update tests
Esri · Aug 11, 2023 · 643ce5d · 643ce5d
1 parent b138c3b
commit 643ce5d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
@@ -114,6 +114,8 @@ describe("calcite-scrim", () => {
     const contentNode = await page.find(`calcite-scrim >>> .${CSS.content}`);
 
     expect(contentNode).not.toBeNull();
+    expect(await contentNode.isVisible()).toBe(true);
+    expect(contentNode).not.toHaveAttribute("hidden");
   });
 
   describe("Responsive loading spinner", () => {

diff --git a/packages/calcite-components/src/components/scrim/scrim.stories.ts b/packages/calcite-components/src/components/scrim/scrim.stories.ts
@@ -72,3 +72,13 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const textContent_TestOnly = (): string =>
+  html` <div tabindex="0" style="position: relative; width: 400px; height: 400px">
+    <calcite-scrim>This is a test.</calcite-scrim>
+  </div>`;
+
+export const noContent_TestOnly = (): string =>
+  html` <div tabindex="0" style="position: relative; width: 400px; height: 400px">
+    <calcite-scrim></calcite-scrim>
+  </div>`;
diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx
@@ -11,7 +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";
+import { slotChangeHasContent } from "../../utils/dom";
 
 /**
  * @slot - A slot for adding custom content, primarily loading information.
@@ -132,7 +132,7 @@ export class Scrim implements LocalizedComponent, T9nComponent {
   // --------------------------------------------------------------------------
 
   private handleDefaultSlotChange = (event: Event): void => {
-    this.hasContent = slotChangeHasAssignedElement(event);
+    this.hasContent = slotChangeHasContent(event);
   };
 
   private storeLoaderEl = (el: HTMLCalciteLoaderElement): void => {