Rename component StyledOcticon to Octicon

.changeset/swift-cows-rest.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Rename component StyledOcticon to Octicon

codemods/__tests__/removeSystemProps.js

@@ -29,28 +29,28 @@ defineInlineTest(
   removeSystemProps,
   {},
   `
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, Octicon} from '@primer/components'
 import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
 
 const ClipboardCopy = ({value}) => <Button px={2}>
   {copied ? (
-    <StyledOcticon icon={CheckIcon} color="green.5" />
+    <Octicon icon={CheckIcon} color="green.5" />
   ) : (
-    <StyledOcticon icon={ClippyIcon} color="gray.5" />
+    <Octicon icon={ClippyIcon} color="gray.5" />
   )}
 </Button>
 
 `.trim(),
   `
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, Octicon} from '@primer/components'
 import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
 
 const ClipboardCopy = ({value}) => (
   <Button sx={{px: 2}}>
     {copied ? (
-      <StyledOcticon icon={CheckIcon} sx={{color: 'green.5'}} />
+      <Octicon icon={CheckIcon} sx={{color: 'green.5'}} />
     ) : (
-      <StyledOcticon icon={ClippyIcon} sx={{color: 'gray.5'}} />
+      <Octicon icon={ClippyIcon} sx={{color: 'gray.5'}} />
     )}
   </Button>
 )`.trim(),

codemods/removeSystemProps.js

@@ -171,7 +171,7 @@ const stylePropsMap = {
   SideNav: [...COMMON],
   Spinner: [...COMMON],
   StateLabel: [...COMMON],
-  StyledOcticon: [...COMMON],
+  Octicon: [...COMMON],
   SubNav: [...COMMON, ...FLEX],
   TabNav: [...COMMON],
   TabNavLink: [...COMMON, ...TYPOGRAPHY],

docs/content/Flash.mdx

@@ -32,7 +32,7 @@ Flash components with icons inside of them will automatically set the correct co
 
 ```jsx live
 <Flash variant="success">
-  <StyledOcticon icon={CheckIcon} />
+  <Octicon icon={CheckIcon} />
   Success!
 </Flash>
 ```

docs/content/Header.mdx

@@ -18,7 +18,7 @@ All items directly under the Header component should be a `Header.Item` componen
 <Header>
   <Header.Item>
     <Header.Link href="#" fontSize={2}>
-      <StyledOcticon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+      <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
       <span>GitHub</span>
     </Header.Link>
   </Header.Item>

docs/content/StyledOcticon.mdx → docs/content/Octicon.mdx

@@ -1,19 +1,19 @@
 ---
-description: Use StyledOcticon to render an Octicon as a component.
-title: StyledOcticon
+description: Use Octicon to render an Octicon as a component.
+title: Octicon
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/StyledOcticon/StyledOcticon.tsx
-componentId: styled_octicon
+source: https://github.com/primer/react/blob/main/src/Octicon/Octicon.tsx
+componentId: octicon
 ---
 
-import data from '../../src/StyledOcticon/StyledOcticon.docs.json'
+import data from '../../src/Octicon/Octicon.docs.json'
 
 ## Example
 
 ```jsx live
 <>
-  <StyledOcticon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
-  <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
+  <Octicon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
+  <Octicon icon={XIcon} size={32} color="danger.fg" />
 </>
 ```
 

docs/content/Timeline.mdx

@@ -16,7 +16,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge>
-      <StyledOcticon icon={FlameIcon} />
+      <Octicon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>
       <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
@@ -41,7 +41,7 @@ The default Timeline.Badge color is dark text on a light grey background.
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge>
-      <StyledOcticon icon={FlameIcon} />
+      <Octicon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>Default badge color</Timeline.Body>
   </Timeline.Item>
@@ -51,25 +51,25 @@ The default Timeline.Badge color is dark text on a light grey background.
 ### Adding color to a Badge
 
 To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop
-of the child `StyledOcticon` if necessary.
+of the child `Octicon` if necessary.
 
 ```jsx live
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
+      <Octicon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
+      <Octicon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
+      <Octicon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
   </Timeline.Item>
@@ -84,13 +84,13 @@ Timeline has a condensed prop that will reduce the vertical padding and remove t
 <Timeline>
   <Timeline.Item condensed>
     <Timeline.Badge>
-      <StyledOcticon icon={GitCommitIcon} />
+      <Octicon icon={GitCommitIcon} />
     </Timeline.Badge>
     <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item condensed>
     <Timeline.Badge>
-      <StyledOcticon icon={GitCommitIcon} />
+      <Octicon icon={GitCommitIcon} />
     </Timeline.Badge>
     <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
   </Timeline.Item>
@@ -105,14 +105,14 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
+      <Octicon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Break />
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'success.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
+      <Octicon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>

docs/content/TreeView.mdx

@@ -34,7 +34,7 @@ import {TreeView} from '@primer/react'
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual>
-              <StyledOcticon icon={DiffAddedIcon} color="success.fg" aria-label="added" />
+              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="added" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
@@ -43,7 +43,7 @@ import {TreeView} from '@primer/react'
             </TreeView.LeadingVisual>
             Button.tsx
             <TreeView.TrailingVisual>
-              <StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
+              <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -54,7 +54,7 @@ import {TreeView} from '@primer/react'
         </TreeView.LeadingVisual>
         package.json
         <TreeView.TrailingVisual>
-          <StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
+          <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
         </TreeView.TrailingVisual>
       </TreeView.Item>
     </TreeView>

docs/content/deprecated/SideNav.md

@@ -69,12 +69,12 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros
     <Text>With an avatar</Text>
   </SideNav.Link>
   <SideNav.Link href="#url">
-    <StyledOcticon sx={{mr: 2}} size={16} icon={ZapIcon} />
+    <Octicon sx={{mr: 2}} size={16} icon={ZapIcon} />
     <Text>With an Octicon</Text>
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full" selected>
     <Text>With a status icon</Text>
-    <StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
+    <Octicon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full">
     <Text>With a label</Text>
@@ -142,11 +142,11 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props
 ```jsx live
 <SideNav bordered maxWidth={360}>
   <SideNav.Link href="#url">
-    <StyledOcticon size={16} icon={PersonIcon} />
+    <Octicon size={16} icon={PersonIcon} />
     <Text>Account</Text>
   </SideNav.Link>
   <SideNav.Link href="#url" selected>
-    <StyledOcticon mr={2} size={16} icon={SmileyIcon} />
+    <Octicon mr={2} size={16} icon={SmileyIcon} />
     <Text>Profile</Text>
   </SideNav.Link>
 
@@ -163,7 +163,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props
   </SideNav>
 
   <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={MailIcon} />
+    <Octicon mr={2} size={16} icon={MailIcon} />
     <Text>Emails</Text>
   </SideNav.Link>
 </SideNav>

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -128,8 +128,8 @@
       url: /SplitPageLayout
     - title: StateLabel
       url: /StateLabel
-    - title: StyledOcticon
-      url: /StyledOcticon
+    - title: Octicon
+      url: /Octicon
     - title: SubNav
       url: /SubNav
     - title: ToggleSwitch

docs/src/component-checklist.js

@@ -1,4 +1,4 @@
-import {Box, StyledOcticon, Link, Text} from '@primer/react'
+import {Box, Octicon, Link, Text} from '@primer/react'
 import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
 import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
 import React from 'react'
@@ -88,11 +88,11 @@ Checklist.Item = ({checked, children}) => {
     <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
       <Box height="24px" display="flex" alignItems="center">
         {checked ? (
-          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
+          <Octicon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
         ) : checked === null ? (
-          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
+          <Octicon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
         ) : (
-          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
+          <Octicon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
         )}
       </Box>
       <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>

docs/src/component-statuses.js

@@ -1,5 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {Link, Label, StyledOcticon} from '@primer/react'
+import {Link, Label, Octicon} from '@primer/react'
 import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label'
 import Table from '@primer/gatsby-theme-doctocat/src/components/table'
@@ -79,7 +79,7 @@ export function ComponentStatuses() {
                         borderColor: 'transparent',
                       }}
                     >
-                      <StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
+                      <Octicon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
                       Reviewed
                     </Label>
                   ) : (