feat: Migrate button components to TypeScript

.changeset/warm-flowers-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Migrate button components to TypeScript

src/Button/Button.js → src/Button/Button.tsx

@@ -2,9 +2,10 @@ import styled from 'styled-components'
 import sx from '../sx'
 import {get} from '../constants'
 import theme from '../theme'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, systemStyles} from './ButtonBase'
+import {ComponentProps} from '../utils/types'
 
-const Button = styled(ButtonBase)`
+export const Button = styled(ButtonBase)<ButtonBaseProps>`
   color: ${get('buttons.default.color.default')};
   background-color: ${get('buttons.default.bg.default')};
   border: 1px solid ${get('buttons.default.border.default')};
@@ -42,9 +43,4 @@ Button.defaultProps = {
   theme
 }
 
-Button.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
-export default Button
+export type ButtonProps = ComponentProps<typeof Button>

src/Button/ButtonBase.js → src/Button/ButtonBase.tsx

@@ -1,10 +1,12 @@
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, LAYOUT} from '../constants'
+import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
 import theme from '../theme'
 import buttonBaseStyles from './ButtonStyles'
 import {compose, variant, fontSize} from 'styled-system'
-import systemPropTypes from '@styled-system/prop-types'
+import {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+export const systemStyles = compose(fontSize, COMMON, LAYOUT)
 
 const variants = variant({
   variants: {
@@ -22,30 +24,23 @@ const variants = variant({
   }
 })
 
-const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({
+type ButtonBaseInternalProps = {
+  variant: 'small' | 'medium' | 'large'
+} & SystemCommonProps &
+  SystemLayoutProps &
+  SxProp
+
+const ButtonBase = styled.button.attrs<ButtonBaseInternalProps>(({disabled, onClick}) => ({
   onClick: disabled ? undefined : onClick
-}))`
+}))<ButtonBaseInternalProps>`
   ${buttonBaseStyles}
   ${variants}
 `
 
-export const systemStyles = compose(fontSize, COMMON, LAYOUT)
-
 ButtonBase.defaultProps = {
   theme,
   variant: 'medium'
 }
 
-ButtonBase.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.elementType]),
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  fontSize: systemPropTypes.typography.fontSize,
-  onClick: PropTypes.func,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
-  ...COMMON.propTypes,
-  ...LAYOUT.propTypes
-}
-
+export type ButtonBaseProps = ComponentProps<typeof ButtonBase>
 export default ButtonBase

src/Button/ButtonClose.tsx

@@ -0,0 +1,40 @@
+import {COMMON, LAYOUT, get, SystemLayoutProps, SystemCommonProps} from '../constants'
+import defaultTheme from '../theme'
+import sx, {SxProp} from '../sx'
+import {XIcon} from '@primer/octicons-react'
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {ComponentProps} from '../utils/types'
+
+type StyledButtonInternalProps = SystemCommonProps & SystemLayoutProps & SxProp
+
+const StyledButton = styled.button<StyledButtonInternalProps>`
+  border: none;
+  padding: 0;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+
+  &:focus {
+    box-shadow: ${get('buttons.close.shadow.focus')};
+  }
+
+  &:active {
+    color: ${get('buttons.close.color.default')};
+  }
+  ${COMMON};
+  ${LAYOUT};
+  ${sx};
+`
+
+export type StyledButtonProps = ComponentProps<typeof StyledButton>
+
+export const ButtonClose = forwardRef<HTMLButtonElement, StyledButtonProps>(({theme = defaultTheme, ...props}, ref) => {
+  return (
+    <StyledButton ref={ref} aria-label="Close" {...{theme, ...props}}>
+      <XIcon />
+    </StyledButton>
+  )
+})
+
+export type ButtonCloseProps = ComponentProps<typeof ButtonClose>

src/Button/ButtonDanger.js → src/Button/ButtonDanger.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, systemStyles} from './ButtonBase'
 import {get} from '../constants'
 import theme from '../theme'
 import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonDanger = styled(ButtonBase)`
+export const ButtonDanger = styled(ButtonBase)<ButtonBaseProps>`
   color: ${get('buttons.danger.color.default')};
   border: 1px solid ${get('buttons.danger.border.default')};
   background-color: ${get('buttons.danger.bg.default')};
@@ -43,9 +44,4 @@ ButtonDanger.defaultProps = {
   theme
 }
 
-ButtonDanger.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
-export default ButtonDanger
+export type ButtonDangerProps = ComponentProps<typeof ButtonDanger>

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

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
 import {get} from '../constants'
-import Box from '../Box'
+import Box, {BoxProps} from '../Box'
 import theme from '../theme'
 import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonGroup = styled(Box)`
+export const ButtonGroup = styled(Box)<BoxProps>`
   vertical-align: middle;
 
   && > * {
@@ -52,9 +53,4 @@ ButtonGroup.defaultProps = {
   theme
 }
 
-ButtonGroup.propTypes = {
-  ...Box.propTypes,
-  ...sx.propTypes
-}
-
-export default ButtonGroup
+export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>

src/Button/ButtonInvisible.js → src/Button/ButtonInvisible.tsx

@@ -2,9 +2,10 @@ import styled from 'styled-components'
 import sx from '../sx'
 import {get} from '../constants'
 import theme from '../theme'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, systemStyles} from './ButtonBase'
+import {ComponentProps} from '../utils/types'
 
-const ButtonInvisible = styled(ButtonBase)`
+export const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps>`
   color: ${get('colors.blue.5')};
   background-color: transparent;
   border: 0;
@@ -23,9 +24,4 @@ ButtonInvisible.defaultProps = {
   theme
 }
 
-ButtonInvisible.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
-export default ButtonInvisible
+export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>

src/Button/ButtonOutline.js → src/Button/ButtonOutline.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, systemStyles} from './ButtonBase'
 import {get} from '../constants'
 import theme from '../theme'
 import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonOutline = styled(ButtonBase)`
+export const ButtonOutline = styled(ButtonBase)<ButtonBaseProps>`
   color: ${get('buttons.outline.color.default')};
   border: 1px solid ${get('buttons.outline.border.default')};
   background-color: ${get('buttons.outline.bg.default')};
@@ -43,9 +44,4 @@ ButtonOutline.defaultProps = {
   theme
 }
 
-ButtonOutline.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
-export default ButtonOutline
+export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>

src/Button/ButtonPrimary.js → src/Button/ButtonPrimary.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, systemStyles} from './ButtonBase'
 import {get} from '../constants'
 import theme from '../theme'
 import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonPrimary = styled(ButtonBase)`
+export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps>`
   color: ${get('buttons.primary.color.default')};
   background-color: ${get('buttons.primary.bg.default')};
   border: 1px solid ${get('buttons.primary.border.default')};
@@ -41,9 +42,4 @@ ButtonPrimary.defaultProps = {
   theme
 }
 
-ButtonPrimary.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
-export default ButtonPrimary
+export type ButtonPrimaryProps = ComponentProps<typeof ButtonPrimary>

src/Button/ButtonTableList.js → src/Button/ButtonTableList.tsx

@@ -1,10 +1,20 @@
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import {COMMON, LAYOUT, TYPOGRAPHY, get} from '../constants'
+import {
+  COMMON,
+  LAYOUT,
+  TYPOGRAPHY,
+  get,
+  SystemCommonProps,
+  SystemLayoutProps,
+  SystemTypographyProps
+} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonTableList = styled.summary`
+type ButtonTableListInternalProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
+
+export const ButtonTableList = styled.summary<ButtonTableListInternalProps>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
@@ -49,12 +59,4 @@ ButtonTableList.defaultProps = {
   theme
 }
 
-ButtonTableList.propTypes = {
-  theme: PropTypes.object,
-  ...sx.propTypes,
-  ...COMMON.propTypes,
-  ...TYPOGRAPHY.propTypes,
-  ...LAYOUT.propTypes
-}
-
-export default ButtonTableList
+export type ButtonTableListProps = ComponentProps<typeof ButtonTableList>

src/Button/index.ts

@@ -0,0 +1,9 @@
+export {Button as default} from './Button'
+export {Button} from './Button'
+export {ButtonDanger} from './ButtonDanger'
+export {ButtonGroup} from './ButtonGroup'
+export {ButtonOutline} from './ButtonOutline'
+export {ButtonPrimary} from './ButtonPrimary'
+export {ButtonInvisible} from './ButtonInvisible'
+export {ButtonTableList} from './ButtonTableList'
+export {ButtonClose} from './ButtonClose'