Button: Limit link underline to the label

.changeset/button-label-underline.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Button and LinkButton: Limit link variant underlines to the text label when visuals are present

e2e/components/Button.test.ts

@@ -110,6 +110,60 @@ const stories = [
 ] as const
 
 test.describe('Button', () => {
+  test('link variant underlines only the label', async ({page}) => {
+    await visit(page, {
+      id: 'components-button-dev--link-variant-with-underline-preference',
+    })
+
+    const buttonWithVisual = (preference: 'on' | 'off') =>
+      page
+        .getByRole('button', {name: `Underline pref ${preference}`})
+        .filter({has: page.locator('[data-component="leadingVisual"]')})
+
+    const preferenceOnButton = buttonWithVisual('on')
+    const preferenceOnLabel = preferenceOnButton.locator('[data-component="text"]')
+
+    await expect(preferenceOnButton).toHaveCSS('text-decoration-line', 'none')
+    await expect(preferenceOnButton).toHaveCSS('background-image', 'none')
+    await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'underline')
+    await expect(preferenceOnLabel).toHaveCSS('text-underline-offset', '2px')
+
+    await preferenceOnButton.hover()
+    await expect(preferenceOnButton).toHaveCSS('text-decoration-line', 'none')
+    await expect(preferenceOnButton).toHaveCSS('background-image', 'none')
+    await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'none')
+
+    await preferenceOnButton.evaluate(element => element.setAttribute('aria-disabled', 'true'))
+    await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'underline')
+
+    await preferenceOnButton.evaluate(element => {
+      element.removeAttribute('aria-disabled')
+      element.setAttribute('data-inactive', 'true')
+    })
+    await expect(preferenceOnLabel).toHaveCSS('text-decoration-line', 'underline')
+
+    const preferenceOffButton = buttonWithVisual('off')
+    const preferenceOffLabel = preferenceOffButton.locator('[data-component="text"]')
+
+    await expect(preferenceOffButton).toHaveCSS('text-decoration-line', 'none')
+    await expect(preferenceOffButton).toHaveCSS('background-image', 'none')
+    await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'none')
+
+    await preferenceOffButton.hover()
+    await expect(preferenceOffButton).toHaveCSS('text-decoration-line', 'none')
+    await expect(preferenceOffButton).toHaveCSS('background-image', 'none')
+    await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'underline')
+
+    await preferenceOffButton.evaluate(element => element.setAttribute('aria-disabled', 'true'))
+    await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'none')
+
+    await preferenceOffButton.evaluate(element => {
+      element.removeAttribute('aria-disabled')
+      element.setAttribute('data-inactive', 'true')
+    })
+    await expect(preferenceOffLabel).toHaveCSS('text-decoration-line', 'none')
+  })
+
   for (const story of stories) {
     test.describe(story.title, () => {
       for (const theme of themes) {

packages/react/src/Button/ButtonBase.module.css

@@ -590,7 +590,7 @@
     border: unset;
     border-radius: 0;
 
-    &:hover:not(:disabled, [data-inactive]) {
+    &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {
       text-decoration: underline;
     }
 
@@ -607,6 +607,7 @@
     }
 
     & .Label {
+      text-underline-offset: 0.125rem;
       white-space: unset;
     }
 
@@ -621,34 +622,22 @@
   }
 
   [data-a11y-link-underlines='true'] &:where([data-variant='link']) {
-    &[data-no-visuals] {
+    & .Label {
       text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
     }
 
-    &:not([data-no-visuals]) {
-      background-image: linear-gradient(to right, currentColor, currentColor);
-      background-size: 100% 1.5px;
-      background-position: 0 calc(100% - 2px);
-      background-repeat: no-repeat;
-
-      &:hover {
-        text-decoration: none;
-      }
+    &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {
+      text-decoration: none;
     }
   }
 
   [data-a11y-link-underlines='false'] &:where([data-variant='link']) {
-    &[data-no-visuals] {
+    & .Label {
       text-decoration: none;
-      background-image: none;
     }
 
-    &:not([data-no-visuals]) {
-      background-image: none;
+    &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {
+      text-decoration: underline;
     }
   }