feat(Dialog) add className prop (#5115)

* add className prop to Dialog component

* add changeset and remove accidental classname

* add prop to docs.json

Author: randall-krauskopf

.changeset/thin-keys-move.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add 'className' prop to `Dialog` component

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": []
-}
+}

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">