fix title for ReactNode

Author: guoda-puidokaite

.changeset/warm-news-remain.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+Change `title` and `heading` type to `ReactNode` and fix alignement for `Modal`.

packages/ui-components/src/components/Modal/Modal.component.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect, useRef, useId } from "react"
+import React, { useState, useEffect, useRef, useId, ReactNode } from "react"
 import { createPortal } from "react-dom"
 import { FocusTrap } from "focus-trap-react"
 import { ModalFooter } from "../ModalFooter/index"
@@ -46,8 +46,8 @@ const headerstyles = `
 `
 
 const titlestyles = `
-	jn:text-xl
-	jn:font-bold
+  jn:text-xl
+  jn:font-bold
 `
 
 const contentstyles = `
@@ -161,9 +161,9 @@ export const Modal: React.FC<ModalProps> = ({
 
   const modalRef = useRef<HTMLDivElement | null>(null)
 
-  const theTitle = title || heading
-
-  const modalTitleId = uniqueId()
+  const modalTitle = title || heading
+  const hasTitle = Boolean(modalTitle)
+  const modalTitleId = hasTitle ? uniqueId() : undefined
 
   return (
     <>
@@ -176,7 +176,7 @@ export const Modal: React.FC<ModalProps> = ({
                 clickOutsideDeactivates: isCloseabelOnBackdropClick,
                 fallbackFocus: () => modalRef.current!,
                 allowOutsideClick: true,
-                escapeDeactivates: (e) => {
+                escapeDeactivates: (e: KeyboardEvent) => {
                   handleEsc(e)
                   return false
                 },
@@ -187,20 +187,18 @@ export const Modal: React.FC<ModalProps> = ({
                 role="dialog"
                 ref={modalRef}
                 {...props}
-                aria-labelledby={theTitle && theTitle.length ? modalTitleId : undefined}
+                aria-labelledby={modalTitleId}
                 aria-label={ariaLabel}
               >
-                <div
-                  className={`juno-modal-header ${headerstyles} ${theTitle && theTitle.length ? `jn:justify-between` : `jn:justify-end`}`}
-                >
+                <div className={`juno-modal-header ${headerstyles} jn:justify-between`}>
                   {title || heading ? (
                     <h1 className={`juno-modal-title ${titlestyles}`} id={modalTitleId}>
                       {title || heading}
                     </h1>
                   ) : (
                     ""
                   )}
-                  {isCloseable ? <Icon icon="close" onClick={handleCancelClick} /> : ""}
+                  {isCloseable ? <Icon icon="close" onClick={handleCancelClick} aria-label="close" /> : ""}
                 </div>
                 <div className={`juno-modal-content ${contentstyles} ${unpad ? "" : contentpaddingstyles}`}>
                   {children}
@@ -232,11 +230,11 @@ export const Modal: React.FC<ModalProps> = ({
 
 type ModalSize = "small" | "large" | "xl" | "2xl"
 
-export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size"> {
+export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size" | "title"> {
   /** The title of the modal. This will be rendering as the heading of the modal, and the modal's `arial-labelledby` attribute will reference the title/heading element. If the modal does not have `title` or `heading`, use `ariaLabel` to provide an accessible name for the modal. */
-  title?: string
-  /** Also the title of the modal, just for API flexibility. If both `title` and `heading` are passed, `title` will win. */
-  heading?: string
+  title?: ReactNode
+  /** Also the title of the modal, just for API flexibility. If both `title` and `heading` are passed, `title` will take precedence. */
+  heading?: ReactNode
   /** The aria-label of the modal. Use only if the modal does NOT have a `title` or `heading`.  */
   ariaLabel?: string
   /** By default, the first element in the tab order of the Modal content will be focussed. To specify an element to be focussed when the modal opens, pass an element, DOM node, or selector string. */

packages/ui-components/src/components/Modal/Modal.stories.tsx

@@ -289,7 +289,7 @@ export const TestSelectInModal: Story = {
 export const TestComboBoxInModal: Story = {
   render: Template,
   args: {
-    title: "Modal with CombBox inside",
+    title: <p>Hello</p>,
     size: "small",
     children: (
       <>

packages/ui-components/src/components/Modal/Modal.test.tsx

@@ -31,16 +31,33 @@ describe("Modal", () => {
     expect(screen.getByRole("dialog")).toHaveClass("juno-modal")
   })
 
-  test("renders a title as passed", async () => {
-    await waitFor(() =>
-      render(
-        <PortalProvider>
-          <Modal title="My Modal" open />
-        </PortalProvider>
-      )
+  test("renders a string title correctly", () => {
+    render(
+      <PortalProvider>
+        <Modal open title="String Title" />
+      </PortalProvider>
     )
-    expect(screen.getByRole("dialog")).toBeInTheDocument()
-    expect(screen.getByRole("dialog")).toHaveTextContent("My Modal")
+    const dialog = screen.getByRole("dialog")
+    const titleElement = screen.getByText("String Title")
+    expect(dialog).toBeInTheDocument()
+    expect(titleElement).toBeInTheDocument()
+    expect(titleElement).toHaveAttribute("id")
+    expect(dialog).toHaveAttribute("aria-labelledby", titleElement.getAttribute("id"))
+  })
+
+  test("renders a ReactNode title correctly", () => {
+    render(
+      <PortalProvider>
+        <Modal open title={<div>Node Title</div>} />
+      </PortalProvider>
+    )
+
+    const dialog = screen.getByRole("dialog")
+    const titleWrapper = screen.getByText("Node Title").closest("h1")
+
+    expect(dialog).toBeInTheDocument()
+    expect(titleWrapper).toBeInTheDocument()
+    expect(dialog).toHaveAttribute("aria-labelledby", titleWrapper?.id)
   })
 
   test("renders a title when a 'heading' prop is passed", async () => {