Dialog v2: Move files, reformat stories and add e2e tests (#2984)

* initial

* Dialog v2: move files, refaormat stories and add e2e tests

* Update generated/components.json

* snaps

* remove jest disable

* Dialogv2 -> Dialog2

* storybook tests and await dialogs

* disable animations

* disable animations on the first snapshots too

* fix page locators

* test(vrt): update snapshots

* test(Hidden): update export

* Revert "test(Hidden): update export"

This reverts commit f29edd9.

---------

Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

docs/content/drafts/Dialog.mdx → docs/content/drafts/Dialog2.mdx

@@ -1,10 +1,14 @@
 ---
 title: Dialog v2
-componentId: dialog
+componentId: dialog_2
 status: Draft
+a11yReviewed: false
+description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
+source: https://github.com/primer/react/tree/main/src/Dialog2
+storybook: '/react/storybook/?path=/story/drafts-components-dialog--default'
 ---
 
-import data from '../../../src/Dialog/Dialog.docs.json'
+import data from '../../../src/Dialog2/Dialog.docs.json'
 
 ```js
 import {Dialog} from '@primer/react/drafts'

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -159,7 +159,7 @@
 - title: Drafts
   children:
     - title: Dialog v2
-      url: /drafts/Dialog
+      url: /drafts/Dialog2
     - title: InlineAutocomplete
       url: /drafts/InlineAutocomplete
     - title: MarkdownEditor

e2e/components/DialogV2.test.ts

@@ -0,0 +1,131 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('DialogV2', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Default.${theme}.png`)
+          // Open Dialog
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          // wait for dialog to open
+          await page.getByRole('dialog', {name: 'Dialog'}).waitFor()
+          // Open state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Default.${theme}.open.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Basic Dialog', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Dialog.${theme}.png`)
+          // Open Dialog
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          // wait for dialog to open
+          await page.getByRole('dialog', {name: 'Dialog'}).waitFor()
+          // Open state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Dialog.${theme}.open.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Basic Confirmation Dialog', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-confirmation-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Confirmation Dialog.${theme}.png`)
+          // Open Dialog
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          // wait for dialog to open
+          await page.getByRole('alertdialog').waitFor()
+          // Open state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Confirmation Dialog.${theme}.open.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-confirmation-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -2022,7 +2022,12 @@
       "name": "Dialog",
       "status": "draft",
       "a11yReviewed": false,
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-dialog--default",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  return (\n    <>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        Show dialog\n      </Button>\n      {isOpen && <Dialog onClose={onDialogClose}>Dialog Content</Dialog>}\n    </>\n  )\n}"
+        }
+      ],
       "props": [
         {
           "name": "title",

script/generate-e2e-tests.js

@@ -336,6 +336,25 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'DialogV2',
+    {
+      stories: [
+        {
+          id: 'drafts-components-dialog--default',
+          name: 'Default',
+        },
+        {
+          id: 'drafts-components-dialog-features--basic-dialog',
+          name: 'Basic Dialog',
+        },
+        {
+          id: 'drafts-components-dialog-features--basic-confirmation-dialog',
+          name: 'Basic Confirmation Dialog',
+        },
+      ],
+    },
+  ],
   [
     'Flash',
     {

src/Dialog/ConfirmationDialog.tsx → src/Dialog2/ConfirmationDialog.tsx

@@ -5,7 +5,7 @@ import Box from '../Box'
 import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
 import {FocusKeys} from '@primer/behaviors'
 import {get} from '../constants'
-import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
+import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from './Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'
 
 /**