diff --git a/.changeset/beige-schools-kneel.md b/.changeset/beige-schools-kneel.md new file mode 100644 index 00000000000..c3b7228c968 --- /dev/null +++ b/.changeset/beige-schools-kneel.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Add `link` variant to Button diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png new file mode 100644 index 00000000000..3406fb040af Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png new file mode 100644 index 00000000000..343ec1ed4df Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c34bce5d185 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png new file mode 100644 index 00000000000..3406fb040af Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3406fb040af Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png new file mode 100644 index 00000000000..adf4babde10 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png new file mode 100644 index 00000000000..4717c408a17 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png new file mode 100644 index 00000000000..adf4babde10 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png new file mode 100644 index 00000000000..adf4babde10 Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Link-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png index 6bf81c029c5..792d96b19d6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png index fba38688f90..8159d89e281 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png index b0ab44425e4..58e56a16a93 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png index 6bf81c029c5..792d96b19d6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png index 6bf81c029c5..792d96b19d6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png index 5ce814c4bb3..18b449f5dd3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png index 0a3a92b595f..3e8b9d37d83 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png index 5ce814c4bb3..18b449f5dd3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png index 5ce814c4bb3..18b449f5dd3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png differ diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index 822a95aa46b..08ca9123eb5 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -173,6 +173,40 @@ test.describe('Button', () => { } }) + test.describe('Link', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--link', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--link', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + test.describe('Large', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx index 842bb2eed3a..c0d9df86fa8 100644 --- a/packages/react/src/Button/Button.features.stories.tsx +++ b/packages/react/src/Button/Button.features.stories.tsx @@ -2,9 +2,8 @@ import {EyeIcon, TriangleDownIcon, HeartIcon, DownloadIcon, CommentIcon} from '@ import React, {useState} from 'react' import {Button} from '.' import {Stack} from '../Stack/Stack' -import Link from '../Link' import {announce} from '@primer/live-region-element' - +import {Tooltip} from '../TooltipV2/Tooltip' export default { title: 'Components/Button/Features', } @@ -15,6 +14,8 @@ export const Danger = () => export const Invisible = () => +export const Link = () => + export const LeadingVisual = () => export const TrailingVisual = () => @@ -31,9 +32,12 @@ const AccessibilityNote = () => {
Learn more about at{' '} - + Staff-only: Dynamically updated button labels - + .
> @@ -200,3 +204,9 @@ export const LabelWrap = () => { ) } + +export const InactiveButtonWithTooltip = () => ( +