Button deprecation

docs/content/drafts/Button2.mdx → docs/content/Button.mdx

@@ -1,14 +1,12 @@
 ---
-componentId: button_v2
-title: Button v2
+componentId: button
+title: Button
 status: Alpha
 source: https://github.com/primer/react/tree/main/src/Button2
 storybook: '/react/storybook?path=/story/composite-components-button2'
 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'
 
 ## Usage

docs/content/drafts/IconButton.mdx → docs/content/IconButton.mdx

@@ -6,9 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2'
 description: An accessible button component with no text and only icon.
 ---
 
-import {Props} from '../../src/props'
-import {ComponentChecklist} from '../../src/component-checklist'
-
 ## Usage
 
 ### Installation

docs/content/drafts/LinkButton.mdx → docs/content/LinkButton.mdx

@@ -6,10 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2'
 description: It is a combination of a button and link. Use this to make your link look like a button.
 ---
 
-import {Props} from '../../src/props'
-import {ComponentChecklist} from '../../src/component-checklist'
-import {ArrowRightIcon} from '@primer/octicons-react'
-
 ## Usage
 
 ### Installation

docs/content/Buttons.mdx → docs/content/deprecated/Buttons.mdx

@@ -1,11 +1,18 @@
 ---
 componentId: button
 title: Button
-status: Alpha
+status: deprecated
 source: https://github.com/primer/react/blob/main/src/Button
 storybook: '/react/storybook?path=/story/composite-components-button--default-button'
 ---
 
+## Deprecation
+
+Use [Button](/Button) instead.
+
+For more info on the changes, have a look at the migration guide.
+[Button migration guide](/migration-guide/Button)
+
 `Button` is used for actions, like in forms, while `Link` is used for destinations, or moving from one page to another.
 
 In special cases where you'd like to use a `<a>` styled like a Button, use `<Button as='a'>` and provide an `href`.

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -53,8 +53,8 @@
       url: /BranchName
     - title: Breadcrumbs
       url: /Breadcrumbs
-    - title: Buttons
-      url: /Buttons
+    - title: Button
+      url: /Button
     - title: Checkbox
       url: /Checkbox
     - title: CheckboxGroup
@@ -79,12 +79,16 @@
       url: /Header
     - title: Heading
       url: /Heading
+    - title: IconButton
+      url: /IconButton
     - title: Label
       url: /Label
     - title: LabelGroup
       url: /LabelGroup
     - title: Link
       url: /Link
+    - title: LinkButton
+      url: /LinkButton
     - title: Overlay
       url: /Overlay
     - title: Pagehead
@@ -141,12 +145,6 @@
       url: /UnderlineNav
 - title: Drafts
   children:
-    - title: Button v2
-      url: /drafts/Button2
-    - title: LinkButton
-      url: /drafts/LinkButton
-    - title: IconButton
-      url: /drafts/IconButton
 - title: Deprecated
   children:
     - title: ActionList
@@ -155,6 +153,8 @@
       url: /deprecated/ActionMenu
     - title: BorderBox
       url: /deprecated/BorderBox
+    - title: Buttons
+      url: /deprecated/Buttons
     - title: Dialog
       url: /deprecated/Dialog
     - title: Dropdown

src/ActionMenu.tsx

@@ -6,7 +6,7 @@ import {OverlayProps} from './Overlay'
 import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuInitialFocus, useTypeaheadFocus} from './hooks'
 import {Divider} from './ActionList/Divider'
 import {ActionListContainerContext} from './ActionList/ActionListContainerContext'
-import {Button, ButtonProps} from './Button2'
+import {Button, ButtonProps} from './Button'
 import {MandateProps} from './utils/types'
 
 type MenuContextProps = Pick<

src/Button/Button.tsx

@@ -1,39 +1,17 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps} from './ButtonBase'
+import React, {forwardRef} from 'react'
+import {ButtonProps} from './types'
+import {ButtonBase} from './ButtonBase'
 
-const Button = styled(ButtonBase)<ButtonBaseProps & SxProp>`
-  color: ${get('colors.btn.text')};
-  background-color: ${get('colors.btn.bg')};
-  border: 1px solid ${get('colors.btn.border')};
-  box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}};
-
-  &:hover {
-    background-color: ${get('colors.btn.hoverBg')};
-    border-color: ${get('colors.btn.hoverBorder')};
-  }
-
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.focusBorder')};
-    box-shadow: ${get('shadows.btn.focusShadow')};
-  }
-
-  &:active {
-    background-color: ${get('colors.btn.selectedBg')};
-    box-shadow: ${get('shadows.btn.shadowActive')};
-  }
-
-  &:disabled {
-    color: ${get('colors.primer.fg.disabled')};
-    background-color: ${get('colors.btn.bg')};
-    border-color: ${get('colors.btn.border')};
+const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({children, ...props}, forwardedRef): JSX.Element => {
+    return (
+      <ButtonBase ref={forwardedRef} {...props} as="button">
+        {children}
+      </ButtonBase>
+    )
   }
+)
 
-  ${sx};
-`
+ButtonComponent.displayName = 'Button'
 
-export type ButtonProps = ComponentProps<typeof Button>
-export default Button
+export {ButtonComponent}

src/Button/ButtonBase.tsx

@@ -1,39 +1,42 @@
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import {ComponentProps} from '../utils/types'
-import buttonBaseStyles from './ButtonStyles'
+import React, {ComponentPropsWithRef, forwardRef} 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, StyledButton} from './types'
+import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles'
 
-const variants = variant({
-  variants: {
-    small: {
-      p: '4px 12px',
-      fontSize: 0
-    },
-    medium: {
-      fontSize: 1
-    },
-    large: {
-      fontSize: 2,
-      p: '10px 20px'
+const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
+  ({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 (
+      <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>
+    )
   }
-})
+) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps>
 
-type StyledButtonBaseProps = {
-  as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
-  variant?: 'small' | 'medium' | 'large'
-}
+export type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>
 
-const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
-  onClick: disabled ? undefined : onClick
-}))<StyledButtonBaseProps>`
-  ${buttonBaseStyles}
-  ${variants}
-`
-
-ButtonBase.defaultProps = {
-  variant: 'medium'
-}
-
-export type ButtonBaseProps = ComponentProps<typeof ButtonBase>
-export default ButtonBase
+export {ButtonBase}

src/Button/index.ts

@@ -1,16 +1,10 @@
-export {default} from './Button'
-export type {ButtonProps} from './Button'
-export {default as ButtonDanger} from './ButtonDanger'
-export type {ButtonDangerProps} from './ButtonDanger'
-export {default as ButtonGroup} from './ButtonGroup'
-export type {ButtonGroupProps} from './ButtonGroup'
-export {default as ButtonOutline} from './ButtonOutline'
-export type {ButtonOutlineProps} from './ButtonOutline'
-export {default as ButtonPrimary} from './ButtonPrimary'
-export type {ButtonPrimaryProps} from './ButtonPrimary'
-export {default as ButtonInvisible} from './ButtonInvisible'
-export type {ButtonInvisibleProps} from './ButtonInvisible'
-export {default as ButtonTableList} from './ButtonTableList'
-export type {ButtonTableListProps} from './ButtonTableList'
-export {default as ButtonClose} from './ButtonClose'
-export type {ButtonCloseProps} from './ButtonClose'
+import {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 const Button = Object.assign(ButtonComponent, {
+  Counter
+})

src/Button/ButtonGroup.tsx → src/ButtonGroup.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
-import Box from '../Box'
-import {get} from '../constants'
-import sx from '../sx'
-import {ComponentProps} from '../utils/types'
+import Box from './Box'
+import {get} from './constants'
+import sx from './sx'
+import {ComponentProps} from './utils/types'
 
 const ButtonGroup = styled(Box)`
   vertical-align: middle;

src/Dialog.tsx

@@ -1,6 +1,6 @@
 import React, {forwardRef, useRef} from 'react'
 import styled from 'styled-components'
-import ButtonClose from './Button/ButtonClose'
+import ButtonClose from './deprecated/Button/ButtonClose'
 import {get} from './constants'
 import Box from './Box'
 import useDialog from './hooks/useDialog'

src/Dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
+import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button'
 import Box from '../Box'
 import {get} from '../constants'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'

src/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import Button, {ButtonProps} from './Button'
+import Button, {ButtonProps} from './deprecated/Button'
 import {get} from './constants'
 import Details, {DetailsProps} from './Details'
 import getDirectionStyles from './DropdownStyles'

src/__tests__/AnchoredOverlay.test.tsx

@@ -4,7 +4,8 @@ import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
-import {Button, SSRProvider} from '../index'
+import {SSRProvider} from '../index'
+import {Button} from '../deprecated'
 import theme from '../theme'
 import BaseStyles from '../BaseStyles'
 import {ThemeProvider} from '../ThemeProvider'