From 288465c6b775fdd915788ba101cad6ae34f16987 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 26 Jan 2021 16:03:47 -0800
Subject: [PATCH 1/3] =?UTF-8?q?ProgressBar.js=20=E2=86=92=20ProgressBar.ts?=
 =?UTF-8?q?x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{ProgressBar.js => ProgressBar.tsx}       | 31 +++++++++++++------
 .../{ProgressBar.js => ProgressBar.tsx}       |  0
 ...ogressBar.js.snap => ProgressBar.tsx.snap} |  0
 3 files changed, 21 insertions(+), 10 deletions(-)
 rename src/{ProgressBar.js => ProgressBar.tsx} (59%)
 rename src/__tests__/{ProgressBar.js => ProgressBar.tsx} (100%)
 rename src/__tests__/__snapshots__/{ProgressBar.js.snap => ProgressBar.tsx.snap} (100%)

diff --git a/src/ProgressBar.js b/src/ProgressBar.tsx
similarity index 59%
rename from src/ProgressBar.js
rename to src/ProgressBar.tsx
index 739659f4373..88ea811b55e 100644
--- a/src/ProgressBar.js
+++ b/src/ProgressBar.tsx
@@ -1,13 +1,15 @@
-import React from 'react'
+// @ts-ignore @styled-system/prop-types does not provide type definitions
+import systemPropTypes from '@styled-system/prop-types'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
-import {layout} from 'styled-system'
-import systemPropTypes from '@styled-system/prop-types'
+import {width, WidthProps} 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'
+import {ComponentProps} from './utils/types'
 
-const Bar = styled.span`
+const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
   ${COMMON}
 `
@@ -18,18 +20,27 @@ const sizeMap = {
   default: '8px'
 }
 
-const ProgressContainer = styled.span`
+const ProgressContainer = styled.span<
+  {
+    inline?: boolean
+    barSize?: keyof typeof sizeMap
+  } & WidthProps &
+    SystemCommonProps &
+    SxProp
+>`
   display: ${props => (props.inline ? 'inline-flex' : 'flex')};
   overflow: hidden;
   background-color: ${get('colors.gray.2')};
   border-radius: ${get('radii.1')};
-  height: ${props => sizeMap[props.barSize]};
+  height: ${props => sizeMap[props.barSize || 'default']};
   ${COMMON}
-  ${layout.width}
+  ${width}
   ${sx};
 `
 
-const ProgressBar = ({progress, bg, theme, ...rest}) => {
+export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
+
+function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
   return (
     <ProgressContainer theme={theme} {...rest}>
       <Bar progress={progress} bg={bg} theme={theme} />
diff --git a/src/__tests__/ProgressBar.js b/src/__tests__/ProgressBar.tsx
similarity index 100%
rename from src/__tests__/ProgressBar.js
rename to src/__tests__/ProgressBar.tsx
diff --git a/src/__tests__/__snapshots__/ProgressBar.js.snap b/src/__tests__/__snapshots__/ProgressBar.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/ProgressBar.js.snap
rename to src/__tests__/__snapshots__/ProgressBar.tsx.snap

From f9a7e78a0e512be90cc349483ed6fab2010e1765 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 26 Jan 2021 16:05:31 -0800
Subject: [PATCH 2/3] Add changeset

---
 .changeset/friendly-carrots-accept.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-carrots-accept.md

diff --git a/.changeset/friendly-carrots-accept.md b/.changeset/friendly-carrots-accept.md
new file mode 100644
index 00000000000..0748d3cbdee
--- /dev/null
+++ b/.changeset/friendly-carrots-accept.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `ProgressBar` to TypeScript

From 81bfc0c16d6facf2b7f219e032d42b387480099d Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 27 Jan 2021 15:36:19 -0800
Subject: [PATCH 3/3] Extract ProgressContainer props type

---
 src/ProgressBar.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
index 88ea811b55e..17912faeca3 100644
--- a/src/ProgressBar.tsx
+++ b/src/ProgressBar.tsx
@@ -20,14 +20,14 @@ const sizeMap = {
   default: '8px'
 }
 
-const ProgressContainer = styled.span<
-  {
-    inline?: boolean
-    barSize?: keyof typeof sizeMap
-  } & WidthProps &
-    SystemCommonProps &
-    SxProp
->`
+type StyledProgressContainerProps = {
+  inline?: boolean
+  barSize?: keyof typeof sizeMap
+} & WidthProps &
+  SystemCommonProps &
+  SxProp
+
+const ProgressContainer = styled.span<StyledProgressContainerProps>`
   display: ${props => (props.inline ? 'inline-flex' : 'flex')};
   overflow: hidden;
   background-color: ${get('colors.gray.2')};