diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx index 6778dff7f..3b95a6f29 100644 --- a/src/components/IconButton/IconButton.stories.tsx +++ b/src/components/IconButton/IconButton.stories.tsx @@ -14,28 +14,115 @@ type Story = StoryObj; export const Playground: Story = { args: { icon: 'user', + type: 'primary', size: 'default', disabled: false, }, }; -export const Disabled: Story = { +export const Primary: Story = { args: { - disabled: true, + type: 'primary', + icon: 'user', + }, +}; + +export const Secondary: Story = { + args: { + type: 'secondary', icon: 'user', }, }; -export const Empty: Story = { +export const Ghost: Story = { args: { type: 'ghost', icon: 'user', }, }; +export const Danger: Story = { + args: { + type: 'danger', + icon: 'user', + }, +}; + +export const Info: Story = { + args: { + type: 'info', + icon: 'user', + }, +}; + +export const DefaultSize: Story = { + args: { + type: 'primary', + size: 'default', + icon: 'user', + }, +}; + export const Small: Story = { args: { + type: 'primary', size: 'sm', icon: 'user', }, }; + +export const ExtraSmall: Story = { + args: { + type: 'primary', + size: 'xs', + icon: 'user', + }, +}; + +export const PrimaryDisabled: Story = { + args: { + type: 'primary', + icon: 'user', + disabled: true, + }, +}; + +export const SecondaryDisabled: Story = { + args: { + type: 'secondary', + icon: 'user', + disabled: true, + }, +}; + +export const GhostDisabled: Story = { + args: { + type: 'ghost', + icon: 'user', + disabled: true, + }, +}; + +export const DangerDisabled: Story = { + args: { + type: 'danger', + icon: 'user', + disabled: true, + }, +}; + +export const InfoDisabled: Story = { + args: { + type: 'info', + icon: 'user', + disabled: true, + }, +}; + +export const Interactive: Story = { + args: { + type: 'primary', + icon: 'user', + onClick: () => console.log('clicked'), + }, +}; diff --git a/tests/buttons/iconbutton.spec.ts b/tests/buttons/iconbutton.spec.ts new file mode 100644 index 000000000..09ffa4ee2 --- /dev/null +++ b/tests/buttons/iconbutton.spec.ts @@ -0,0 +1,459 @@ +import { test as it, expect } from '@playwright/test'; +import { getStoryUrl } from '../utils'; + +const { describe, use } = it; + +describe('IconButton Visual Regression', () => { + describe('Light Theme (Storybook Global)', () => { + describe('Button Types', () => { + it('primary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-primary-light.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--secondary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-secondary-light.png', { + maxDiffPixels: 100, + }); + }); + + it('ghost button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--ghost', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-ghost-light.png', { + maxDiffPixels: 100, + }); + }); + + it('danger button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--danger', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-danger-light.png', { + maxDiffPixels: 100, + }); + }); + + it('info button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--info', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-info-light.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Size Variants', () => { + it('default size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--default-size', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-default-size-light.png', { + maxDiffPixels: 100, + }); + }); + + it('small size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--small', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-small-light.png', { + maxDiffPixels: 100, + }); + }); + + it('extra small size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--extra-small', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-xs-light.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Disabled States', () => { + it('primary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-primary-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--secondary-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-secondary-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + + it('ghost disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--ghost-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-ghost-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + + it('danger disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--danger-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-danger-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + + it('info disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--info-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-info-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Interactive States', () => { + it('hover state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.hover(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('iconbutton-primary-hover-light.png', { + maxDiffPixels: 100, + }); + }); + + it('focus state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.focus(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('iconbutton-primary-focus-light.png', { + maxDiffPixels: 100, + }); + }); + + it('active/pressed state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + const box = await button.boundingBox(); + if (!box) { + throw new Error('Button bounding box is null - element may not be in viewport'); + } + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + await page.mouse.down(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('iconbutton-primary-active-light.png', { + maxDiffPixels: 100, + }); + await page.mouse.up(); + }); + }); + }); + + describe('Dark Theme (System prefers-color-scheme)', () => { + use({ colorScheme: 'dark' }); + + describe('Button Types', () => { + it('primary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-primary-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--secondary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-secondary-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('ghost button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--ghost'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-ghost-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('danger button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--danger'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-danger-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('info button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--info'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-info-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Size Variants', () => { + it('default size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--default-size'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-default-size-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('small size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--small'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-small-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('extra small size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--extra-small'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('iconbutton-xs-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Disabled States', () => { + it('primary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-primary-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--secondary-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-secondary-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('ghost disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--ghost-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-ghost-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('danger disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--danger-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-danger-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('info disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--info-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('iconbutton-info-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Interactive States', () => { + it('hover state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.hover(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('iconbutton-primary-hover-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('focus state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.focus(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('iconbutton-primary-focus-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('active/pressed state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + const box = await button.boundingBox(); + if (!box) { + throw new Error('Button bounding box is null - element may not be in viewport'); + } + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + await page.mouse.down(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('iconbutton-primary-active-dark.png', { + maxDiffPixels: 100, + }); + await page.mouse.up(); + }); + }); + }); + + describe('Events and Accessibility', () => { + it('click event fires correctly', async ({ page }) => { + const consoleMessages: string[] = []; + page.on('console', msg => consoleMessages.push(msg.text())); + + await page.goto(getStoryUrl('buttons-iconbutton--interactive', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeEnabled(); + + await button.click(); + + // Verify console log was triggered + expect(consoleMessages.some(msg => msg.includes('clicked'))).toBe(true); + }); + + it('disabled button prevents click', async ({ page }) => { + await page.goto(getStoryUrl('buttons-iconbutton--primary-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeDisabled(); + }); + + it('keyboard navigation works', async ({ page }) => { + const consoleMessages: string[] = []; + page.on('console', msg => consoleMessages.push(msg.text())); + + await page.goto(getStoryUrl('buttons-iconbutton--interactive', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button'); + await expect(button).toBeVisible({ timeout: 10000 }); + + await page.keyboard.press('Tab'); + await expect(button).toBeFocused(); + await page.keyboard.press('Enter'); + + // Verify console log was triggered + expect(consoleMessages.some(msg => msg.includes('clicked'))).toBe(true); + }); + }); +}); diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-dark-chromium-linux.png new file mode 100644 index 000000000..622ebc624 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-disabled-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-disabled-dark-chromium-linux.png new file mode 100644 index 000000000..d32870e60 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-disabled-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-disabled-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-disabled-light-chromium-linux.png new file mode 100644 index 000000000..888cf4720 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-disabled-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-light-chromium-linux.png new file mode 100644 index 000000000..a3747f4de Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-danger-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-default-size-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-default-size-dark-chromium-linux.png new file mode 100644 index 000000000..f9101145c Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-default-size-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-default-size-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-default-size-light-chromium-linux.png new file mode 100644 index 000000000..9da064136 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-default-size-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-dark-chromium-linux.png new file mode 100644 index 000000000..27e7f2d87 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-disabled-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-disabled-dark-chromium-linux.png new file mode 100644 index 000000000..433b9a795 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-disabled-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-disabled-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-disabled-light-chromium-linux.png new file mode 100644 index 000000000..d16f5d86d Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-disabled-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-light-chromium-linux.png new file mode 100644 index 000000000..b6899ff5d Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-ghost-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-dark-chromium-linux.png new file mode 100644 index 000000000..b55288849 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-disabled-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-disabled-dark-chromium-linux.png new file mode 100644 index 000000000..d09054d54 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-disabled-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-disabled-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-disabled-light-chromium-linux.png new file mode 100644 index 000000000..78583c7fa Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-disabled-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-light-chromium-linux.png new file mode 100644 index 000000000..0a2ed0886 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-info-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-active-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-active-dark-chromium-linux.png new file mode 100644 index 000000000..c47a47615 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-active-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-active-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-active-light-chromium-linux.png new file mode 100644 index 000000000..573ed279a Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-active-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-dark-chromium-linux.png new file mode 100644 index 000000000..f9101145c Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-disabled-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-disabled-dark-chromium-linux.png new file mode 100644 index 000000000..433b9a795 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-disabled-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-disabled-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-disabled-light-chromium-linux.png new file mode 100644 index 000000000..d16f5d86d Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-disabled-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-focus-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-focus-dark-chromium-linux.png new file mode 100644 index 000000000..efe662328 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-focus-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-focus-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-focus-light-chromium-linux.png new file mode 100644 index 000000000..2d8a6a730 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-focus-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-hover-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-hover-dark-chromium-linux.png new file mode 100644 index 000000000..b5b40045d Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-hover-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-hover-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-hover-light-chromium-linux.png new file mode 100644 index 000000000..ded3b62d3 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-hover-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-light-chromium-linux.png new file mode 100644 index 000000000..9da064136 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-primary-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-dark-chromium-linux.png new file mode 100644 index 000000000..7356e111c Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-disabled-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-disabled-dark-chromium-linux.png new file mode 100644 index 000000000..433b9a795 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-disabled-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-disabled-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-disabled-light-chromium-linux.png new file mode 100644 index 000000000..d16f5d86d Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-disabled-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-light-chromium-linux.png new file mode 100644 index 000000000..cf9458354 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-secondary-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-small-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-small-dark-chromium-linux.png new file mode 100644 index 000000000..aedbd70d7 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-small-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-small-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-small-light-chromium-linux.png new file mode 100644 index 000000000..d67be6707 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-small-light-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-xs-dark-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-xs-dark-chromium-linux.png new file mode 100644 index 000000000..ef4155ff9 Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-xs-dark-chromium-linux.png differ diff --git a/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-xs-light-chromium-linux.png b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-xs-light-chromium-linux.png new file mode 100644 index 000000000..a5c6497cb Binary files /dev/null and b/tests/buttons/iconbutton.spec.ts-snapshots/iconbutton-xs-light-chromium-linux.png differ