Dialog: Add sx styles back to the footer styled-component & add visual regression tests for both Dialogs

.changeset/curly-eggs-drop.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Dialog: Add sx back to dialog footer

e2e/components/Dialog.test.ts

@@ -0,0 +1,92 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Dialog', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialog--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialog--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Stress Test', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialog-features--stress-test',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialog.Stress Test.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialog-features--stress-test',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('With Custom Renderers', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialog-features--with-custom-renderers',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `Dialog.With Custom Renderers.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialog-features--with-custom-renderers',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

e2e/components/Dialogv1.test.ts

@@ -0,0 +1,34 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Dialog v1', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialogv1--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Dialogv1.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-dialogv1--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

script/generate-e2e-tests.js

@@ -444,6 +444,36 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'Dialog',
+    {
+      stories: [
+        {
+          id: 'components-dialog--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-dialog-features--stress-test',
+          name: 'Stress Test',
+        },
+        {
+          id: 'components-dialog-features--with-custom-renderers',
+          name: 'With Custom Renderers',
+        },
+      ],
+    },
+  ],
+  [
+    'Dialog v1',
+    {
+      stories: [
+        {
+          id: 'components-dialogv1--default',
+          name: 'Default',
+        },
+      ],
+    },
+  ],
   [
     'FilteredSearch',
     {

src/Dialog/Dialog.tsx

@@ -374,6 +374,8 @@ const Footer = styled.div<SxProp>`
   gap: ${get('space.2')};
   z-index: 1;
   flex-shrink: 0;
+
+  ${sx};
 `
 
 const buttonTypes = {