Add className, width and height props to ConfirmationDialog (#6107)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: francinelucca <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>

Author: 3 people

.changeset/big-actors-smoke.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(ConfirmationDialog): add className, width and height

packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx

@@ -70,6 +70,36 @@ const ShorthandHookFromActionMenu = () => {
   )
 }
 
+const CustomProps = ({
+  className,
+  width,
+  height,
+}: Pick<React.ComponentProps<typeof ConfirmationDialog>, 'className' | 'width' | 'height'>) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  return (
+    <ThemeProvider theme={theme}>
+      <BaseStyles>
+        <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+          Show dialog
+        </Button>
+        {isOpen && (
+          <ConfirmationDialog
+            title="Confirm"
+            onClose={onDialogClose}
+            className={className}
+            width={width}
+            height={height}
+          >
+            Lorem ipsum dolor sit Pippin good dog.
+          </ConfirmationDialog>
+        )}
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}
+
 describe('ConfirmationDialog', () => {
   behavesAsComponent({
     Component: ConfirmationDialog,
@@ -121,4 +151,32 @@ describe('ConfirmationDialog', () => {
     expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
     expect(getByRole('button', {name: 'Secondary'})).not.toEqual(document.activeElement)
   })
+
+  it('accepts a className prop', async () => {
+    const testClassName = 'test-class-name'
+    const {getByText, getByRole} = HTMLRender(<CustomProps className={testClassName} />)
+
+    fireEvent.click(getByText('Show dialog'))
+
+    const dialog = getByRole('alertdialog')
+    expect(dialog.classList.contains(testClassName)).toBe(true)
+  })
+
+  it('accepts a width prop', async () => {
+    const {getByText, getByRole} = HTMLRender(<CustomProps width="large" />)
+
+    fireEvent.click(getByText('Show dialog'))
+
+    const dialog = getByRole('alertdialog')
+    expect(dialog.getAttribute('data-width')).toBe('large')
+  })
+
+  it('accepts a height prop', async () => {
+    const {getByText, getByRole} = HTMLRender(<CustomProps height="small" />)
+
+    fireEvent.click(getByText('Show dialog'))
+
+    const dialog = getByRole('alertdialog')
+    expect(dialog.getAttribute('data-height')).toBe('small')
+  })
 })

packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx

@@ -4,7 +4,7 @@ import {createRoot} from 'react-dom/client'
 import type {ThemeProviderProps} from '../ThemeProvider'
 import {ThemeProvider, useTheme} from '../ThemeProvider'
 import {FocusKeys} from '@primer/behaviors'
-import type {DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
+import type {DialogProps, DialogHeaderProps, DialogButtonProps, DialogWidth, DialogHeight} from '../Dialog/Dialog'
 import {Dialog} from '../Dialog/Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'
 import BaseStyles from '../BaseStyles'
@@ -40,6 +40,29 @@ export interface ConfirmationDialogProps {
    * The type of button to use for the confirm button. Default: Button.
    */
   confirmButtonType?: 'normal' | 'primary' | 'danger'
+
+  /**
+   * Additional class names to apply to the dialog
+   */
+  className?: string
+
+  /**
+   * The width of the dialog.
+   * small: 296px
+   * medium: 320px
+   * large: 480px
+   * xlarge: 640px
+   * @default 'medium'
+   */
+  width?: DialogWidth
+
+  /**
+   * The height of the dialog.
+   * small: 480px
+   * large: 640px
+   * auto: variable based on contents
+   */
+  height?: DialogHeight
 }
 
 const ConfirmationHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({title, onClose, dialogLabelId}) => {
@@ -87,6 +110,9 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
     confirmButtonContent = 'OK',
     confirmButtonType = 'normal',
     children,
+    className,
+    width = 'medium',
+    height,
   } = props
 
   const onCancelButtonClick = useCallback(() => {
@@ -114,7 +140,9 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
       title={title}
       footerButtons={footerButtons}
       role="alertdialog"
-      width="medium"
+      width={width}
+      height={height}
+      className={className}
       renderHeader={ConfirmationHeader}
       renderBody={ConfirmationBody}
       renderFooter={ConfirmationFooter}