diff --git a/.changeset/little-buttons-accept.md b/.changeset/little-buttons-accept.md new file mode 100644 index 00000000000..e48277eb3a3 --- /dev/null +++ b/.changeset/little-buttons-accept.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update Link to respect underline={false} even if underline flag is enabled diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-focus-linux.png new file mode 100644 index 00000000000..c99c4dd86ee Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-hover-linux.png new file mode 100644 index 00000000000..a55ed886d51 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-linux.png new file mode 100644 index 00000000000..30307a77023 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-focus-linux.png new file mode 100644 index 00000000000..b8d528eba64 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-hover-linux.png new file mode 100644 index 00000000000..01fd7cc89e6 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-linux.png new file mode 100644 index 00000000000..2dc10d58465 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-focus-linux.png new file mode 100644 index 00000000000..f3c42dd96e4 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-focus-linux.png new file mode 100644 index 00000000000..10df4a06682 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-hover-linux.png new file mode 100644 index 00000000000..536374a808f Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-linux.png new file mode 100644 index 00000000000..eaf143952e9 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-hover-linux.png new file mode 100644 index 00000000000..48792bc8d57 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-linux.png new file mode 100644 index 00000000000..e7b64cd554e Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-focus-linux.png new file mode 100644 index 00000000000..c99c4dd86ee Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-hover-linux.png new file mode 100644 index 00000000000..a55ed886d51 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-linux.png new file mode 100644 index 00000000000..30307a77023 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-focus-linux.png new file mode 100644 index 00000000000..102f2d47a75 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-hover-linux.png new file mode 100644 index 00000000000..0ae25820262 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-linux.png new file mode 100644 index 00000000000..1d1788f6cba Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-focus-linux.png new file mode 100644 index 00000000000..102f2d47a75 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-forcedUnderlines-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-forcedUnderlines-linux.png new file mode 100644 index 00000000000..0ae25820262 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-forcedUnderlines-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-focus-linux.png new file mode 100644 index 00000000000..b19e63f298a Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-hover-linux.png new file mode 100644 index 00000000000..a8ca87dd717 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-linux.png new file mode 100644 index 00000000000..73a4ea23071 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-hover-linux.png new file mode 100644 index 00000000000..0ae25820262 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-linux.png new file mode 100644 index 00000000000..1d1788f6cba Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-focus-linux.png new file mode 100644 index 00000000000..102f2d47a75 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-hover-linux.png new file mode 100644 index 00000000000..0ae25820262 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-linux.png new file mode 100644 index 00000000000..1d1788f6cba Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-NoUnderline-light-tritanopia-linux.png differ diff --git a/e2e/components/Link.test.ts b/e2e/components/Link.test.ts index d556729b83f..773ba5abd62 100644 --- a/e2e/components/Link.test.ts +++ b/e2e/components/Link.test.ts @@ -170,4 +170,60 @@ test.describe('Link', () => { }) }) }) + + test.describe('No Underline', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-link-features--no-underline', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Link.NoUnderline.${theme}.png`) + + // Hover state + await page.getByRole('link').hover() + expect(await page.screenshot()).toMatchSnapshot(`Link.NoUnderline.${theme}.hover.png`) + + // Focus state + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`Link.NoUnderline.${theme}.focus.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-link-features--no-underline', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + + test.describe('with forced underlines', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-link-features--underline', + globals: { + colorScheme: 'light', + prefersLinkUnderlines: 'true', + }, + }) + + expect(await page.screenshot()).toMatchSnapshot('Link.NoUnderline.light.forcedUnderlines.png') + }) + }) + }) }) diff --git a/src/Link/Link.docs.json b/src/Link/Link.docs.json index 3563203ff67..1c44ebd094b 100644 --- a/src/Link/Link.docs.json +++ b/src/Link/Link.docs.json @@ -20,8 +20,8 @@ { "name": "underline", "type": "boolean", - "defaultValue": "false", - "description": "Adds underline to the Link" + "defaultValue": "undefined", + "description": "When `true`, adds underline to the Link. When `false`, an underline is only rendered on hover. When `undefined`, an underline is only rendered if the underline flag is enabled (a parent element will have this data attribute: `[data-a11y-link-underlines='true']`)." }, { "name": "hoverColor", diff --git a/src/Link/Link.features.stories.tsx b/src/Link/Link.features.stories.tsx index 22fe440c73b..84b7a8b87fa 100644 --- a/src/Link/Link.features.stories.tsx +++ b/src/Link/Link.features.stories.tsx @@ -19,3 +19,9 @@ export const Underline = () => ( Link ) + +export const NoUnderline = () => ( + + Link + +) diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index fc6f3a73643..b1890a8b936 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -22,11 +22,23 @@ const hoverColor = system({ const StyledLink = styled.a` color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))}; - text-decoration: ${props => (props.underline ? 'underline' : 'var(--prefers-link-underlines, underline)')}; + text-decoration: ${props => { + if (props.underline === undefined) { + return 'var(--prefers-link-underlines, underline)' + } + + if (props.underline) { + return 'underline' + } + + return 'none' + }}; + &:hover { text-decoration: ${props => (props.muted ? 'var(--prefers-link-underlines, underline)' : 'underline')}; ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')}; } + &:is(button) { display: inline-block; padding: 0; @@ -69,14 +81,7 @@ const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => { }, [innerRef]) } - return ( - - ) + return }) as PolymorphicForwardRefComponent<'a', StyledLinkProps> Link.displayName = 'Link'