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", "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 + + /** + * Additional class names to apply to the dialog + */ + className?: string } /** @@ -409,6 +414,7 @@ const _Dialog = React.forwardRef {header}