diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png new file mode 100644 index 00000000000..b2443219b19 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png new file mode 100644 index 00000000000..d98344a3fb9 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png new file mode 100644 index 00000000000..93529901ed3 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png new file mode 100644 index 00000000000..b2443219b19 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b2443219b19 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png new file mode 100644 index 00000000000..0677c176682 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png new file mode 100644 index 00000000000..3fe2a15d1c7 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png new file mode 100644 index 00000000000..0677c176682 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png new file mode 100644 index 00000000000..0677c176682 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png new file mode 100644 index 00000000000..1ef651ca958 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png new file mode 100644 index 00000000000..0b26322d851 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png new file mode 100644 index 00000000000..2f1b39e722e Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png new file mode 100644 index 00000000000..745862b9c3d Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png new file mode 100644 index 00000000000..1ef651ca958 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png new file mode 100644 index 00000000000..553afb8ba71 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png new file mode 100644 index 00000000000..7f5d69467c3 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png new file mode 100644 index 00000000000..85e66885659 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png new file mode 100644 index 00000000000..553afb8ba71 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-colorblind-linux.png new file mode 100644 index 00000000000..1ef651ca958 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-dimmed-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-dimmed-linux.png new file mode 100644 index 00000000000..0b26322d851 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-high-contrast-linux.png new file mode 100644 index 00000000000..2f1b39e722e Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-linux.png new file mode 100644 index 00000000000..745862b9c3d Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-tritanopia-linux.png new file mode 100644 index 00000000000..1ef651ca958 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-colorblind-linux.png new file mode 100644 index 00000000000..553afb8ba71 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-high-contrast-linux.png new file mode 100644 index 00000000000..7f5d69467c3 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-linux.png new file mode 100644 index 00000000000..85e66885659 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-tritanopia-linux.png new file mode 100644 index 00000000000..553afb8ba71 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-light-tritanopia-linux.png differ diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts index 1c7132775f6..2458709e526 100644 --- a/e2e/components/SegmentedControl.test.ts +++ b/e2e/components/SegmentedControl.test.ts @@ -3,500 +3,120 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' import {viewports} from '../test-helpers/viewports' -test.describe('SegmentedControl', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Default.${theme}.png`) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Default.${theme}.focus.png`) - - // Middle Button Focus state - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - await page.keyboard.press('Shift+Tab') - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Default.${theme}.middle.selected.focus.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol--playground', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol--playground', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('SegmentedControlButton Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-segmentedcontrol-button--playground', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot( - `SegmentedControl.SegmentedControlButton Playground.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-segmentedcontrol-button--playground', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('SegmentedControlIconButton Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-segmentedcontrol-iconbutton--playground', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot( - `SegmentedControl.SegmentedControlIconButton Playground.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-segmentedcontrol-iconbutton--playground', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, - }, - // TODO: Remove this rule when the issue is fixed https://github.com/github/primer/issues/1864 - 'button-name': { - enabled: false, - }, - }, - }) - }) - }) - } - }) - - test.describe('Associated with a Label and Caption', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--associated-with-a-label-and-caption', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot( - `SegmentedControl.Associated with a Label and Caption.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--associated-with-a-label-and-caption', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, - }, - }, - }) - }) - }) - } - }) - - test.describe('Fullwidth Narrow', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--fullwidth-narrow', - globals: { - colorScheme: theme, - }, - }) - - // Set viewport to narrow - await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 768}) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Fullwidth Narrow.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--fullwidth-narrow', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Fullwidth Regular', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--fullwidth-regular', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Fullwidth Regular.${theme}.png`) - }) +const stories = [ + { + title: 'Default', + id: 'components-segmentedcontrol--default', + }, + { + title: 'Playground', + id: 'components-segmentedcontrol--playground', + }, + { + title: 'Associated with a Label and Caption', + id: 'components-segmentedcontrol-features--associated-with-a-label-and-caption', + }, + { + title: 'Fullwidth Narrow', + id: 'components-segmentedcontrol-features--fullwidth-narrow', + }, + { + title: 'Fullwidth Regular', + id: 'components-segmentedcontrol-features--fullwidth-regular', + }, + { + title: 'Variant Narrow Action Menu', + id: 'components-segmentedcontrol-features--variant-narrow-action-menu', + }, + { + title: 'Variant Narrow Hide Labels', + id: 'components-segmentedcontrol-features--variant-narrow-hide-labels', + }, + { + title: 'Controlled', + id: 'components-segmentedcontrol-features--controlled', + }, + { + title: 'Fullwidth', + id: 'components-segmentedcontrol-features--fullwidth-all', + }, + { + title: 'Icon Only', + id: 'components-segmentedcontrol-features--icon-only', + }, + { + title: 'With Icons', + id: 'components-segmentedcontrol-features--with-icons', + }, + { + title: 'SegmentedControlButton Playground', + id: 'components-segmentedcontrol-segmentedcontrol-button--playground', + }, + { + title: 'SegmentedControlIconButton Playground', + id: 'components-segmentedcontrol-segmentedcontrol-iconbutton--playground', + }, + { + title: 'Dev: With Css', + id: 'components-segmentedcontrol-dev--with-css', + }, + { + title: 'Dev: With Sx', + id: 'components-segmentedcontrol-dev--with-sx', + }, + { + title: 'Dev: With Sx And Css', + id: 'components-segmentedcontrol-dev--with-sx-and-css', + }, +] as const - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--fullwidth-regular', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Variant Narrow Action Menu', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--variant-narrow-action-menu', - globals: { - colorScheme: theme, - }, - }) - - // Set viewport to narrow - await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 768}) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Variant Narrow Action Menu.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--variant-narrow-action-menu', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Variant Narrow Hide Labels', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--variant-narrow-hide-labels', - globals: { - colorScheme: theme, - }, - }) - - // Set viewport to narrow - await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 768}) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Variant Narrow Hide Labels.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--variant-narrow-hide-labels', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Controlled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--controlled', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Controlled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--controlled', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Fullwidth', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--fullwidth-all', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Fullwidth.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--fullwidth-all', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Icon Only', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--icon-only', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Icon Only.${theme}.png`) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Icon Only.${theme}.focus.png`) - - // Middle Button Focus state - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - await page.keyboard.press('Shift+Tab') - expect(await page.screenshot()).toMatchSnapshot( - `SegmentedControl.Icon Only.${theme}.middle.selected.focus.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--icon-only', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, - }, - // TODO: Remove this rule when the issue is fixed https://github.com/github/primer/issues/1864 - 'button-name': { - enabled: false, +test.describe('SegmentedControl', () => { + 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('With Icons', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--with-icons', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.With Icons.${theme}.png`) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.With Icons.${theme}.focus.png`) - - // Middle Button Focus state - await page.keyboard.press('Tab') - await page.keyboard.press('Enter') - await page.keyboard.press('Shift+Tab') - expect(await page.screenshot()).toMatchSnapshot( - `SegmentedControl.With Icons.${theme}.middle.selected.focus.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-segmentedcontrol-features--with-icons', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + }) + + if (story.title.includes('Narrow')) { + // Set viewport to narrow + await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 768}) + } + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.${story.title}.${theme}.png`) + + if (story.title === 'Default') { + // Focus state + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.${story.title}.${theme}.focus.png`) + + // Middle Button Focus state + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + await page.keyboard.press('Shift+Tab') + expect(await page.screenshot()).toMatchSnapshot( + `SegmentedControl.${story.title}.${theme}.middle.selected.focus.png`, + ) + } + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, + }) + await expect(page).toHaveNoViolations() }) }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx new file mode 100644 index 00000000000..a93a3ed912d --- /dev/null +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -0,0 +1,78 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import {SegmentedControl} from '.' +import SegmentedControlIconButton from './SegmentedControlIconButton' +import SegmentedControlButton from './SegmentedControlButton' +import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react' + +const excludedControlKeys = ['variant'] + +export default { + title: 'Components/SegmentedControl/Dev', + component: SegmentedControl, + subcomponents: {SegmentedControlButton, SegmentedControlIconButton}, + parameters: {controls: {exclude: excludedControlKeys}}, +} as Meta + +export const WithCss = () => ( + + + Preview + + + Raw + + + Blame + + +) + +export const WithSx = () => ( + + + Preview + + + Raw + + + Blame + + +) + +export const WithSxAndCss = () => ( + + + Preview + + + Raw + + + Blame + + +) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index fe9190e35dd..ef15a893627 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -32,6 +32,7 @@ type SegmentedControlProps = { size?: 'small' | 'medium' /** Configure alternative ways to render the control when it gets rendered in tight spaces */ variant?: 'default' | Partial> + className?: string } & SxProp const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({