Dialog: Full screen & Bottom sheet support

.changeset/rare-geese-melt.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Dialog: `full-screen` and `action-sheet` variants

e2e/components/Dialog.test.ts

@@ -32,6 +32,190 @@ test.describe('Dialog', () => {
  }
  })
 
+ test.describe('Bottom Sheet', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--bottom-sheet',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Bottom Sheet.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--bottom-sheet',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Full Screen', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--full-screen',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Full Screen.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--full-screen',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Non Declaritive', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--non-declaritive',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Non Declaritve.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--non-declaritive',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Responsive', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--responsive',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Responsive.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--responsive',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Size Large', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--size-large',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Size Large.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--size-large',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Size Small', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--size-small',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Size Small.${theme}.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--size-small',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
+ test.describe('Size X Dialog', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--size-x-large',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+ `Dialog.Size X Large Test.${theme}.png`,
+ )
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-dialog-features--size-x-large',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+ }
+ })
+
  test.describe('Stress Test', () => {
  for (const theme of themes) {
  test.describe(theme, () => {
@@ -42,8 +226,6 @@ test.describe('Dialog', () => {
  colorScheme: theme,
  },
  })
-
- await page.getByRole('button', {name: 'Show dialog'}).click()
  expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Stress Test.${theme}.png`)
  })
 
@@ -71,7 +253,6 @@ test.describe('Dialog', () => {
  },
  })
 
- await page.getByRole('button', {name: 'Show dialog'}).click()
  expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
  `Dialog.With Custom Renderers.${theme}.png`,
  )

src/ConfirmationDialog/ConfirmationDialog.test.tsx

@@ -12,6 +12,22 @@ import {ThemeProvider} from '../ThemeProvider'
 import {SSRProvider} from '../utils/ssr'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 
+// The Dialog uses `matchMedia` to determine whether or not to reduce motion.
+
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+})
+
 const Basic = ({confirmButtonType}: Pick<React.ComponentProps<typeof ConfirmationDialog>, 'confirmButtonType'>) => {
  const [isOpen, setIsOpen] = useState(false)
  const buttonRef = useRef<HTMLButtonElement>(null)

src/ConfirmationDialog/ConfirmationDialog.tsx

@@ -17,8 +17,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' | 'cancel' | 'escape') => void
-
+ onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'escape') => void
  /**
  * Required. The title of the ConfirmationDialog. This is usually a brief
  * question.

src/DataTable/__tests__/ErrorDialog.test.tsx

@@ -3,6 +3,22 @@ import {render, screen} from '@testing-library/react'
 import React from 'react'
 import {ErrorDialog} from '../ErrorDialog'
 
+// The ErrorDialog uses `matchMedia` because the ConfirmationDialog uses it to determine whether or not to reduce motion.
+
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+})
+
 describe('Table.ErrorDialog', () => {
  it('should use a default title of "Error" if `title` is not provided', () => {
  render(<ErrorDialog />)

src/Dialog/Dialog.docs.json

@@ -37,14 +37,19 @@
  },
  {
  "name": "onClose",
- "type": "(gesture: 'close-button' | 'escape') => void",
- "description": "This method is invoked when a gesture to close the dialog is used (either 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 (either 'close-button' or 'escape')."
+ "type": "(gesture: 'close-button' | 'escape' | 'drag' | 'overlay') => void",
+ "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press, clicking/tapping on the backdrop, clicking/tapping the 'X' in the top-right corner or dragging away a bottom sheet). The gesture argument indicates the gesture that was used to close the dialog."
  },
  {
  "name": "role",
  "type": "'dialog' | 'alertdialog'",
  "description": "The ARIA role to assign to this dialog."
  },
+ {
+ "name": "type",
+ "type": "'default' | 'full-screen' | 'bottom-sheet'",
+ "description": "The type of dialog to render. 'default' renders a dialog in the center of the screen. 'full-screen' renders the dialog full screen and ignored the width and height. 'full-screen' is often used for mobile breakpoints."
+ },
  {
  "name": "width",
  "type": "'small' | 'medium' | 'large' | 'xlarge'"