diff --git a/.changeset/dull-wolves-judge.md b/.changeset/dull-wolves-judge.md new file mode 100644 index 00000000000..ec56d3a4c8b --- /dev/null +++ b/.changeset/dull-wolves-judge.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Removes unwanted box-shadow on buttons with 'inactive' prop passed. diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png new file mode 100644 index 00000000000..ce31f2d0098 Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png new file mode 100644 index 00000000000..300e7b8adad Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png new file mode 100644 index 00000000000..73b9479e6f1 Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png new file mode 100644 index 00000000000..ce31f2d0098 Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ce31f2d0098 Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png new file mode 100644 index 00000000000..a5841c1030c Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png new file mode 100644 index 00000000000..35eacb55533 Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png new file mode 100644 index 00000000000..a5841c1030c Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-linux.png differ diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png new file mode 100644 index 00000000000..a5841c1030c Binary files /dev/null and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Link-light-tritanopia-linux.png differ diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts index 6d713001558..b6da248ec1e 100644 --- a/e2e/components/LinkButton.test.ts +++ b/e2e/components/LinkButton.test.ts @@ -19,6 +19,10 @@ const stories = [ title: 'Invisible', id: 'components-linkbutton-features--invisible', }, + { + title: 'Link', + id: 'components-linkbutton-features--link', + }, { title: 'Large', id: 'components-linkbutton-features--large', diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index e0e070e14e0..d40f56bd1be 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -510,6 +510,7 @@ background-color: var(--button-inactive-bgColor); /* stylelint-disable-next-line primer/colors */ border-color: var(--button-inactive-bgColor); + box-shadow: none; & .Visual, & .CounterLabel { diff --git a/packages/react/src/Button/LinkButton.features.stories.tsx b/packages/react/src/Button/LinkButton.features.stories.tsx index b2b1cd9efb2..35382576d33 100644 --- a/packages/react/src/Button/LinkButton.features.stories.tsx +++ b/packages/react/src/Button/LinkButton.features.stories.tsx @@ -24,6 +24,12 @@ export const Invisible = () => ( ) +export const Link = () => ( + + Button that looks like a link + +) + export const LeadingVisual = () => ( Leading visual diff --git a/packages/react/src/Button/LinkButton.stories.tsx b/packages/react/src/Button/LinkButton.stories.tsx index 3624de343e4..f454ed63e8d 100644 --- a/packages/react/src/Button/LinkButton.stories.tsx +++ b/packages/react/src/Button/LinkButton.stories.tsx @@ -19,7 +19,7 @@ Playground.argTypes = { control: { type: 'radio', }, - options: ['default', 'primary', 'danger', 'invisible', 'outline'], + options: ['default', 'primary', 'danger', 'invisible', 'outline', 'link'], }, alignContent: { control: {