From a5302ab88ba5d30ed74b99ad2bf3255391663a81 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Fri, 11 Oct 2024 12:30:38 -0500
Subject: [PATCH 1/3] add className prop to Dialog component

---
 packages/react/src/Dialog/Dialog.stories.tsx | 4 +++-
 packages/react/src/Dialog/Dialog.tsx         | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Dialog/Dialog.stories.tsx b/packages/react/src/Dialog/Dialog.stories.tsx
index ac6f1b1e58e..0476a5bd2fa 100644
--- a/packages/react/src/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.stories.tsx
@@ -3,6 +3,7 @@ import type {Meta} from '@storybook/react'
 import {Button, Text} from '..'
 import type {DialogProps} from './Dialog'
 import {Dialog} from './Dialog'
+import styles from './dialog.module.css'
 
 /* Dialog Version 2 */
 
@@ -116,6 +117,7 @@ export const Playground = (
           {...args}
           position={{narrow: args.positionNarrow, regular: args.positionRegular}}
           onClose={onDialogClose}
+          className={styles.dialogStyle}
           footerButtons={[
             {buttonType: 'default', content: 'Open Second Dialog', onClick: openSecondDialog},
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
@@ -124,7 +126,7 @@ export const Playground = (
         >
           {lipsum}
           {secondOpen && (
-            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
+            <Dialog title="Inner dialog!" className={styles.dialogStyle} onClose={onSecondDialogClose} width="small">
               Hello world
             </Dialog>
           )}
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 50e30643c12..13d1b4fd752 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -142,6 +142,11 @@ export interface DialogProps extends SxProp {
    * The element to focus when the Dialog opens
    */
   initialFocusRef?: React.RefObject<HTMLElement>
+
+  /**
+   * Additional class names to apply to the dialog
+   */
+  className?: string
 }
 
 /**
@@ -409,6 +414,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     returnFocusRef,
     initialFocusRef,
     sx,
+    className,
   } = props
   const dialogLabelId = useId()
   const dialogDescriptionId = useId()
@@ -497,6 +503,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             aria-modal
             {...positionDataAttributes}
             sx={sx}
+            className={className}
           >
             {header}
             <ScrollableRegion aria-labelledby={dialogLabelId} className="DialogOverflowWrapper">

From d7dab22a255a6c991aac054b3fb17cd729fbdfda Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Fri, 11 Oct 2024 12:34:19 -0500
Subject: [PATCH 2/3] add changeset and remove accidental classname

---
 .changeset/thin-keys-move.md                 | 5 +++++
 packages/react/src/Dialog/Dialog.stories.tsx | 4 +---
 2 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/thin-keys-move.md

diff --git a/.changeset/thin-keys-move.md b/.changeset/thin-keys-move.md
new file mode 100644
index 00000000000..7f771cef9c0
--- /dev/null
+++ b/.changeset/thin-keys-move.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add 'className' prop to `Dialog` component
diff --git a/packages/react/src/Dialog/Dialog.stories.tsx b/packages/react/src/Dialog/Dialog.stories.tsx
index 0476a5bd2fa..ac6f1b1e58e 100644
--- a/packages/react/src/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.stories.tsx
@@ -3,7 +3,6 @@ import type {Meta} from '@storybook/react'
 import {Button, Text} from '..'
 import type {DialogProps} from './Dialog'
 import {Dialog} from './Dialog'
-import styles from './dialog.module.css'
 
 /* Dialog Version 2 */
 
@@ -117,7 +116,6 @@ export const Playground = (
           {...args}
           position={{narrow: args.positionNarrow, regular: args.positionRegular}}
           onClose={onDialogClose}
-          className={styles.dialogStyle}
           footerButtons={[
             {buttonType: 'default', content: 'Open Second Dialog', onClick: openSecondDialog},
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
@@ -126,7 +124,7 @@ export const Playground = (
         >
           {lipsum}
           {secondOpen && (
-            <Dialog title="Inner dialog!" className={styles.dialogStyle} onClose={onSecondDialogClose} width="small">
+            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
               Hello world
             </Dialog>
           )}

From c7f85a8beac3dc8646fde9388919a8603dab58df Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Tue, 15 Oct 2024 10:33:24 -0500
Subject: [PATCH 3/3] add prop to docs.json

---
 packages/react/src/Dialog/Dialog.docs.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Dialog/Dialog.docs.json b/packages/react/src/Dialog/Dialog.docs.json
index f0e54d1ccd7..91f4d66385b 100644
--- a/packages/react/src/Dialog/Dialog.docs.json
+++ b/packages/react/src/Dialog/Dialog.docs.json
@@ -64,7 +64,13 @@
       "name": "initialFocusRef",
       "type": "React.RefObject<HTMLElement>",
       "description": "Focus this element when the Dialog opens"
+    },
+    {
+      "name": "className",
+      "type": "string | undefined",
+      "defaultValue": "",
+      "description": "CSS string"
     }
   ],
   "subcomponents": []
-}
+}
\ No newline at end of file