Remove link button (#1880)

* Remove link button

* Fix up test

* Fix up tests

* Create rich-tools-cry.md

.changeset/rich-tools-cry.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove link button from the new button

docs/content/drafts/Button2.mdx

@@ -9,7 +9,7 @@ description: Use button for the main actions on a page or form.
 
 import {Props} from '../../src/props'
 import {ComponentChecklist} from '../../src/component-checklist'
-import {Button, IconButton, LinkButton} from '@primer/react/drafts'
+import {Button} from '@primer/react/drafts'
 
 ## Usage
 
@@ -85,29 +85,12 @@ It is recommended to use an octicon here.
 ### Icon only button
 
 A separate component called `IconButton` is used if the action shows only an icon with no text. This button will remain square in shape.
+Read more at [IconButton docs](/drafts/IconButton)
 
 ```jsx live drafts
 <IconButton icon={SearchIcon}>Search</IconButton>
 ```
 
-### Different sized icon buttons
-
-`IconButton` also supports the three different sizes. `small`, `medium`, `large`.
-
-```jsx live drafts
-<>
-  <IconButton icon={SearchIcon} size="small">
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon}>
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
-    Search
-  </IconButton>
-</>
-```
-
 ### Counter component
 
 A common use case for primer is a button with a counter component which shows the child count value.

src/Button2/Button.tsx

@@ -1,17 +1,43 @@
-import React, {forwardRef} from 'react'
-import {ButtonProps} from './types'
-import {ButtonBase} from './ButtonBase'
+import React, {ComponentPropsWithRef, forwardRef, ComponentType} from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import Box from '../Box'
+import {merge, SxProp} from '../sx'
+import {useTheme} from '../ThemeProvider'
+import {ButtonProps as ButtonComponentProps, StyledButton} from './types'
+import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles'
 
-const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({children, ...props}, forwardedRef): JSX.Element => {
+const Button = forwardRef<HTMLElement, ButtonComponentProps>(
+  ({children, as: Component = 'button', sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => {
+    const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium'} = props
+    const {theme} = useTheme()
+    const iconWrapStyles = {
+      display: 'inline-block'
+    }
+    const sxStyles = merge.all([
+      getButtonStyles(theme),
+      getSizeStyles(size, variant, false),
+      getVariantStyles(variant, theme),
+      sxProp as SxProp
+    ])
     return (
-      <ButtonBase ref={forwardedRef} {...props} as="button">
-        {children}
-      </ButtonBase>
+      <StyledButton as={Component} sx={sxStyles} {...props} ref={forwardedRef}>
+        {LeadingIcon && (
+          <Box as="span" data-component="leadingIcon" sx={iconWrapStyles}>
+            <LeadingIcon />
+          </Box>
+        )}
+        {children && <span data-component="text">{children}</span>}
+        {TrailingIcon && (
+          <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}}>
+            <TrailingIcon />
+          </Box>
+        )}
+      </StyledButton>
     )
   }
-)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+) as PolymorphicForwardRefComponent<string | ComponentType<any> | undefined, ButtonComponentProps>
 
-ButtonComponent.displayName = 'Button'
+export type ButtonProps = ComponentPropsWithRef<typeof Button>
 
-export {ButtonComponent}
+export {Button}

src/Button2/Button2.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useState, forwardRef} from 'react'
-import {Button, ButtonProps, IconButton, LinkButton} from '.'
+import {Button, ButtonProps, IconButton} from '.'
 import {BaseStyles, ThemeProvider} from '..'
 import {Meta} from '@storybook/react'
 import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon, TriangleRightIcon} from '@primer/octicons-react'
@@ -198,39 +198,39 @@ export const linkButton = ({...args}: ButtonProps) => {
   return (
     <>
       <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" {...args}>
+        <Button href="https://primer.style/" {...args} as="a">
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
       <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="danger" {...args}>
+        <Button href="https://primer.style/" variant="danger" {...args} as="a">
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
       <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="primary" {...args}>
+        <Button href="https://primer.style/" variant="primary" {...args} as="a">
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
       <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="outline" {...args}>
+        <Button href="https://primer.style/" variant="outline" {...args} as="a">
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
       <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="invisible" {...args}>
+        <Button href="https://primer.style/" variant="invisible" {...args} as="a">
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
       <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="primary" trailingIcon={TriangleRightIcon} {...args}>
+        <Button href="https://primer.style/" variant="primary" trailingIcon={TriangleRightIcon} {...args} as="a">
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
       <Box mb={2} display="flex">
-        <LinkButton to="/dummy" as={ReactRouterLikeLink} variant="primary" trailingIcon={TriangleRightIcon} {...args}>
+        <Button to="/dummy" variant="primary" trailingIcon={TriangleRightIcon} {...args} as={ReactRouterLikeLink}>
           Link to Primer
-        </LinkButton>
+        </Button>
       </Box>
     </>
   )

src/Button2/index.ts

@@ -1,10 +1,11 @@
-import {ButtonComponent} from './Button'
+import {Button as ButtonComponent} from './Button'
 import {Counter} from './ButtonCounter'
 import {IconButton} from './IconButton'
-import {LinkButton} from './LinkButton'
 export type {ButtonProps, IconButtonProps} from './types'
-export {IconButton, LinkButton}
+export {IconButton}
 
 export const Button = Object.assign(ButtonComponent, {
   Counter
 })
+
+Button.displayName = 'Button'

src/Button2/types.ts

@@ -1,4 +1,4 @@
-import React, {HTMLAttributes, ComponentPropsWithRef} from 'react'
+import React, {HTMLAttributes, ComponentPropsWithRef, ComponentType} from 'react'
 import styled from 'styled-components'
 import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
@@ -24,8 +24,10 @@ export type ButtonBaseProps = {
    * Items that are disabled can not be clicked, selected, or navigated through.
    */
   disabled?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: string | ComponentType<any> | undefined
 } & SxProp &
-  HTMLAttributes<HTMLButtonElement> &
+  HTMLAttributes<HTMLElement> &
   StyledButtonProps
 
 export type ButtonProps = {