From e94f0a1771ab148108c290bf92cb794289c2173d Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:55:36 -0500
Subject: [PATCH] feat(Dialog) add `className` prop  (#5115)

* add className prop to Dialog component

* add changeset and remove accidental classname

* add prop to docs.json
---
 .changeset/thin-keys-move.md               | 5 +++++
 packages/react/src/Dialog/Dialog.docs.json | 8 +++++++-
 packages/react/src/Dialog/Dialog.tsx       | 7 +++++++
 3 files changed, 19 insertions(+), 1 deletion(-)
 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.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
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">