From 273748bac393da87aa6cd3f1c0e0e92d05ba6716 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 18 May 2022 09:55:18 +0100
Subject: [PATCH] Fixed #2905 - Add headerStyle and headerClassName properties
 to Dialog

---
 api-generator/components/dialog.js | 12 ++++++++++++
 components/doc/dialog/index.js     | 14 +++++++++++++-
 components/lib/dialog/Dialog.d.ts  |  2 ++
 components/lib/dialog/Dialog.js    |  3 ++-
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js
index e1200b2b5f..308dc98f2a 100644
--- a/api-generator/components/dialog.js
+++ b/api-generator/components/dialog.js
@@ -65,6 +65,18 @@ const DialogProps = [
         default: 'true',
         description: 'Keeps dialog in the viewport.'
     },
+    {
+        name: 'headerStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Style of the header section.'
+    },
+    {
+        name: 'headerClassName',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the header section.'
+    },
     {
         name: 'contentStyle',
         type: 'object',
diff --git a/components/doc/dialog/index.js b/components/doc/dialog/index.js
index 1e1f3b0e6c..c00bc0a163 100644
--- a/components/doc/dialog/index.js
+++ b/components/doc/dialog/index.js
@@ -786,6 +786,18 @@ const myIcon = (
                                     <td>true</td>
                                     <td>Keeps dialog in the viewport.</td>
                                 </tr>
+                                <tr>
+                                    <td>headerStyle</td>
+                                    <td>object</td>
+                                    <td>null</td>
+                                    <td>Style of the header section.</td>
+                                </tr>
+                                <tr>
+                                    <td>headerClassName</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Style class of the header section.</td>
+                                </tr>
                                 <tr>
                                     <td>contentStyle</td>
                                     <td>object</td>
@@ -1030,7 +1042,7 @@ const myIcon = (
                     <h5>Accessibility</h5>
                     <DevelopmentSection>
                     <h6>Screen Reader</h6>
-                    <p>Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. 
+                    <p>Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior.
                     In addition <i>aria-modal</i> is added since focus is kept within the popup.</p>
                     <p>It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary.</p>
                     <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index d755400130..da94954ff5 100644
--- a/components/lib/dialog/Dialog.d.ts
+++ b/components/lib/dialog/Dialog.d.ts
@@ -25,6 +25,8 @@ export interface DialogProps {
     draggable?: boolean;
     resizable?: boolean;
     modal?: boolean;
+    headerStyle?: object;
+    headerClassName?: string;
     contentStyle?: object;
     contentClassName?: string;
     closeOnEscape?: boolean;
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index d11c7f89eb..12d0d2655f 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -440,9 +440,10 @@ export const Dialog = React.forwardRef((props, ref) => {
             const icons = ObjectUtils.getJSXElement(props.icons, props);
             const header = ObjectUtils.getJSXElement(props.header, props);
             const headerId = idState + '_header';
+            const headerClassName = classNames('p-dialog-header', props.headerClassName);
 
             return (
-                <div ref={headerRef} className="p-dialog-header" onMouseDown={onDragStart}>
+                <div ref={headerRef} style={props.headerStyle} className={headerClassName} onMouseDown={onDragStart}>
                     <div id={headerId} className="p-dialog-title">{header}</div>
                     <div className="p-dialog-header-icons">
                         {icons}