updates Button 'link' variant to respect user's underline preference

Author: mperrotti

e2e/components/Button.test.ts

@@ -87,6 +87,10 @@ const stories = [
     title: 'Trailing Counter No Text',
     id: 'components-button-features--trailing-counter-with-no-text',
   },
+  {
+    title: 'Dev Link Variant With Underline Preference',
+    id: 'components-button-dev--link-variant-with-underline-preference',
+  },
 ] as const
 
 test.describe('Button', () => {

packages/react/.storybook/preview.jsx

@@ -286,12 +286,14 @@ export const decorators = [
 
     // Set data-a11y-link-underlines=true to enable underlines in all stories except the Link dev Inline Story.
     let wrapperProps =
-      context.id !== 'components-link-dev--inline'
+      context.id !== 'components-link-dev--inline' ||
+      context.id !== 'components-button-dev--link-variant-with-underline-preference'
         ? {
-            'data-a11y-link-underlines': context.id !== 'components-link-dev--inline',
+            'data-a11y-link-underlines': true,
             className: clsx('story-wrap'),
           }
         : {className: clsx('story-wrap')}
+    console.log('context.id', context.id)
     const showSurroundingElements =
       context.globals.showSurroundingElements ?? window.localStorage.getItem('showSurroundingElements') === 'true'
     return context.globals.colorScheme === 'all' ? (

packages/react/src/Button/Button.dev.stories.tsx

@@ -85,3 +85,32 @@ export const DisabledButtonVariants = () => {
     </Stack>
   )
 }
+
+export const LinkVariantWithUnderlinePreference = () => {
+  return (
+    <Stack gap="spacious">
+      <Stack gap="condensed" align="start" data-a11y-link-underlines="true">
+        <Button variant="link">Underline pref on</Button>
+        <Button
+          variant="link"
+          leadingVisual={SearchIcon}
+          trailingAction={TriangleDownIcon}
+          trailingVisual={HeartFillIcon}
+        >
+          Underline pref on
+        </Button>
+      </Stack>
+      <Stack gap="condensed" align="start" data-a11y-link-underlines="false">
+        <Button variant="link">Underline pref off</Button>
+        <Button
+          variant="link"
+          leadingVisual={SearchIcon}
+          trailingAction={TriangleDownIcon}
+          trailingVisual={HeartFillIcon}
+        >
+          Underline pref off
+        </Button>
+      </Stack>
+    </Stack>
+  )
+}

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

@@ -467,6 +467,7 @@
     color: var(--fgColor-link);
     text-align: left;
     border: unset;
+    border-radius: 0;
 
     &:hover:not(:disabled, [data-inactive]) {
       text-decoration: underline;
@@ -498,6 +499,34 @@
     }
   }
 
+  [data-a11y-link-underlines='true'] &:where([data-variant='link']) {
+    &:not(:has(.Visual)) {
+      text-decoration: underline;
+    }
+
+    &:has(.Visual) {
+      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;
+      }
+    }
+  }
+
+  [data-a11y-link-underlines='false'] &:where([data-variant='link']) {
+    &:not(:has(.Visual)) {
+      text-decoration: none;
+      background-image: none;
+    }
+
+    &:has(.Visual) {
+      background-image: none;
+    }
+  }
+
   /* Inactive */
 
   &:where([data-inactive]),