Merge pull request #177 from brunomous/feature/dialog-title-prop

Change Dialog title to accept ReactNode
conceptadev · Aug 20, 2024 · fd5737c · fd5737c
2 parents 5761732 + 7ae8ee1
commit fd5737c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/react-material-ui/__tests__/Dialog.spec.tsx b/packages/react-material-ui/__tests__/Dialog.spec.tsx
@@ -16,14 +16,22 @@ describe('Dialog Component', () => {
     render(<Dialog open={true} {...props} />);
   });
 
-  it('renders title correctly', () => {
+  it('renders title string correctly', () => {
     const { getByText } = render(
       <Dialog open={true} {...props} title="Test Title" />,
     );
     const title = getByText('Test Title');
     expect(title).toBeInTheDocument();
   });
 
+  it('renders title element correctly', () => {
+    const { getByText } = render(
+      <Dialog open={true} {...props} title={<div>Test Title</div>} />,
+    );
+    const title = getByText('Test Title');
+    expect(title).toBeInTheDocument();
+  });
+
   it('renders children correctly', () => {
     const { getByText } = render(
       <Dialog open={true} {...props} title="Test Title">

diff --git a/packages/react-material-ui/src/components/Dialog/Dialog.tsx b/packages/react-material-ui/src/components/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import DialogContent from '@mui/material/DialogContent';
@@ -9,17 +9,17 @@ import { CustomDialog, CustomDialogTitle } from './Styles';
 /**
  * Dialog component props.
  */
-export type DialogProps = MuiDialogProps & {
+export type DialogProps = Omit<MuiDialogProps, 'title'> & {
   /** Whether the dialog is open */
   open: boolean;
   /** Function to handle closing of the dialog */
   handleClose: () => void;
   /** Optional title of the dialog */
-  title?: string;
+  title?: ReactNode;
   /** Content to be displayed inside the dialog */
-  children?: React.ReactNode;
+  children?: ReactNode;
   /** Footer content to be displayed inside the dialog */
-  footer?: React.ReactNode;
+  footer?: ReactNode;
   /** Whether to display dividers in the dialog content */
   dividers?: boolean;
 };
@@ -70,6 +70,7 @@ export const Dialog = (props: DialogProps) => {
       onClose={handleClose}
       open={open}
       fullScreen={fullScreen}
+      title={null}
     >
       {title && (
         <CustomDialogTitle onClose={handleClose}>{title}</CustomDialogTitle>