fix(#2948): fix Modal spacing for heading and actions

Author: bdfranck

libs/react-components/src/lib/modal/modal.spec.tsx

@@ -2,7 +2,7 @@ import { render } from "@testing-library/react";
 import GoabButton from "../../lib/button/button";
 import { GoabModal, GoabModalProps } from "./modal";
 
-describe("Modal Tests", () => {
+describe("Modal", () => {
   it("should render", async () => {
     const { baseElement } = render(<GoabModal>Modal Content</GoabModal>);
 
@@ -12,7 +12,7 @@ describe("Modal Tests", () => {
     expect(modal?.getAttribute("closable")).toBe("false");
   });
 
-  it("Modal - should render with close capability via icon and background", async () => {
+  it("should render with close capability via icon and background", async () => {
     const props = {
       heading: "Modal Heading",
       open: true,
@@ -35,15 +35,29 @@ describe("Modal Tests", () => {
     const { baseElement } = render(<GoabModal {...props}>Modal Content</GoabModal>);
     const modal = baseElement.querySelector("goa-modal");
     const actionContent = modal?.querySelector("[slot='actions']");
-    const heading = modal?.querySelector("[slot='heading']");
     // Role attribute is no longer passed to the web component (deprecated)
     expect(modal?.getAttribute("role")).toBeNull();
 
-    expect(heading?.textContent).toContain("Modal Heading");
+    expect(modal?.getAttribute("heading")).toBe("Modal Heading");
     expect(modal?.getAttribute("open")).toBe("true");
     expect(modal?.getAttribute("maxwidth")).toBe("500px");
     expect(modal?.getAttribute("closable")).toBe("true");
     expect(modal?.textContent).toContain("Modal Content");
     expect(actionContent?.textContent).toContain("Close");
   });
+
+  it("should render with React node heading", async () => {
+    const headingNode = <div>Custom Heading</div>;
+    const { baseElement } = render(
+      <GoabModal open heading={headingNode}>
+        Modal Content
+      </GoabModal>,
+    );
+
+    const modal = baseElement.querySelector("goa-modal");
+    const headingContent = modal?.querySelector("[slot='heading']");
+
+    expect(modal?.getAttribute("open")).toBe("true");
+    expect(headingContent?.textContent).toBe("Custom Heading");
+  });
 });

libs/react-components/src/lib/modal/modal.tsx

@@ -80,12 +80,13 @@ export function GoabModal({
       ref={el}
       open={open ? "true" : undefined}
       closable={onClose ? "true" : "false"}
+      heading={typeof heading === "string" ? heading : undefined}
       maxwidth={maxWidth}
       transition={transition}
       calloutvariant={calloutVariant}
       testid={testId}
     >
-      {heading && <div slot="heading">{heading}</div>}
+      {heading && typeof heading !== "string" && <div slot="heading">{heading}</div>}
       {actions && <div slot="actions">{actions}</div>}
       {children}
     </goa-modal>

libs/web-components/src/components/modal/Modal.svelte

@@ -138,9 +138,20 @@
     const el = _rootEl?.querySelector(selector);
     const children = el && getSlottedChildren(el);
 
+    // If no children at all, it's empty
+    if (!children || children.length === 0) {
+      return true;
+    }
+
+    // If the only child is an iframe, it's empty
+    if (children?.length === 1 && children[0].tagName === "IFRAME") {
+      return true;
+    }
+
     return children?.length === 1 // there should only be one child element
       && children[0].tagName === "DIV" // angular renders a <div>
       && children[0].getAttribute("slot") === slotName // the div is a slot
+      && children[0]?.textContent?.trim() === "" // the div is empty
   }
 
   function close(e: Event) {