Merge pull request #976 from primer/cb/ts-label

Migrate Label to TypeScript

.changeset/funny-kangaroos-worry.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Label` to TypeScript

.changeset/lovely-walls-cover.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `LabelGroup` to TypeScript

src/Label.js → src/Label.tsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import styled, {css} from 'styled-components'
-import {variant, borderColor} from 'styled-system'
+import {borderColor, BorderColorProps, variant} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
 import theme from './theme'
-import {COMMON, get} from './constants'
-import sx from './sx'
 
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
@@ -42,18 +42,29 @@ const sizeVariant = variant({
   }
 })
 
-const Label = styled('span')`
+const Label = styled.span<
+  {
+    variant?: 'small' | 'medium' | 'large' | 'xl'
+    dropshadow?: boolean
+    outline?: boolean
+  } & BorderColorProps &
+    SystemCommonProps &
+    SxProp
+>`
   display: inline-block;
   font-weight: ${get('fontWeights.semibold')};
   color: ${get('colors.white')};
   border-radius: ${get('radii.3')};
+
   &:hover {
     text-decoration: none;
   }
+
   ${sizeVariant}
-  ${COMMON} ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')};
-  ${props => (props.outline ? outlineStyles : '')}; // must be last to override other values
-  ${sx};
+  ${COMMON}
+  ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
+  ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
+  ${sx}
 `
 
 Label.defaultProps = {
@@ -71,4 +82,5 @@ Label.propTypes = {
   ...sx.propTypes
 }
 
+export type LabelProps = React.ComponentProps<typeof Label>
 export default Label

src/LabelGroup.js → src/LabelGroup.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
 import theme from './theme'
-import {COMMON, get} from './constants'
-import sx from './sx'
 
-const StyledLabelGroup = styled.span`
+const LabelGroup = styled.span<SystemCommonProps & SxProp>`
   ${COMMON}
   & * {
     margin-right: ${get('space.1')};
@@ -15,8 +14,6 @@ const StyledLabelGroup = styled.span`
   ${sx};
 `
 
-const LabelGroup = ({children, ...rest}) => <StyledLabelGroup {...rest}>{children}</StyledLabelGroup>
-
 LabelGroup.defaultProps = {
   theme
 }
@@ -26,4 +23,5 @@ LabelGroup.propTypes = {
   ...sx.propTypes
 }
 
+export type LabelGroupProps = React.ComponentProps<typeof LabelGroup>
 export default LabelGroup