Fix LinkButton types (#5655)

* Fix LinkButton and ButtonBase Typescript types

* Use LinkButton in LinkButton stories

* Add changeset

* Remove export

.changeset/tidy-hounds-change.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix LinkButton types and stories

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}

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>
 )

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>

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>
     )

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'