diff --git a/.changeset/remove-link-underline-on-hover.md b/.changeset/remove-link-underline-on-hover.md new file mode 100644 index 00000000000..f1713cc06f3 --- /dev/null +++ b/.changeset/remove-link-underline-on-hover.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Remove link underline effect on hover for both Link (inline) and Button with variant link (no visuals) diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png index dff3b9bbe41..93e38f44bf0 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png index 26755224d60..93ad84edba5 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png index 95a85814720..445adeeb615 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png index 86313b57196..771b0d031f1 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png index dff3b9bbe41..93e38f44bf0 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png index 5b53fbc4643..821d92535a5 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png index f8b34fba75b..260746eb4de 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png index 26755224d60..93ad84edba5 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png index dff3b9bbe41..93e38f44bf0 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png index 26755224d60..93ad84edba5 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png index 7068d5fab0d..225ba3d0296 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png index 7be9e079122..3a6d4482f12 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png index 7068d5fab0d..225ba3d0296 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png index 4e781e43e62..0884562bfbe 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png index fa5f8cbcf68..43ab5c0c595 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png index 7be9e079122..3a6d4482f12 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png index 7068d5fab0d..225ba3d0296 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png index 7be9e079122..3a6d4482f12 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png differ diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 73073718cd0..3321d79b7ce 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -583,6 +583,10 @@ [data-a11y-link-underlines='true'] &:where([data-variant='link']) { &[data-no-visuals] { text-decoration: underline; + + &:hover { + text-decoration: none; + } } &:not([data-no-visuals]) { diff --git a/packages/react/src/Link/Link.module.css b/packages/react/src/Link/Link.module.css index b2d78039ed1..721f70e8e79 100644 --- a/packages/react/src/Link/Link.module.css +++ b/packages/react/src/Link/Link.module.css @@ -25,6 +25,10 @@ */ [data-a11y-link-underlines='true'] &:where([data-inline='true']) { text-decoration: underline; + + &:hover { + text-decoration: none; + } } &:where([data-muted='true']) {