diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-colorblind-linux.png new file mode 100644 index 00000000000..233af12addb Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-dimmed-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-dimmed-linux.png new file mode 100644 index 00000000000..c0e1e1f19a6 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c8accffdf2c Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-linux.png new file mode 100644 index 00000000000..233af12addb Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-tritanopia-linux.png new file mode 100644 index 00000000000..233af12addb Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-colorblind-linux.png new file mode 100644 index 00000000000..f4091c94478 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-high-contrast-linux.png new file mode 100644 index 00000000000..922f6c202ad Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-linux.png new file mode 100644 index 00000000000..f4091c94478 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-tritanopia-linux.png new file mode 100644 index 00000000000..f4091c94478 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Dev-SX-Props-light-tritanopia-linux.png differ diff --git a/e2e/components/TooltipV2.test.ts b/e2e/components/TooltipV2.test.ts index 38d2846e582..d72a1881241 100644 --- a/e2e/components/TooltipV2.test.ts +++ b/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() }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/TooltipV2/Tooltip.dev.stories.tsx b/packages/react/src/TooltipV2/Tooltip.dev.stories.tsx new file mode 100644 index 00000000000..012f4de54ed --- /dev/null +++ b/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 = () => ( + + + + + +)