From 5676ffc1ec5cc01de56941b4a27ce6f63ce5beaa Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 20 Sep 2023 12:11:58 -0700 Subject: [PATCH] Remove StyledOcticon component (#3735) * Remove StyledOcticon * Create kind-readers-grab.md * Update kind-readers-grab.md * revert changes * Rebuild package-lock.json * Update package-lock.json * Update kind-readers-grab.md * Update kind-readers-grab.md --- .changeset/kind-readers-grab.md | 7 +++++ ...{StyledOcticon.test.ts => Octicon.test.ts} | 14 +++++----- script/generate-e2e-tests.js | 6 ++--- .../Octicon.stories.tsx} | 12 ++++----- src/StyledOcticon/StyledOcticon.tsx | 5 ---- src/StyledOcticon/index.ts | 2 -- src/__tests__/StyledOcticon.test.tsx | 25 ------------------ src/__tests__/StyledOcticon.types.test.tsx | 12 --------- .../__snapshots__/StyledOcticon.test.tsx.snap | 26 ------------------- .../__snapshots__/exports.test.ts.snap | 1 - src/__tests__/storybook.test.tsx | 2 +- src/index.ts | 2 -- 12 files changed, 24 insertions(+), 90 deletions(-) create mode 100644 .changeset/kind-readers-grab.md rename e2e/components/{StyledOcticon.test.ts => Octicon.test.ts} (73%) rename src/{StyledOcticon/StyledOcticon.stories.tsx => Octicon/Octicon.stories.tsx} (68%) delete mode 100644 src/StyledOcticon/StyledOcticon.tsx delete mode 100644 src/StyledOcticon/index.ts delete mode 100644 src/__tests__/StyledOcticon.test.tsx delete mode 100644 src/__tests__/StyledOcticon.types.test.tsx delete mode 100644 src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap diff --git a/.changeset/kind-readers-grab.md b/.changeset/kind-readers-grab.md new file mode 100644 index 00000000000..9d4356c9a2c --- /dev/null +++ b/.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` + + diff --git a/e2e/components/StyledOcticon.test.ts b/e2e/components/Octicon.test.ts similarity index 73% rename from e2e/components/StyledOcticon.test.ts rename to e2e/components/Octicon.test.ts index 39f22747c15..ce0cf701146 100644 --- a/e2e/components/StyledOcticon.test.ts +++ b/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, }, diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 718ca42e096..4dad3d05369 100644 --- a/script/generate-e2e-tests.js +++ b/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', }, ], diff --git a/src/StyledOcticon/StyledOcticon.stories.tsx b/src/Octicon/Octicon.stories.tsx similarity index 68% rename from src/StyledOcticon/StyledOcticon.stories.tsx rename to src/Octicon/Octicon.stories.tsx index 6a283932c34..56e19d1ea81 100644 --- a/src/StyledOcticon/StyledOcticon.stories.tsx +++ b/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 + title: 'Components/Octicon', + component: Octicon, +} as Meta -export const Default = () => +export const Default = () => -export const Playground: ComponentStory = args => +export const Playground: ComponentStory = args => Playground.args = { ariaLabel: 'Heart', diff --git a/src/StyledOcticon/StyledOcticon.tsx b/src/StyledOcticon/StyledOcticon.tsx deleted file mode 100644 index bc9562fbac0..00000000000 --- a/src/StyledOcticon/StyledOcticon.tsx +++ /dev/null @@ -1,5 +0,0 @@ -// Leaving an export here for backwards compatibility -import {default as StyledOcticon} from '../Octicon/Octicon' - -export default StyledOcticon -export type {OcticonProps as StyledOcticonProps} from '../Octicon/Octicon' diff --git a/src/StyledOcticon/index.ts b/src/StyledOcticon/index.ts deleted file mode 100644 index 3f9d39ff306..00000000000 --- a/src/StyledOcticon/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {default} from './StyledOcticon' -export type {StyledOcticonProps} from './StyledOcticon' diff --git a/src/__tests__/StyledOcticon.test.tsx b/src/__tests__/StyledOcticon.test.tsx deleted file mode 100644 index 570527e7f63..00000000000 --- a/src/__tests__/StyledOcticon.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import {XIcon} from '@primer/octicons-react' -import {StyledOcticon} from '..' -import {behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('StyledOcticon', () => { - behavesAsComponent({ - Component: StyledOcticon, - toRender: () => , - }) - - checkExports('StyledOcticon', { - default: StyledOcticon, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) diff --git a/src/__tests__/StyledOcticon.types.test.tsx b/src/__tests__/StyledOcticon.types.test.tsx deleted file mode 100644 index 3429f62b7cb..00000000000 --- a/src/__tests__/StyledOcticon.types.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import {MoonIcon} from '@primer/octicons-react' -import React from 'react' -import StyledOcticon from '../StyledOcticon' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap b/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap deleted file mode 100644 index 4d6e9d3c198..00000000000 --- a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StyledOcticon renders consistently 1`] = ` - -`; diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 11b4a269c32..21317e81315 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/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", diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx index eb674d09f9b..adbc4054849 100644 --- a/src/__tests__/storybook.test.tsx +++ b/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', diff --git a/src/index.ts b/src/index.ts index 5e5bd6b5e45..e40595082a6 100644 --- a/src/index.ts +++ b/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'