Refactor Tooltip e2e tests and add sx prop story

e2e/components/TooltipV2.test.ts

@@ -2,155 +2,64 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('TooltipV2', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Anchor Has Margin', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--anchor-has-margin',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `TooltipV2.Anchor Has Margin.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--anchor-has-margin',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Calculated Direction', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--calculated-direction',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `TooltipV2.Calculated Direction.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--calculated-direction',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Icon Button With Description', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--icon-button-with-description',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-tooltipv2--default',
+  },
+  {
+    title: 'Anchor Has Margin',
+    id: 'components-tooltipv2-features--anchor-has-margin',
+  },
+  {
+    title: 'Calculated Direction',
+    id: 'components-tooltipv2-features--calculated-direction',
+  },
+  {
+    title: 'Icon Button With Description',
+    id: 'components-tooltipv2-features--icon-button-with-description',
+  },
+  {
+    title: 'Label Type',
+    id: 'components-tooltipv2-features--label-type',
+  },
+  {
+    title: 'Dev SX Props',
+    id: 'components-tooltipv2-dev--default',
+  },
+] as const
 
-          // Default state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `TooltipV2.Icon Button With Description.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--icon-button-with-description',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('TooltipV2', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-  test.describe('Label Type', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--label-type',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            await page.keyboard.press('Tab')
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `TooltipV2.${story.title}.${theme}.png`,
+            )
           })
 
-          // Default state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Label Type.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-tooltipv2-features--label-type',
-            globals: {
-              colorScheme: theme,
-            },
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
           })
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

packages/react/src/TooltipV2/Tooltip.dev.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {Button, Box} from '..'
+import {Tooltip} from './Tooltip'
+
+export default {
+  title: 'Components/TooltipV2/Dev',
+  component: Tooltip,
+}
+
+// Description type, north direction by default
+export const Default = () => (
+  <Box sx={{p: 6}}>
+    <Tooltip
+      text="This tooltip has a red background and a larger font size."
+      sx={{
+        '&[popover]': {
+          background: 'red',
+          fontSize: 2,
+        },
+      }}
+    >
+      <Button>Delete</Button>
+    </Tooltip>
+  </Box>
+)