diff --git a/.changeset/tender-dodos-create.md b/.changeset/tender-dodos-create.md new file mode 100644 index 00000000000..64701989584 --- /dev/null +++ b/.changeset/tender-dodos-create.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Link: Adjust text-decoration-offset diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png index f1c6c0a79ba..0f8a26031e9 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-hover-linux.png index 74549aabf65..36b077683da 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-linux.png index 3e73a1e6df1..9133f2f3d37 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png index b8d528eba64..34f391d7b23 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-hover-linux.png index 01fd7cc89e6..2d620b79463 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-linux.png index 2dc10d58465..26d512368aa 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png index f1c6c0a79ba..0f8a26031e9 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png index 555f81bd2c6..715a36e8653 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-hover-linux.png index a674e0e4d8d..a9f0453965c 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-linux.png index 4a6b897bc9f..3354cf5216f 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-hover-linux.png index 74549aabf65..36b077683da 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-linux.png index 3e73a1e6df1..9133f2f3d37 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png index f1c6c0a79ba..0f8a26031e9 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-hover-linux.png index 74549aabf65..36b077683da 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-linux.png index 3e73a1e6df1..9133f2f3d37 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-focus-linux.png index 5a8e21133a5..60166fd379b 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-hover-linux.png index 0ae25820262..acc36eafb8a 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-linux.png index 1d1788f6cba..8479302ba98 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-focus-linux.png index 5a8e21133a5..60166fd379b 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-focus-linux.png index 7aa75de6c12..b93f67622f4 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-hover-linux.png index a8ca87dd717..9a505a17b6c 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-linux.png index 73a4ea23071..c6afcedb778 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-hover-linux.png index 0ae25820262..acc36eafb8a 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-linux.png index 1d1788f6cba..8479302ba98 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-focus-linux.png index 5a8e21133a5..60166fd379b 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-hover-linux.png index 0ae25820262..acc36eafb8a 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-linux.png index 1d1788f6cba..8479302ba98 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Default-light-tritanopia-linux.png differ diff --git a/packages/react/src/Link/Link.module.css b/packages/react/src/Link/Link.module.css index 51684908da0..feabbcce930 100644 --- a/packages/react/src/Link/Link.module.css +++ b/packages/react/src/Link/Link.module.css @@ -1,6 +1,7 @@ :where(.Link) { color: var(--fgColor-accent); text-decoration: none; + text-underline-offset: 0.05rem; /* Reset for button tags */ &:is(button) { diff --git a/packages/react/src/Link/Link.stories.tsx b/packages/react/src/Link/Link.stories.tsx index 45070383d5f..2aeb0223058 100644 --- a/packages/react/src/Link/Link.stories.tsx +++ b/packages/react/src/Link/Link.stories.tsx @@ -5,15 +5,18 @@ import type {ComponentProps} from '../utils/types' export default { title: 'Components/Link', component: Link, -} as Meta> +} as Meta & {text: string}> -export const Playground: StoryFn> = args => Link +export const Playground: StoryFn & {text: string}> = ({text, ...args}) => ( + {text} +) Playground.args = { + text: 'Link', href: '#', muted: false, underline: false, inline: false, } -export const Default = () => Link +export const Default = () => Links are great