Revert "Dialog: Full screen & Bottom sheet support"

e2e/components/Dialog.test.ts

@@ -32,190 +32,6 @@ 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, () => {
@@ -226,6 +42,8 @@ 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`)
         })
 
@@ -253,6 +71,7 @@ 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,22 +12,6 @@ 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,7 +17,8 @@ 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' | 'cancel' | 'close-button' | 'escape') => void
+  onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void
+
   /**
    * Required. The title of the ConfirmationDialog. This is usually a brief
    * question.

src/DataTable/__tests__/ErrorDialog.test.tsx

@@ -3,22 +3,6 @@ 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,19 +37,14 @@
     },
     {
       "name": "onClose",
-      "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."
+      "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')."
     },
     {
       "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'"