From 5fd47d4a0798df23d3ca1410bc83618c7f348379 Mon Sep 17 00:00:00 2001
From: hectahertz <hectahertz@gmail.com>
Date: Tue, 4 Feb 2025 18:07:48 +0100
Subject: [PATCH 1/4] Fix LinkButton and ButtonBase Typescript types

---
 packages/react/src/Button/ButtonBase.tsx |  3 ---
 packages/react/src/Button/LinkButton.tsx | 13 +++----------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index eb214607125..74c520b8195 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -1,4 +1,3 @@
-import type {ComponentPropsWithRef} from 'react'
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Box from '../Box'
@@ -320,6 +319,4 @@ const ButtonBase = forwardRef(
   },
 ) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps>
 
-export type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>
-
 export {ButtonBase}
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index c3872835c88..def2278e734 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -1,22 +1,15 @@
 import React, {forwardRef} from 'react'
-import type {LinkButtonProps} from './types'
-import type {ButtonBaseProps} from './ButtonBase'
+import type {LinkButtonProps, ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {defaultSxProp} from '../utils/defaultSxProp'
 
-type MyProps = LinkButtonProps & ButtonBaseProps
+type MyProps = LinkButtonProps & ButtonProps
 
 const LinkButton = forwardRef(
   ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
     return (
-      <ButtonBase
-        as={Component}
-        // @ts-expect-error ButtonBase wants both Anchor and Button refs
-        ref={forwardedRef}
-        sx={sx}
-        {...props}
-      >
+      <ButtonBase as={Component} ref={forwardedRef} sx={sx} {...props}>
         {children}
       </ButtonBase>
     )

From 6112620ecee852fe65df6e08c06c2e67cb6f4c46 Mon Sep 17 00:00:00 2001
From: hectahertz <hectahertz@gmail.com>
Date: Tue, 4 Feb 2025 18:08:00 +0100
Subject: [PATCH 2/4] Use LinkButton in LinkButton stories

---
 .../Button/LinkButton.features.stories.tsx    | 60 +++++++++----------
 .../react/src/Button/LinkButton.stories.tsx   | 18 ++----
 2 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/packages/react/src/Button/LinkButton.features.stories.tsx b/packages/react/src/Button/LinkButton.features.stories.tsx
index 97c2c69fcac..85a347a50b7 100644
--- a/packages/react/src/Button/LinkButton.features.stories.tsx
+++ b/packages/react/src/Button/LinkButton.features.stories.tsx
@@ -1,69 +1,69 @@
 import {EyeIcon, ChevronRightIcon, HeartIcon, DownloadIcon} from '@primer/octicons-react'
 import React, {forwardRef} from 'react'
-import {Button} from '.'
+import {LinkButton} from '.'
 
 export default {
   title: 'Components/LinkButton/Features',
 }
 
 export const Primary = () => (
-  <Button as="a" href="/" variant="primary">
+  <LinkButton href="#" variant="primary">
     Primary
-  </Button>
+  </LinkButton>
 )
 
 export const Danger = () => (
-  <Button as="a" href="/" variant="danger">
+  <LinkButton href="#" variant="danger">
     Danger
-  </Button>
+  </LinkButton>
 )
 
 export const Invisible = () => (
-  <Button as="a" href="/" variant="invisible">
+  <LinkButton href="#" variant="invisible">
     Invisible
-  </Button>
+  </LinkButton>
 )
 
 export const LeadingVisual = () => (
-  <Button as="a" href="/" leadingVisual={HeartIcon}>
+  <LinkButton href="#" leadingVisual={HeartIcon}>
     Leading visual
-  </Button>
+  </LinkButton>
 )
 
 export const TrailingVisual = () => (
-  <Button as="a" href="/" trailingVisual={EyeIcon}>
+  <LinkButton href="#" trailingVisual={EyeIcon}>
     Trailing visual
-  </Button>
+  </LinkButton>
 )
 
 export const TrailingAction = () => (
-  <Button as="a" href="/" trailingAction={ChevronRightIcon}>
+  <LinkButton href="#" trailingAction={ChevronRightIcon}>
     Trailing action
-  </Button>
+  </LinkButton>
 )
 
 export const Block = () => (
-  <Button as="a" href="/" block>
+  <LinkButton href="#" block>
     Default
-  </Button>
+  </LinkButton>
 )
 
 export const Small = () => (
-  <Button as="a" href="/" size="small">
+  <LinkButton href="#" size="small">
     Default
-  </Button>
+  </LinkButton>
 )
 
 export const Medium = () => (
-  <Button as="a" href="/" size="medium">
+  <LinkButton href="#" size="medium">
     Default
-  </Button>
+  </LinkButton>
 )
 
 export const Large = () => (
-  <Button as="a" href="/" size="large">
+  <LinkButton href="#" size="large">
     Default
-  </Button>
+  </LinkButton>
 )
 
 type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
@@ -78,27 +78,27 @@ const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkPro
 )
 
 export const WithReactRouter = () => (
-  <Button to="/dummy" as={ReactRouterLikeLink}>
+  <LinkButton to="/dummy" as={ReactRouterLikeLink}>
     Default
-  </Button>
+  </LinkButton>
 )
 
-export const Loading = () => <Button loading>Default</Button>
+export const Loading = () => <LinkButton loading>Default</LinkButton>
 
 export const LoadingCustomAnnouncement = () => (
-  <Button as="a" href="/" loading loadingAnnouncement="This is a custom loading announcement">
+  <LinkButton href="#" loading loadingAnnouncement="This is a custom loading announcement">
     Default
-  </Button>
+  </LinkButton>
 )
 
 export const LoadingWithLeadingVisual = () => (
-  <Button as="a" href="/" loading leadingVisual={DownloadIcon}>
+  <LinkButton href="#" loading leadingVisual={DownloadIcon}>
     Export
-  </Button>
+  </LinkButton>
 )
 
 export const LoadingWithTrailingVisual = () => (
-  <Button as="a" href="/" loading trailingVisual={DownloadIcon}>
+  <LinkButton href="#" loading trailingVisual={DownloadIcon}>
     Export
-  </Button>
+  </LinkButton>
 )
diff --git a/packages/react/src/Button/LinkButton.stories.tsx b/packages/react/src/Button/LinkButton.stories.tsx
index 0a4c6828a3d..e8cd8390b03 100644
--- a/packages/react/src/Button/LinkButton.stories.tsx
+++ b/packages/react/src/Button/LinkButton.stories.tsx
@@ -1,18 +1,14 @@
 import React from 'react'
 import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {Meta, StoryFn} from '@storybook/react'
-import {Button} from '.'
+import {LinkButton} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 
 export default {
   title: 'Components/LinkButton',
-} as Meta<typeof Button>
+} as Meta<typeof LinkButton>
 
-export const Playground: StoryFn = args => (
-  <Button as="a" {...args}>
-    Default
-  </Button>
-)
+export const Playground: StoryFn = args => <LinkButton {...args}>Default</LinkButton>
 Playground.argTypes = {
   size: {
     control: {
@@ -54,12 +50,8 @@ Playground.args = {
   alignContent: 'center',
   trailingIcon: null,
   leadingIcon: null,
-  href: '/',
+  href: '#',
   loading: false,
 }
 
-export const Default = () => (
-  <Button as="a" href="/">
-    Default
-  </Button>
-)
+export const Default = () => <LinkButton href="#">Default</LinkButton>

From dcf49714b27e8fbfb59c8a0e59f999e69e1e6a22 Mon Sep 17 00:00:00 2001
From: hectahertz <hectahertz@gmail.com>
Date: Tue, 4 Feb 2025 19:35:59 +0100
Subject: [PATCH 3/4] Add changeset

---
 .changeset/tidy-hounds-change.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tidy-hounds-change.md

diff --git a/.changeset/tidy-hounds-change.md b/.changeset/tidy-hounds-change.md
new file mode 100644
index 00000000000..66c310e5a84
--- /dev/null
+++ b/.changeset/tidy-hounds-change.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix LinkButton types and stories

From 43998bef766140201db3eb2210d6192728b13f98 Mon Sep 17 00:00:00 2001
From: hectahertz <hectahertz@gmail.com>
Date: Fri, 7 Feb 2025 19:38:28 +0100
Subject: [PATCH 4/4] Remove export

---
 packages/react/src/Button/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/Button/index.ts b/packages/react/src/Button/index.ts
index 7545aa6e576..d831b306ce5 100644
--- a/packages/react/src/Button/index.ts
+++ b/packages/react/src/Button/index.ts
@@ -1,7 +1,6 @@
 import {IconButton} from './IconButton'
 import {LinkButton} from './LinkButton'
-export type {ButtonProps, IconButtonProps} from './types'
+export type {ButtonProps, IconButtonProps, ButtonBaseProps} from './types'
 export {IconButton, LinkButton}
 export {ButtonComponent as Button} from './Button'
 export {ButtonBase} from './ButtonBase'
-export type {ButtonBaseProps} from './ButtonBase'