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 = () => ( + + + +) diff --git a/packages/react/src/Button/Button.stories.tsx b/packages/react/src/Button/Button.stories.tsx index 017aa3de456..ce55f4fcbdb 100644 --- a/packages/react/src/Button/Button.stories.tsx +++ b/packages/react/src/Button/Button.stories.tsx @@ -35,7 +35,7 @@ Playground.argTypes = { control: { type: 'radio', }, - options: ['default', 'primary', 'danger', 'invisible'], + options: ['default', 'primary', 'danger', 'invisible', 'link'], }, alignContent: { control: { diff --git a/packages/react/src/Button/IconButton.docs.json b/packages/react/src/Button/IconButton.docs.json index d460a90835a..6d606228e6d 100644 --- a/packages/react/src/Button/IconButton.docs.json +++ b/packages/react/src/Button/IconButton.docs.json @@ -15,7 +15,7 @@ }, { "name": "variant", - "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", + "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible' | 'link'", "defaultValue": "", "description": "Changes the look and feel of the button which is different for each variant" }, diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts index 58523391638..af953feb964 100644 --- a/packages/react/src/Button/styles.ts +++ b/packages/react/src/Button/styles.ts @@ -198,6 +198,35 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.outline.selectedBorder})`, }, }, + link: { + color: 'var(--fgColor-link)', + display: 'inline-block', + fontSize: 'inherit', + border: 'none', + height: 'unset', + padding: '0', + minWidth: 'fit-content', + backgroundColor: 'transparent', + + '&:hover:not([disabled]):not([data-inactive])': { + textDecoration: 'underline', + }, + + '&:focus-visible:not([disabled])': { + outlineOffset: '2px', + }, + + '&:disabled': { + color: 'primer.fg.disabled', + '[data-component=ButtonCounter], [data-component="leadingVisual"], [data-component="trailingAction"]': { + color: 'inherit', + }, + }, + + '[data-component="text"]': { + whiteSpace: 'unset', + }, + }, } return style[variant] diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index 2fff7ebbb00..0d5dfb08e43 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -10,7 +10,7 @@ export const StyledButton = styled.button` ${sx}; ` -export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' +export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'link' export type Size = 'small' | 'medium' | 'large'