fix(Link): update underline={false} to disable underline

.changeset/little-buttons-accept.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update Link to respect underline={false} even if underline flag is enabled

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')
+      })
+    })
+  })
 })

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",

src/Link/Link.features.stories.tsx

@@ -19,3 +19,9 @@ export const Underline = () => (
     Link
   </Link>
 )
+
+export const NoUnderline = () => (
+  <Link href="#" underline={false}>
+    Link
+  </Link>
+)

src/Link/Link.tsx

@@ -22,11 +22,23 @@ const hoverColor = system({
 
 const StyledLink = styled.a<StyledLinkProps>`
   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 (
-    <StyledLink
-      as={Component}
-      {...props}
-      // @ts-ignore shh
-      ref={innerRef}
-    />
-  )
+  return <StyledLink as={Component} {...props} ref={innerRef} />
 }) as PolymorphicForwardRefComponent<'a', StyledLinkProps>
 
 Link.displayName = 'Link'