From 3bd0a9df7bcf9f8e3643d9e8d4b20a4f0194cc33 Mon Sep 17 00:00:00 2001
From: Reza Rahman <rezrah@github.com>
Date: Fri, 7 Jan 2022 14:22:01 +0000
Subject: [PATCH 1/2] fix: restore color prop for StyledOcticon

---
 docs/content/StyledOcticon.md  | 28 ------------
 docs/content/StyledOcticon.mdx | 78 ++++++++++++++++++++++++++++++++++
 src/StyledOcticon.tsx          |  4 +-
 3 files changed, 80 insertions(+), 30 deletions(-)
 delete mode 100644 docs/content/StyledOcticon.md
 create mode 100644 docs/content/StyledOcticon.mdx

diff --git a/docs/content/StyledOcticon.md b/docs/content/StyledOcticon.md
deleted file mode 100644
index a45925f4e20..00000000000
--- a/docs/content/StyledOcticon.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-componentId: styled_octicon
-title: StyledOcticon
-status: Alpha
----
-
-StyledOcticon renders an [Octicon](https://octicons.github.com) with common system props, including `color`, margin, and padding.
-
-## Default example
-
-```jsx live
-<>
-  <StyledOcticon icon={CheckIcon} size={32} color="success.fg" mr={2} />
-  <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
-</>
-```
-
-## Component props
-
-StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
-
-| Name          | Type              |    Default    | Description                                                                                                  |
-| :------------ | :---------------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
-| ariaLabel     | String            |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
-| icon          | Component         |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
-| size          | Number            |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
-| verticalAlign | String            | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |
-| sx            | SystemStyleObject |      {}       | Style to be applied to the component                                                                         |
diff --git a/docs/content/StyledOcticon.mdx b/docs/content/StyledOcticon.mdx
new file mode 100644
index 00000000000..36b53b56219
--- /dev/null
+++ b/docs/content/StyledOcticon.mdx
@@ -0,0 +1,78 @@
+---
+description: Use StyledOcticon to render an Octicon as a component.
+title: StyledOcticon
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/StyledOcticon.tsx
+componentId: styled_octicon
+---
+
+## Example
+
+```jsx live
+<>
+  <StyledOcticon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
+  <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
+</>
+```
+
+## Props
+
+<PropsTable>
+  <PropsTableRow
+    name="ariaLabel"
+    type="string"
+    description="Specifies the aria-label attribute, which is read verbatim by screen readers "
+  />
+  <PropsTableRow
+    name="icon"
+    type="Component"
+    description={
+      <>
+        Checks the input by default in uncontrolled modeName of the <Link href="https://primer.style/octicons/">Octicon component</Link> used in the 
+      </>
+    }
+  />
+  <PropsTableRow
+    name="color"
+    type="string"
+    description={
+      <>
+        Sets an override color for the Octicon. Compatible with colors from the <Link href="https://primer.style/primitives/colors">Primer color system</Link>." 
+      </>  
+    }
+  />
+  <PropsTableRow
+    name="size"
+    defaultValue="16"
+    type="number"
+    description="Sets the uniform `width` and `height` of the SVG element"    
+  />
+  <PropsTableRow 
+    name="verticalAlign"
+    defaultValue="text-bottom"
+    type="string"
+    description="Sets the `vertical-align` CSS property"
+  />
+  <PropsTableSxRow />
+
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: true,
+    usageExamplesDocumented: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>
diff --git a/src/StyledOcticon.tsx b/src/StyledOcticon.tsx
index ecc7f5c6079..f508ec26e71 100644
--- a/src/StyledOcticon.tsx
+++ b/src/StyledOcticon.tsx
@@ -4,14 +4,14 @@ import styled from 'styled-components'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-type OcticonProps = {icon: React.ElementType} & IconProps
+type OcticonProps = {icon: React.ElementType; color?: string} & IconProps
 
 function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
   return <IconComponent {...rest} />
 }
 
 const StyledOcticon = styled(Octicon)<SxProp>`
-  ${sx}
+  ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
 `
 
 StyledOcticon.defaultProps = {

From d40abc7d780f5b1fedf73364713c687ff1568dca Mon Sep 17 00:00:00 2001
From: Reza Rahman <rezrah@github.com>
Date: Fri, 7 Jan 2022 14:26:56 +0000
Subject: [PATCH 2/2] chore: update changelog

---
 .changeset/gold-fireants-switch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-fireants-switch.md

diff --git a/.changeset/gold-fireants-switch.md b/.changeset/gold-fireants-switch.md
new file mode 100644
index 00000000000..5381a5389aa
--- /dev/null
+++ b/.changeset/gold-fireants-switch.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+restores color prop functionality to StyledOcticon