diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png new file mode 100644 index 00000000000..fc19b4d55e9 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png new file mode 100644 index 00000000000..0a04b6f6495 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b296d55c241 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png new file mode 100644 index 00000000000..95db3a032a3 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png new file mode 100644 index 00000000000..fc19b4d55e9 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png new file mode 100644 index 00000000000..69ba703d458 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png new file mode 100644 index 00000000000..18700963524 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png new file mode 100644 index 00000000000..8fd81685059 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png new file mode 100644 index 00000000000..69ba703d458 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png new file mode 100644 index 00000000000..a798833b107 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png new file mode 100644 index 00000000000..d372cb74ade Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-high-contrast-linux.png new file mode 100644 index 00000000000..59b0d1f0d2c Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-linux.png new file mode 100644 index 00000000000..a798833b107 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png new file mode 100644 index 00000000000..a798833b107 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png new file mode 100644 index 00000000000..50ce267db31 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-high-contrast-linux.png new file mode 100644 index 00000000000..fd7a03a7461 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-linux.png new file mode 100644 index 00000000000..f197a580cd3 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png new file mode 100644 index 00000000000..50ce267db31 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png new file mode 100644 index 00000000000..cc4d3da3848 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png new file mode 100644 index 00000000000..cd4bb8ed290 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0c313f1b66b Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png new file mode 100644 index 00000000000..6bf31872810 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png new file mode 100644 index 00000000000..cc4d3da3848 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png new file mode 100644 index 00000000000..9ac39b51608 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png new file mode 100644 index 00000000000..8c5819900bd Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png new file mode 100644 index 00000000000..190a7f35052 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png new file mode 100644 index 00000000000..9ac39b51608 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png new file mode 100644 index 00000000000..2f381f9ff5f Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png new file mode 100644 index 00000000000..16d708c3b0a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png new file mode 100644 index 00000000000..32760b16ee1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png new file mode 100644 index 00000000000..40447caeda5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2f381f9ff5f Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png new file mode 100644 index 00000000000..4051b7bdb9f Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png new file mode 100644 index 00000000000..abc781a61bf Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-linux.png new file mode 100644 index 00000000000..82685e27347 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png new file mode 100644 index 00000000000..4051b7bdb9f Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png new file mode 100644 index 00000000000..a798833b107 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png new file mode 100644 index 00000000000..d372cb74ade Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-high-contrast-linux.png new file mode 100644 index 00000000000..59b0d1f0d2c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-linux.png new file mode 100644 index 00000000000..a798833b107 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png new file mode 100644 index 00000000000..a798833b107 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png new file mode 100644 index 00000000000..50ce267db31 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-high-contrast-linux.png new file mode 100644 index 00000000000..fd7a03a7461 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-linux.png new file mode 100644 index 00000000000..f197a580cd3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png new file mode 100644 index 00000000000..50ce267db31 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png new file mode 100644 index 00000000000..cc4d3da3848 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png new file mode 100644 index 00000000000..cd4bb8ed290 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0c313f1b66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-linux.png new file mode 100644 index 00000000000..6bf31872810 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png new file mode 100644 index 00000000000..cc4d3da3848 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png new file mode 100644 index 00000000000..9ac39b51608 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png new file mode 100644 index 00000000000..8c5819900bd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-linux.png new file mode 100644 index 00000000000..190a7f35052 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png new file mode 100644 index 00000000000..9ac39b51608 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png differ diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index c6af8dae002..95863abb376 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -377,6 +377,40 @@ test.describe('Button', () => { } }) + test.describe('Trailing Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + test.describe('Trailing Counter', () => { for (const theme of themes) { test.describe(theme, () => { @@ -444,4 +478,40 @@ test.describe('Button', () => { }) } }) + + test.describe('Dev: Invisible Variants', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-devonly--invisible-variants', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`) + }) + }) + } + }) + + test.describe('Dev: sx prop', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-devonly--test-sx-prop', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`) + }) + }) + } + }) }) diff --git a/e2e/components/drafts/Button2.test.ts b/e2e/components/drafts/Button2.test.ts index fd6ff67991f..5e2f140937e 100644 --- a/e2e/components/drafts/Button2.test.ts +++ b/e2e/components/drafts/Button2.test.ts @@ -377,6 +377,40 @@ test.describe('Button', () => { } }) + test.describe('Trailing Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + test.describe('Trailing Counter', () => { for (const theme of themes) { test.describe(theme, () => { @@ -444,4 +478,40 @@ test.describe('Button', () => { }) } }) + + test.describe('Dev: Invisible Variants', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-devonly--invisible-variants', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`) + }) + }) + } + }) + + test.describe('Dev: sx prop', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-devonly--test-sx-prop', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`) + }) + }) + } + }) }) diff --git a/generated/components.json b/generated/components.json index 9c6ef24530e..a5b300c4674 100644 --- a/generated/components.json +++ b/generated/components.json @@ -4972,6 +4972,81 @@ } ] }, + "drafts_button": { + "id": "drafts_button", + "name": "Button2", + "status": "draft", + "a11yReviewed": false, + "stories": [ + { + "id": "components-button2--default", + "code": "() => " + } + ], + "props": [ + { + "name": "children", + "required": true, + "type": "React.ReactNode", + "description": "The content of the button." + }, + { + "name": "variant", + "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'", + "defaultValue": "'default'", + "description": "Change the visual style of the button." + }, + { + "name": "size", + "type": "| 'small'\n| 'medium'\n| 'large'", + "defaultValue": "'medium'" + }, + { + "name": "leadingIcon", + "type": "React.ComponentType", + "description": "An icon to display before the button text." + }, + { + "name": "trailingIcon", + "type": "React.ComponentType", + "description": "An icon to display after the button text." + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "'button'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "passthrough": { + "element": "button", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" + }, + "subcomponents": [ + { + "name": "Button.Counter", + "props": [ + { + "name": "children", + "required": true, + "type": "number", + "description": "The counter value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, "drafts_inline_autocomplete": { "id": "drafts_inline_autocomplete", "name": "InlineAutocomplete", diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 898e6b6489d..b89c67070f9 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -21,7 +21,7 @@ export default { variant: { control: { type: 'radio', - options: ['default', 'primary', 'danger', 'invisible'], + options: ['default', 'primary', 'danger', 'invisible', 'outline'], }, }, alignContent: { @@ -57,6 +57,14 @@ export default { }, } as Meta -export const Playground: Story = args => +export const Playground: Story = args => { + const {trailingVisualCount, ...rest} = args + return ( + + ) +} export const Default = () => diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 517df570e80..4b791e40326 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -131,6 +131,7 @@ exports[`@primer/react/decprecated should not update exports without a semver ch exports[`@primer/react/drafts should not update exports without a semver change 1`] = ` [ + "Button", "Content", "DataTable", "Dialog", diff --git a/src/drafts/Button2/Button.dev.stories.tsx b/src/drafts/Button2/Button.dev.stories.tsx index b6ee51efaf9..94f06efa15c 100644 --- a/src/drafts/Button2/Button.dev.stories.tsx +++ b/src/drafts/Button2/Button.dev.stories.tsx @@ -1,6 +1,6 @@ import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react' import React from 'react' -import {Button, IconButton} from '.' +import {Button} from '.' export default { title: 'Drafts/Components/Button/DevOnly', @@ -29,7 +29,7 @@ export const InvisibleVariants = () => { Button {count} - + {/* */} ) } diff --git a/src/drafts/Button2/Button.docs.json b/src/drafts/Button2/Button.docs.json index 4fc26b7b1bc..b8a24e7a045 100644 --- a/src/drafts/Button2/Button.docs.json +++ b/src/drafts/Button2/Button.docs.json @@ -1,7 +1,7 @@ { - "id": "button", - "name": "Button", - "status": "alpha", + "id": "drafts_button", + "name": "Button2", + "status": "draft", "a11yReviewed": false, "stories": [], "props": [ @@ -67,4 +67,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/src/drafts/Button2/Button.stories.tsx b/src/drafts/Button2/Button.stories.tsx index 4f75a6d41cb..d379fa25b65 100644 --- a/src/drafts/Button2/Button.stories.tsx +++ b/src/drafts/Button2/Button.stories.tsx @@ -21,7 +21,7 @@ export default { variant: { control: { type: 'radio', - options: ['default', 'primary', 'danger', 'invisible'], + options: ['default', 'primary', 'danger', 'invisible', 'outline'], }, }, alignContent: { @@ -57,6 +57,14 @@ export default { }, } as Meta -export const Playground: Story = args => +export const Playground: Story = args => { + const {trailingVisualCount, ...rest} = args + return ( + + ) +} export const Default = () => diff --git a/src/drafts/Button2/IconButton.dev.stories.tsx b/src/drafts/Button2/IconButton.dev.stories.tsx deleted file mode 100644 index bb64b0552b2..00000000000 --- a/src/drafts/Button2/IconButton.dev.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import {ChevronDownIcon} from '@primer/octicons-react' -import React from 'react' -import {IconButton} from '.' - -export default { - title: 'Drafts/Components/IconButton/DevOnly', -} - -export const CustomSize = () => ( - -) - -export const CustomSizeWithMedia = () => { - return ( - - ) -} - -export const CustomIconColor = () => ( - -) diff --git a/src/drafts/Button2/IconButton.docs.json b/src/drafts/Button2/IconButton.docs.json deleted file mode 100644 index c49de7a2661..00000000000 --- a/src/drafts/Button2/IconButton.docs.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "id": "icon_button", - "name": "IconButton", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "required": true, - "description": "This will be the Button description." - }, - { - "name": "variant", - "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", - "defaultValue": "", - "description": "Changes the look and feel of the button which is different for each variant" - }, - { - "name": "size", - "type": "'small' | 'medium' | 'large'", - "defaultValue": "", - "description": "Changes the size of the icon button component" - }, - { - "name": "icon", - "type": "Component", - "defaultValue": "", - "description": "provide an octicon. It will be placed in the center of the button" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [] -} \ No newline at end of file diff --git a/src/drafts/Button2/IconButton.features.stories.tsx b/src/drafts/Button2/IconButton.features.stories.tsx deleted file mode 100644 index 5717ba95f83..00000000000 --- a/src/drafts/Button2/IconButton.features.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import {HeartIcon} from '@primer/octicons-react' -import React from 'react' -import {IconButton} from '.' - -export default { - title: 'Drafts/Components/IconButton/Features', -} - -export const Primary = () => - -export const Danger = () => - -export const Invisible = () => - -export const Disabled = () => - -export const Small = () => - -export const Medium = () => - -export const Large = () => diff --git a/src/drafts/Button2/IconButton.stories.tsx b/src/drafts/Button2/IconButton.stories.tsx deleted file mode 100644 index 578074ab566..00000000000 --- a/src/drafts/Button2/IconButton.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, {ComponentProps} from 'react' -import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react' -import {Story, Meta} from '@storybook/react' -import {IconButton} from '.' -import {OcticonArgType} from '../../utils/story-helpers' - -const meta: Meta> = { - title: 'Drafts/Components/IconButton', - argTypes: { - size: { - control: { - type: 'radio', - options: ['small', 'medium', 'large'], - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - variant: { - control: { - type: 'radio', - options: ['default', 'primary', 'danger', 'invisible'], - }, - }, - icon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), - }, - args: { - size: 'medium', - disabled: false, - variant: 'default', - 'aria-label': 'Icon button description', - icon: XIcon, - }, -} - -export default meta - -export const Playground: Story> = args => - -export const Default = () => diff --git a/src/drafts/Button2/IconButton.tsx b/src/drafts/Button2/IconButton.tsx deleted file mode 100644 index 37bc28e8778..00000000000 --- a/src/drafts/Button2/IconButton.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, {forwardRef} from 'react' -import {IconButtonProps} from './types' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' -import {ButtonBase} from './ButtonBase' -import {defaultSxProp} from '../../utils/defaultSxProp' -import {generateCustomSxProp} from './Button' - -const IconButton = forwardRef(({sx: sxProp = defaultSxProp, icon: Icon, ...props}, forwardedRef): JSX.Element => { - let sxStyles = sxProp - // grap the button props that have associated data attributes in the styles - const {size} = props - - if (sxProp !== null && Object.keys(sxProp).length > 0) { - sxStyles = generateCustomSxProp({size}, sxProp) - } - - return ( - // @ts-expect-error StyledButton wants both Anchor and Button refs - - ) -}) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps> - -export {IconButton} diff --git a/src/drafts/Button2/LinkButton.features.stories.tsx b/src/drafts/Button2/LinkButton.features.stories.tsx deleted file mode 100644 index 4ad75929039..00000000000 --- a/src/drafts/Button2/LinkButton.features.stories.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import {EyeIcon, ChevronRightIcon, HeartIcon} from '@primer/octicons-react' -import React, {forwardRef} from 'react' -import {Button} from '.' - -export default { - title: 'Drafts/Components/LinkButton/Features', -} - -export const Primary = () => ( - -) - -export const Danger = () => ( - -) - -export const Invisible = () => ( - -) - -export const Outline = () => ( - -) - -export const LeadingVisual = () => ( - -) - -export const TrailingVisual = () => ( - -) - -export const TrailingAction = () => ( - -) - -export const Block = () => ( - -) - -export const Small = () => ( - -) - -export const Medium = () => ( - -) - -export const Large = () => ( - -) - -type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} -const ReactRouterLikeLink = forwardRef( - ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { - // eslint-disable-next-line jsx-a11y/anchor-has-content - return - }, -) - -export const WithReactRouter = () => ( - -) diff --git a/src/drafts/Button2/LinkButton.stories.tsx b/src/drafts/Button2/LinkButton.stories.tsx deleted file mode 100644 index 2da394696c3..00000000000 --- a/src/drafts/Button2/LinkButton.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react' -import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon, ChevronRightIcon} from '@primer/octicons-react' -import {Story, Meta} from '@storybook/react' -import {Button} from '.' -import {OcticonArgType} from '../../utils/story-helpers' - -export default { - title: 'Drafts/Components/LinkButton', - argTypes: { - size: { - control: { - type: 'radio', - options: ['small', 'medium', 'large'], - }, - }, - variant: { - control: { - type: 'radio', - options: ['default', 'primary', 'danger', 'invisible', 'outline'], - }, - }, - alignContent: { - control: { - type: 'radio', - options: ['center', 'start'], - }, - }, - block: { - control: { - type: 'boolean', - }, - }, - leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), - trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), - trailingAction: OcticonArgType([ChevronRightIcon]), - trailingVisualCount: { - control: { - type: 'number', - }, - }, - href: {control: 'text'}, - }, - args: { - block: false, - size: 'medium', - variant: 'default', - alignContent: 'center', - trailingIcon: null, - leadingIcon: null, - href: '/', - }, -} as Meta - -export const Playground: Story = args => ( - -) - -export const Default = () => ( - -) diff --git a/src/drafts/Button2/LinkButton.tsx b/src/drafts/Button2/LinkButton.tsx deleted file mode 100644 index bec625ad6f3..00000000000 --- a/src/drafts/Button2/LinkButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, {forwardRef} from 'react' -import {LinkButtonProps} from './types' -import {ButtonBase, ButtonBaseProps} from './ButtonBase' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' -import {defaultSxProp} from '../../utils/defaultSxProp' - -type MyProps = LinkButtonProps & ButtonBaseProps - -const LinkButton = forwardRef( - ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => { - return ( - - {children} - - ) - }, -) as PolymorphicForwardRefComponent<'a', MyProps> - -export {LinkButton} diff --git a/src/drafts/Button2/index.ts b/src/drafts/Button2/index.ts index d0519b22e70..254d7bf77d2 100644 --- a/src/drafts/Button2/index.ts +++ b/src/drafts/Button2/index.ts @@ -1,9 +1,6 @@ import {ButtonComponent} from './Button' import {Counter} from './ButtonCounter' -import {IconButton} from './IconButton' -import {LinkButton} from './LinkButton' export type {ButtonProps, IconButtonProps} from './types' -export {IconButton, LinkButton} export const Button = Object.assign(ButtonComponent, { Counter, diff --git a/src/drafts/index.ts b/src/drafts/index.ts index 95ae3d8a365..3686569431f 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -51,3 +51,6 @@ export * from '../TreeView' export * from '../NavList' export * from '../SegmentedControl' export * from '../SplitPageLayout' + +// CSS Experiment +export * from './Button2'