Add missing link variant to Button (#4814)

* add missing link variant

* Create beige-schools-kneel.md

* add tooltip story

* test(vrt): update snapshots

* fix link style

* reset

* test(vrt): update snapshots

* Update .changeset/beige-schools-kneel.md

Co-authored-by: Josh Black <joshblack@github.com>

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@github.com>

.changeset/beige-schools-kneel.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `link` variant to Button

e2e/components/Button.test.ts

@@ -173,6 +173,40 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Link', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--link',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--link',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Large', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

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

@@ -2,9 +2,8 @@ import {EyeIcon, TriangleDownIcon, HeartIcon, DownloadIcon, CommentIcon} from '@
 import React, {useState} from 'react'
 import {Button} from '.'
 import {Stack} from '../Stack/Stack'
-import Link from '../Link'
 import {announce} from '@primer/live-region-element'
-
+import {Tooltip} from '../TooltipV2/Tooltip'
 export default {
   title: 'Components/Button/Features',
 }
@@ -15,6 +14,8 @@ export const Danger = () => <Button variant="danger">Danger</Button>
 
 export const Invisible = () => <Button variant="invisible">Invisible</Button>
 
+export const Link = () => <Button variant="link">Button that looks like a link</Button>
+
 export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading visual</Button>
 
 export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
@@ -31,9 +32,12 @@ const AccessibilityNote = () => {
         </p>
         <p>
           Learn more about at{' '}
-          <Link href="https://github.com/github/accessibility/blob/8b300b36d8bca28fd5e3e70ffa077a6f8ee65c05/docs/wiki/screen-reader-testing/dynamically-updated-buttons-support-april-2024.md">
+          <a
+            style={{color: 'var(--fgColor-link)', textDecoration: 'underline'}}
+            href="https://github.com/github/accessibility/blob/8b300b36d8bca28fd5e3e70ffa077a6f8ee65c05/docs/wiki/screen-reader-testing/dynamically-updated-buttons-support-april-2024.md"
+          >
             Staff-only: Dynamically updated button labels
-          </Link>
+          </a>
           .
         </p>
       </>
@@ -200,3 +204,9 @@ export const LabelWrap = () => {
     </Stack>
   )
 }
+
+export const InactiveButtonWithTooltip = () => (
+  <Tooltip text="Action unavailable: an error occured while loading respository permissions" direction="n">
+    <Button inactive>Review changes</Button>
+  </Tooltip>
+)

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

@@ -35,7 +35,7 @@ Playground.argTypes = {
     control: {
       type: 'radio',
     },
-    options: ['default', 'primary', 'danger', 'invisible'],
+    options: ['default', 'primary', 'danger', 'invisible', 'link'],
   },
   alignContent: {
     control: {

packages/react/src/Button/IconButton.docs.json

@@ -15,7 +15,7 @@
     },
     {
       "name": "variant",
-      "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'",
+      "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible' | 'link'",
       "defaultValue": "",
       "description": "Changes the look and feel of the button which is different for each variant"
     },

packages/react/src/Button/styles.ts

@@ -198,6 +198,35 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.outline.selectedBorder})`,
       },
     },
+    link: {
+      color: 'var(--fgColor-link)',
+      display: 'inline-block',
+      fontSize: 'inherit',
+      border: 'none',
+      height: 'unset',
+      padding: '0',
+      minWidth: 'fit-content',
+      backgroundColor: 'transparent',
+
+      '&:hover:not([disabled]):not([data-inactive])': {
+        textDecoration: 'underline',
+      },
+
+      '&:focus-visible:not([disabled])': {
+        outlineOffset: '2px',
+      },
+
+      '&:disabled': {
+        color: 'primer.fg.disabled',
+        '[data-component=ButtonCounter], [data-component="leadingVisual"], [data-component="trailingAction"]': {
+          color: 'inherit',
+        },
+      },
+
+      '[data-component="text"]': {
+        whiteSpace: 'unset',
+      },
+    },
   }
 
   return style[variant]

packages/react/src/Button/types.ts

@@ -10,7 +10,7 @@ export const StyledButton = styled.button<SxProp>`
   ${sx};
 `
 
-export type VariantType = 'default' | 'primary' | 'invisible' | 'danger'
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'link'
 
 export type Size = 'small' | 'medium' | 'large'