From 64c04fc8a933453f37f9a9b27331d8ff7c76d562 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:10:52 -0700 Subject: [PATCH 1/8] add missing link variant --- e2e/components/Button.test.ts | 34 +++++++++++++++++++ .../src/Button/Button.features.stories.tsx | 7 ++-- packages/react/src/Button/Button.stories.tsx | 2 +- .../react/src/Button/IconButton.docs.json | 2 +- packages/react/src/Button/styles.ts | 29 ++++++++++++++++ packages/react/src/Button/types.ts | 2 +- 6 files changed, 70 insertions(+), 6 deletions(-) diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index 822a95aa46b..08ca9123eb5 100644 --- 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 index 842bb2eed3a..06127d2bc0b 100644 --- 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 = () => export const Invisible = () => +export const Link = () => + export const LeadingVisual = () => export const TrailingVisual = () => @@ -31,9 +32,9 @@ const AccessibilityNote = () => {
Learn more about at{' '} - + Staff-only: Dynamically updated button labels - + .
> diff --git a/packages/react/src/Button/Button.stories.tsx b/packages/react/src/Button/Button.stories.tsx index 017aa3de456..ce55f4fcbdb 100644 --- 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 index d460a90835a..6d606228e6d 100644 --- 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 index 58523391638..af953feb964 100644 --- 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 index 2fff7ebbb00..0d5dfb08e43 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -10,7 +10,7 @@ export const StyledButton = styled.button-V@CHV%Is50L#5525UI?^gUR6Y8MvcxH|*pxuy=}uA8-M?OP>dT
z@6Z1VZry3^cQ3)AfByG>bl}2wKP+0 -V@CHV%Is50L#5525UI?^gUR6Y8MvcxH|*pxuy=}uA8-M?OP>dT
z@6Z1VZry3^cQ3)AfByG>bl}2wKP+0 -V@CHV%Is50L#5525UI?^gUR6Y8MvcxH|*pxuy=}uA8-M?OP>dT
z@6Z1VZry3^cQ3)AfByG>bl}2wKP+0 R*Biq^YGfkZb4kp}^G6KD#s}vD1KE
zU{dgtt?iqFvMH-WJYHODS#iDf#iB~pCC!^8jc0wO9;MT@7<5{>oKC||wi|B$4J%tT
zujKRX{VrwsVh81ZD0xo8ZN1bCG<_gpUyC2^r*K}I)pew%OVpmPmkO+DqJ1KjRl+d7
z_efh?yE^#3mwG`P<=O{H@!F6OT