add missing link variant

primer · Aug 5, 2024 · 64c04fc · 64c04fc
1 parent 2ab2b3c
commit 64c04fc
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 6 deletions.
diff --git a/e2e/components/Button.test.ts b/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, () => {

diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
@@ -2,7 +2,6 @@ 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'
 
 export default {
@@ -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,9 @@ 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 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>
       </>

diff --git a/packages/react/src/Button/Button.stories.tsx b/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: {

diff --git a/packages/react/src/Button/IconButton.docs.json b/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"
     },

diff --git a/packages/react/src/Button/styles.ts b/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]

diff --git a/packages/react/src/Button/types.ts b/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'