diff --git a/.changeset/popular-jokes-kiss.md b/.changeset/popular-jokes-kiss.md
deleted file mode 100644
index cb5f5102995..00000000000
--- a/.changeset/popular-jokes-kiss.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': minor
----
-
-`Dialog` and `ConfirmationDialog` can now be closed by clicking on the backdrop surrounding the dialog. This will cause `onClose` to be called with a new `'backdrop'` gesture.
diff --git a/docs/content/drafts/Dialog.mdx b/docs/content/drafts/Dialog.mdx
index baccf89d4a8..791d871f6e8 100644
--- a/docs/content/drafts/Dialog.mdx
+++ b/docs/content/drafts/Dialog.mdx
@@ -157,13 +157,13 @@ render()
### ConfirmationDialogProps
-| Prop name | Type | Default | Description |
-| :------------------- | :----------------------------------------------- | :----------------------------- | :-------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| title | `React.ReactNode` | | Required. Sets the title of the dialog, which by default is also used as the `aria-labelledby` attribute. |
-| onClose | `(gesture: 'confirm' │ 'cancel' │ 'close-button' | 'backdrop │ 'escape') => void` | | Required. This callback is invoked when a gesture to close the dialog is performed. The first argument indicates the gesture. |
-| cancelButtonContent | `React.ReactNode` | `"Cancel"` | The content to use for the cancel button. |
-| confirmButtonContent | `React.ReactNode` | `"OK"` | The content to use for the confirm button. |
-| confirmButtonType | `"normal" │ "primary" │ "danger"` | `Button` | The type of button to use for the confirm button. |
+| Prop name | Type | Default | Description |
+| :------------------- | :-------------------------------------------------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------- |
+| title | `React.ReactNode` | | Required. Sets the title of the dialog, which by default is also used as the `aria-labelledby` attribute. |
+| onClose | `(gesture: 'confirm' │ 'cancel' │ 'close-button' │ 'escape') => void` | | Required. This callback is invoked when a gesture to close the dialog is performed. The first argument indicates the gesture. |
+| cancelButtonContent | `React.ReactNode` | `"Cancel"` | The content to use for the cancel button. |
+| confirmButtonContent | `React.ReactNode` | `"OK"` | The content to use for the confirm button. |
+| confirmButtonType | `"normal" │ "primary" │ "danger"` | `Button` | The type of button to use for the confirm button. |
### ConfirmOptions
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
index 9a5a8a19df7..73311e348a5 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -19,7 +19,7 @@ export interface ConfirmationDialogProps {
* Required. This callback is invoked when a gesture to close the dialog
* is performed. The first argument indicates the gesture.
*/
- onClose: (gesture: 'confirm' | 'close-button' | 'backdrop' | 'cancel' | 'escape') => void
+ onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void
/**
* Required. The title of the ConfirmationDialog. This is usually a brief
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index da4e38cf698..3c8088542e2 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -67,22 +67,7 @@ describe('Dialog', () => {
await user.click(getByLabelText('Close'))
- expect(onClose).toHaveBeenCalledWith('close-button')
- expect(onClose).toHaveBeenCalledTimes(1) // Ensure it's not called with a backdrop gesture as well
- })
-
- it('calls `onClose` when clicking the backdrop', async () => {
- const user = userEvent.setup()
- const onClose = jest.fn()
- const {getByRole} = render()
-
- expect(onClose).not.toHaveBeenCalled()
-
- const dialog = getByRole('dialog')
- const backdrop = dialog.parentElement!
- await user.click(backdrop)
-
- expect(onClose).toHaveBeenCalledWith('backdrop')
+ expect(onClose).toHaveBeenCalled()
})
it('calls `onClose` when keying "Escape"', async () => {
@@ -95,7 +80,7 @@ describe('Dialog', () => {
await user.keyboard('{Escape}')
- expect(onClose).toHaveBeenCalledWith('escape')
+ expect(onClose).toHaveBeenCalled()
})
it('changes the
style for `overflow` if it is not set to "hidden"', () => {
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 6744210c1d3..81692f9ae45 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
import styled from 'styled-components'
import type {ButtonProps} from '../Button'
import {Button} from '../Button'
@@ -98,11 +98,11 @@ export interface DialogProps extends SxProp {
/**
* This method is invoked when a gesture to close the dialog is used (either
- * an Escape key press, clicking the backdrop, or clicking the "X" in the top-right corner). The
+ * an Escape key press or clicking the "X" in the top-right corner). The
* gesture argument indicates the gesture that was used to close the dialog
- * ('close-button', 'backdrop', or 'escape').
+ * (either 'close-button' or 'escape').
*/
- onClose: (gesture: 'close-button' | 'backdrop' | 'escape') => void
+ onClose: (gesture: 'close-button' | 'escape') => void
/**
* Default: "dialog". The ARIA role to assign to this dialog.
@@ -414,14 +414,6 @@ const _Dialog = React.forwardRef {
- if (e.target === e.currentTarget) {
- onClose('backdrop')
- }
- },
- [onClose],
- )
const dialogRef = useRef(null)
useRefObjectAsForwardedRef(forwardedRef, dialogRef)
@@ -473,7 +465,7 @@ const _Dialog = React.forwardRef
-
+