From 1603908f10e9efc271c5e7006ab4612d7a3023b1 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 11 Aug 2023 10:13:03 -0700
Subject: [PATCH 1/2] fix(scrim): render text content inside scrim. #7032

---
 packages/calcite-components/src/components/scrim/scrim.e2e.ts | 2 ++
 packages/calcite-components/src/components/scrim/scrim.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
index e3adacbc539..f4d28f05c3c 100644
--- 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.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx
index a23ab421056..e729843d504 100644
--- 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 => {

From 96db0fdec8d6398ffa7495e8124c09bdbb637b54 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 11 Aug 2023 10:15:43 -0700
Subject: [PATCH 2/2] add stories

---
 .../src/components/scrim/scrim.stories.ts              | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/calcite-components/src/components/scrim/scrim.stories.ts b/packages/calcite-components/src/components/scrim/scrim.stories.ts
index 00b87f30f23..ecc29594e87 100644
--- 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>`;