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(Pay attention to me) - - 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 - +