Rename component StyledOcticon to Octicon (#3148)

* Rename component StyledOcticon to Octicon * Update generated/components.json * Create .changeset/swift-cows-rest.md * Fix snapshot * Add segments to progressbar (#3114) * Allow ProgressBar to either be given child segments or just a progress value. * Update ProgressBar docs. * Fix progress bar tests. * Create dry-weeks-compete.md * Fix errors from CI. * Rename ProgressBar.Segment to ProgressBar.Item. * Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar. * Updated snapshots. * Updated snapshots using --no-cache flag. * refactor(CircleOcticon): Move files to folder, add storybook and e2e tests. (#3119) * Reorganize CircleOcticon files, add story and e2e tests. * Add index file. * Update generated/components.json * refactor(CircleBadge): move files into folder, add e2e tests. (#3118) * Reorganize CircleBadge, add e2e tests. * Update generated/components.json * test(vrt): update snapshots * Update docs reference. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Update generated/components.json * test(vrt): update snapshots --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Refactor(Popover): move files into folder, add storybook and e2e tests. (#3135) * Move files into folder, add storybook and e2e tests. * Update generated/components.json * test(vrt): update snapshots --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * refactor(ButtonGroup): move files to folder. (#3117) * Reorganize ButtonGroup component and stories. * Update generated/components.json * Add e2e tests. * test(vrt): update snapshots * refactor(CircleBadge): move files into folder, add e2e tests. (#3118) * Reorganize CircleBadge, add e2e tests. * Update generated/components.json * test(vrt): update snapshots * Update docs reference. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * replace createRef with useRef (#3124) * replace createRef with useRef * changeset * missed null * refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122) * Reorganize FilterList files into folder, add storybook and e2e tests. * Update generated/components.json * test(vrt): update snapshots --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Refactor(FilteredSearch): move files to folder, add storybook and e2e tests. (#3125) * Move files to folder, add storybook and e2e tests. * Add aria-label to TextInput, fix docs reference. * Update generated/components.json * test(vrt): update snapshots * replace createRef with useRef (#3124) * replace createRef with useRef * changeset * missed null * refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122) * Reorganize FilterList files into folder, add storybook and e2e tests. * Update generated/components.json * test(vrt): update snapshots --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * Fix generated components. --------- Co-authored-by: radglob <radglob@users.noreply.github.com> Co-authored-by: Matthew Costabile <mattcosta7@github.com> * Refactor(LabelGroup): add files to folder, add storybook and e2e tests. (#3131) * Move files to folder, add storybook and e2e tests. * Update generated/components.json * test(vrt): update snapshots --------- Co-authored-by: radglob <radglob@users.noreply.github.com> * test(e2e): update ActionMenu e2e test to remove custom contrast rules (#3130) * test(e2e): update ActionMenu e2e test to remove custom contrast rules * test(vrt): update snapshots * test: remove multiple sections test * test(e2e): restore rule exception for ActionMenu --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127) * use useIsomorphicLayoutEffect * Create .changeset/fast-panthers-refuse.md --------- Co-authored-by: Josh Black <joshblack@github.com> * Bump @primer/primitives to `7.11.5` (#3120) * npm install @primer/primitives@7.11.5 * Updating`theme-preval` snapshots * Re-run ``` npm run build npm run test -- -u ``` So that /themePreval.test.ts.snap also gets the new timestamp * Update `theme-preval` snapshots docs * Create .changeset/old-falcons-learn.md * test(vrt): update snapshots --------- Co-authored-by: simurai <simurai@users.noreply.github.com> * Update RelativeTime stories (#3136) * Update RelativeTime stories * Update generated/components.json --------- Co-authored-by: colebemis <colebemis@users.noreply.github.com> * chore(deps-dev): bump @types/jest-axe from 3.5.3 to 3.5.5 (#3141) Bumps [@types/jest-axe](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest-axe) from 3.5.3 to 3.5.5. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest-axe) --- updated-dependencies: - dependency-name: "@types/jest-axe" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-typescript from 11.0.0 to 11.1.0 (#3138) Bumps [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/HEAD/packages/typescript) from 11.0.0 to 11.1.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Changelog](https://github.com/rollup/plugins/blob/master/packages/typescript/CHANGELOG.md) - [Commits](https://github.com/rollup/plugins/commits/commonjs-v11.1.0/packages/typescript) --- updated-dependencies: - dependency-name: "@rollup/plugin-typescript" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3 (#3140) * chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3 Bumps [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) from 2.0.2 to 2.0.3. - [Release notes](https://github.com/primer/eslint-plugin-primer-react/releases) - [Changelog](https://github.com/primer/eslint-plugin-primer-react/blob/main/CHANGELOG.md) - [Commits](primer/eslint-plugin-primer-react@v2.0.2...v2.0.3) --- updated-dependencies: - dependency-name: eslint-plugin-primer-react dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore(eslint): remove unnecessary disable --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1 (#3139) * chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1 Bumps [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) from 2.0.2 to 2.1.1. - [Release notes](https://github.com/styled-components/babel-plugin-styled-components/releases) - [Commits](styled-components/babel-plugin-styled-components@v2.0.2...v2.1.1) --- updated-dependencies: - dependency-name: babel-plugin-styled-components dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * test(snapshots): update snapshots --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * chore(project): update project to use Node.js v18 LTS (#3133) * chore(project): update project to use Node.js v18 LTS * chore: add legacy openssl option for docs builds * chore: update devcontainer image --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup (#3146) * Update slots for checkbox group and radio group * Update useSlot return type * Update exports test * Create .changeset/young-queens-notice.md * Update comment indentation * Add segments to progressbar (#3114) * Allow ProgressBar to either be given child segments or just a progress value. * Update ProgressBar docs. * Fix progress bar tests. * Create dry-weeks-compete.md * Fix errors from CI. * Rename ProgressBar.Segment to ProgressBar.Item. * Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar. * Updated snapshots. * Updated snapshots using --no-cache flag. * Update generated/components.json --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: radglob <radglob@users.noreply.github.com> Co-authored-by: Matthew Costabile <mattcosta7@github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: simurai <simurai@github.com> Co-authored-by: simurai <simurai@users.noreply.github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: colebemis <colebemis@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * docs(project): move code of conduct under .github (#3145) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Add npm workspaces structure to primer/react (#3074) * test(axe): default `color-contrast` check to false * chore: update generate script to not conditionally disable contrast checks * Create adr-015-npm-workspaces.md * docs: update adr * Update adr-015-npm-workspaces.md --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Update generated/components.json * change styled_octicon key * Update generated/components.json * Update generated/components.json * Update generated/components.json * Octicon folder * Fix package-lock * Fix imports * update path * Update generated/components.json --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: jonrohan <jonrohan@users.noreply.github.com> Co-authored-by: Jeremy Neal <radglob@github.com> Co-authored-by: radglob <radglob@users.noreply.github.com> Co-authored-by: Matthew Costabile <mattcosta7@github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: simurai <simurai@github.com> Co-authored-by: simurai <simurai@users.noreply.github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: colebemis <colebemis@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josep Martins <josepmartins@github.com>
primer · May 12, 2023 · ac437bb · ac437bb
1 parent ecd75ac
commit ac437bb
Show file tree

Hide file tree

Showing 37 changed files with 245 additions and 173 deletions.
diff --git a/.changeset/swift-cows-rest.md b/.changeset/swift-cows-rest.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Rename component StyledOcticon to Octicon
diff --git a/codemods/__tests__/removeSystemProps.js b/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(),

diff --git a/codemods/removeSystemProps.js b/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],

diff --git a/docs/content/Flash.mdx b/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>
 ```

diff --git a/docs/content/Header.mdx b/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>

diff --git a/docs/content/StyledOcticon.mdx → docs/content/Octicon.mdx b/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" />
 </>
 ```
 

diff --git a/docs/content/Timeline.mdx b/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>

diff --git a/docs/content/TreeView.mdx b/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>

diff --git a/docs/content/deprecated/SideNav.md b/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>

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/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

diff --git a/docs/src/component-checklist.js b/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'}>

diff --git a/docs/src/component-statuses.js b/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>
                   ) : (