Remove StyledOcticon component

.changeset/kind-readers-grab.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+Remove StyledOcticon component. The component was renamed to `Octicon`. Update your imports by swapping `StyledOcticon` with `Octicon`
+
+<!-- Changed components: Octicon -->

e2e/components/StyledOcticon.test.ts → e2e/components/Octicon.test.ts

@@ -2,25 +2,25 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('StyledOcticon', () => {
+test.describe('Octicon', () => {
   test.describe('Default', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'components-styledocticon--default',
+            id: 'components-octicon--default',
             globals: {
               colorScheme: theme,
             },
           })
 
           // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`StyledOcticon.Default.${theme}.png`)
+          expect(await page.screenshot()).toMatchSnapshot(`Octicon.Default.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'components-styledocticon--default',
+            id: 'components-octicon--default',
             globals: {
               colorScheme: theme,
             },
@@ -36,19 +36,19 @@ test.describe('StyledOcticon', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'components-styledocticon--playground',
+            id: 'components-octicon--playground',
             globals: {
               colorScheme: theme,
             },
           })
 
           // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`StyledOcticon.Playground.${theme}.png`)
+          expect(await page.screenshot()).toMatchSnapshot(`Octicon.Playground.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'components-styledocticon--playground',
+            id: 'components-octicon--playground',
             globals: {
               colorScheme: theme,
             },

script/generate-e2e-tests.js

@@ -1114,15 +1114,15 @@ const components = new Map([
     },
   ],
   [
-    'StyledOcticon',
+    'Octicon',
     {
       stories: [
         {
-          id: 'components-styledocticon--default',
+          id: 'components-octicon--default',
           name: 'Default',
         },
         {
-          id: 'components-styledocticon--playground',
+          id: 'components-octicon--playground',
           name: 'Playground',
         },
       ],

src/StyledOcticon/StyledOcticon.stories.tsx → src/Octicon/Octicon.stories.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import {Meta, ComponentStory} from '@storybook/react'
-import StyledOcticon from './StyledOcticon'
+import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
 
 export default {
-  title: 'Components/StyledOcticon',
-  component: StyledOcticon,
-} as Meta<typeof StyledOcticon>
+  title: 'Components/Octicon',
+  component: Octicon,
+} as Meta<typeof Octicon>
 
-export const Default = () => <StyledOcticon icon={HeartFillIcon} size={32} />
+export const Default = () => <Octicon icon={HeartFillIcon} size={32} />
 
-export const Playground: ComponentStory<typeof StyledOcticon> = args => <StyledOcticon icon={HeartFillIcon} {...args} />
+export const Playground: ComponentStory<typeof Octicon> = args => <Octicon icon={HeartFillIcon} {...args} />
 
 Playground.args = {
   ariaLabel: 'Heart',

src/__tests__/__snapshots__/exports.test.ts.snap

@@ -57,7 +57,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
   "Spinner",
   "SplitPageLayout",
   "StateLabel",
-  "StyledOcticon",
   "SubNav",
   "TabNav",
   "Text",

src/__tests__/storybook.test.tsx

@@ -28,6 +28,7 @@ const allowlist = [
   'IconButton',
   'FilteredActionList',
   'Link',
+  'Octicon',
   'MarkdownEditor',
   'Pagehead',
   'Pagination',
@@ -39,7 +40,6 @@ const allowlist = [
   'SegmentedControl',
   'Spinner',
   'StateLabel',
-  'StyledOcticon',
   'SubNav',
   'TabNav',
   'Textarea',

src/index.ts

@@ -144,8 +144,6 @@ export {default as Spinner} from './Spinner'
 export type {SpinnerProps} from './Spinner'
 export {default as StateLabel} from './StateLabel'
 export type {StateLabelProps} from './StateLabel'
-export {default as StyledOcticon} from './StyledOcticon'
-export type {StyledOcticonProps} from './StyledOcticon'
 export {default as SubNav} from './SubNav'
 export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
 export {default as ToggleSwitch} from './ToggleSwitch'