chore(LinkButton): remove sx from LinkButton (#6866)

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

Author: francinelucca

.changeset/stale-avocados-enjoy.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+"@primer/styled-react": minor
+---
+
+chore(LinkButton): remove sx from LinkButton

eslint.config.mjs

@@ -42,7 +42,7 @@ const config = defineConfig([
     'contributor-docs/adrs/*',
     'examples/codesandbox/**/*',
     'packages/react/src/utils/polymorphic.ts',
-    'packages/styled-react/src/polymorphic.d.ts',
+    'packages/styled-react/src/polymorphic.ts',
     '**/storybook-static',
     '**/CHANGELOG.md',
     '**/node_modules/**/*',

packages/react/src/Button/LinkButton.tsx

@@ -1,19 +1,16 @@
 import {forwardRef} from 'react'
-import type {LinkButtonProps, ButtonProps} from './types'
+import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {defaultSxProp} from '../utils/defaultSxProp'
 
-type MyProps = LinkButtonProps & ButtonProps
+export type LinkButtonProps = Omit<BaseLinkButtonProps & ButtonProps, 'sx'>
 
-const LinkButton = forwardRef(
-  ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
-    return (
-      <ButtonBase as={Component} ref={forwardedRef} sx={sx} {...props}>
-        {children}
-      </ButtonBase>
-    )
-  },
-) as PolymorphicForwardRefComponent<'a', MyProps>
+const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => {
+  return (
+    <ButtonBase as={Component} ref={forwardedRef} {...props}>
+      {children}
+    </ButtonBase>
+  )
+}) as PolymorphicForwardRefComponent<'a', LinkButtonProps>
 
 export {LinkButton}

packages/react/src/Button/index.ts

@@ -1,6 +1,7 @@
 import {IconButton} from './IconButton'
 import {LinkButton} from './LinkButton'
 export type {ButtonProps, IconButtonProps, ButtonBaseProps} from './types'
+export type {LinkButtonProps} from './LinkButton'
 export {IconButton, LinkButton}
 export {ButtonComponent as Button} from './Button'
 export {ButtonBase} from './ButtonBase'

packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx

@@ -54,7 +54,7 @@ export const ButtonGroupSingleButton = () => (
 
 export const LinkButtonWithIconButtons = () => (
   <ButtonGroup>
-    <LinkButton size="small" sx={{color: 'deeppink'}} href="https://primer.style">
+    <LinkButton size="small" style={{color: 'deeppink'}} href="https://primer.style">
       Small link
     </LinkButton>
     <Button className="testCustomClassnameColor">Pink link</Button>

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -90,6 +90,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type LabelProps",
   "Link",
   "LinkButton",
+  "type LinkButtonProps",
   "type LinkProps",
   "merge",
   "NavList",

packages/styled-react/src/components/LinkButton.tsx

@@ -0,0 +1,19 @@
+import {
+  LinkButton as PrimerLinkButton,
+  type LinkButtonProps as PrimerLinkButtonProps,
+  sx,
+  type SxProp,
+} from '@primer/react'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+
+type LinkButtonProps = PrimerLinkButtonProps & SxProp
+
+const LinkButton: ForwardRefComponent<'a', LinkButtonProps> = styled(PrimerLinkButton).withConfig({
+  shouldForwardProp: prop => (prop as keyof LinkButtonProps) !== 'sx',
+})<LinkButtonProps>`
+  ${sx}
+`
+
+export {LinkButton}
+export type {LinkButtonProps}

packages/styled-react/src/index.tsx

@@ -30,6 +30,7 @@ import type {
   SpaceProps,
   TypographyProps,
 } from 'styled-system'
+import {LinkButton, type LinkButtonProps} from './components/LinkButton'
 
 type StyledProps = SxProp &
   SpaceProps &
@@ -98,7 +99,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {Checkbox, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+export {LinkButton, type LinkButtonProps, Checkbox, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
@@ -119,7 +120,6 @@ export {
   IconButton,
   Label,
   Link,
-  LinkButton,
   NavList,
   Overlay,
   PageHeader,