From 5b628ab46db0753bd4458088b0e267511419574a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 27 Jan 2021 14:05:45 -0800
Subject: [PATCH 1/3] =?UTF-8?q?StyledOcticon.js=20=E2=86=92=20StyledOctico?=
 =?UTF-8?q?n.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{StyledOcticon.js => StyledOcticon.tsx}       | 15 ++++++++++-----
 .../{StyledOcticon.js => StyledOcticon.tsx}       |  4 ----
 ...yledOcticon.js.snap => StyledOcticon.tsx.snap} |  0
 3 files changed, 10 insertions(+), 9 deletions(-)
 rename src/{StyledOcticon.js => StyledOcticon.tsx} (53%)
 rename src/__tests__/{StyledOcticon.js => StyledOcticon.tsx} (88%)
 rename src/__tests__/__snapshots__/{StyledOcticon.js.snap => StyledOcticon.tsx.snap} (100%)

diff --git a/src/StyledOcticon.js b/src/StyledOcticon.tsx
similarity index 53%
rename from src/StyledOcticon.js
rename to src/StyledOcticon.tsx
index 3138ddf69a7..21182c43072 100644
--- a/src/StyledOcticon.js
+++ b/src/StyledOcticon.tsx
@@ -1,15 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON} from './constants'
+import {COMMON, SystemCommonProps} from './constants'
 import theme from './theme'
-import sx from './sx'
+import sx, {SxProp} from './sx'
+import {IconProps} from '@primer/octicons-react'
+import {ComponentProps} from './utils/types'
 
-function IconWrapper({icon: IconComponent, className, ...rest}) {
-  return <IconComponent className={className} {...rest} />
+type OcticonProps = {icon: React.ElementType} & IconProps
+
+function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
+  return <IconComponent {...rest} />
 }
 
-const StyledOcticon = styled(IconWrapper)`
+const StyledOcticon = styled(Octicon)<SystemCommonProps & SxProp>`
   ${COMMON}
   ${sx}
 `
@@ -28,4 +32,5 @@ StyledOcticon.propTypes = {
   verticalAlign: PropTypes.oneOf(['middle', 'text-bottom', 'text-top', 'top'])
 }
 
+export type StyledOcticonProps = ComponentProps<typeof StyledOcticon>
 export default StyledOcticon
diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.tsx
similarity index 88%
rename from src/__tests__/StyledOcticon.js
rename to src/__tests__/StyledOcticon.tsx
index a29c4ffbdf9..fe63816ca21 100644
--- a/src/__tests__/StyledOcticon.js
+++ b/src/__tests__/StyledOcticon.tsx
@@ -15,10 +15,6 @@ describe('StyledOcticon', () => {
     default: StyledOcticon
   })
 
-  it('implements system props', () => {
-    expect(StyledOcticon).toImplementSystemProps(COMMON)
-  })
-
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<StyledOcticon icon={XIcon} />)
     const results = await axe(container)
diff --git a/src/__tests__/__snapshots__/StyledOcticon.js.snap b/src/__tests__/__snapshots__/StyledOcticon.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/StyledOcticon.js.snap
rename to src/__tests__/__snapshots__/StyledOcticon.tsx.snap

From d4369f0dc16addf677b5b2fb636c480aa69e16d4 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 29 Jan 2021 15:47:29 -0800
Subject: [PATCH 2/3] Update propTypes

---
 src/StyledOcticon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/StyledOcticon.tsx b/src/StyledOcticon.tsx
index 21182c43072..36a4a2bd518 100644
--- a/src/StyledOcticon.tsx
+++ b/src/StyledOcticon.tsx
@@ -26,8 +26,8 @@ StyledOcticon.defaultProps = {
 StyledOcticon.propTypes = {
   ...COMMON.propTypes,
   ...sx.propTypes,
-  icon: PropTypes.elementType.isRequired,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['small', 'medium', 'large'])]),
+  icon: PropTypes.any.isRequired,
+  size: PropTypes.any,
   theme: PropTypes.object,
   verticalAlign: PropTypes.oneOf(['middle', 'text-bottom', 'text-top', 'top'])
 }

From d848b9e054a0f96648ddd02b13ac9c19f56ecb42 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 29 Jan 2021 15:48:51 -0800
Subject: [PATCH 3/3] Add changeset

---
 .changeset/funny-pots-explain.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/funny-pots-explain.md

diff --git a/.changeset/funny-pots-explain.md b/.changeset/funny-pots-explain.md
new file mode 100644
index 00000000000..4791170c256
--- /dev/null
+++ b/.changeset/funny-pots-explain.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `StyledOcticon` to TypeScript