diff --git a/.changeset/swift-cows-rest.md b/.changeset/swift-cows-rest.md deleted file mode 100644 index 2f22776cb32..00000000000 --- a/.changeset/swift-cows-rest.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Rename component StyledOcticon to Octicon diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index e2a33e9f69d..ef37944d92c 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -29,28 +29,28 @@ defineInlineTest( removeSystemProps, {}, ` -import {Button, Octicon} from '@primer/components' +import {Button, StyledOcticon} from '@primer/components' import {CheckIcon, ClippyIcon} from '@primer/octicons-react' const ClipboardCopy = ({value}) => `.trim(), ` -import {Button, Octicon} from '@primer/components' +import {Button, StyledOcticon} from '@primer/components' import {CheckIcon, ClippyIcon} from '@primer/octicons-react' const ClipboardCopy = ({value}) => ( )`.trim(), diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js index f829a124668..b5b0f203027 100644 --- a/codemods/removeSystemProps.js +++ b/codemods/removeSystemProps.js @@ -171,7 +171,7 @@ const stylePropsMap = { SideNav: [...COMMON], Spinner: [...COMMON], StateLabel: [...COMMON], - Octicon: [...COMMON], + StyledOcticon: [...COMMON], SubNav: [...COMMON, ...FLEX], TabNav: [...COMMON], TabNavLink: [...COMMON, ...TYPOGRAPHY], diff --git a/docs/content/Flash.mdx b/docs/content/Flash.mdx index 76010d4f3da..35044beb961 100644 --- 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 - + Success! ``` diff --git a/docs/content/Header.mdx b/docs/content/Header.mdx index d1f54cf8293..5bb22e1b187 100644 --- 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
- + GitHub diff --git a/docs/content/Octicon.mdx b/docs/content/StyledOcticon.mdx similarity index 56% rename from docs/content/Octicon.mdx rename to docs/content/StyledOcticon.mdx index 8d5c29b16a3..051ce95b164 100644 --- a/docs/content/Octicon.mdx +++ b/docs/content/StyledOcticon.mdx @@ -1,19 +1,19 @@ --- -description: Use Octicon to render an Octicon as a component. -title: Octicon +description: Use StyledOcticon to render an Octicon as a component. +title: StyledOcticon status: Alpha -source: https://github.com/primer/react/blob/main/src/Octicon/Octicon.tsx -componentId: octicon +source: https://github.com/primer/react/blob/main/src/StyledOcticon/StyledOcticon.tsx +componentId: styled_octicon --- -import data from '../../src/Octicon/Octicon.docs.json' +import data from '../../src/StyledOcticon/StyledOcticon.docs.json' ## Example ```jsx live <> - - + + ``` diff --git a/docs/content/Timeline.mdx b/docs/content/Timeline.mdx index 5e89d046d92..69c4474858a 100644 --- 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 - + @@ -41,7 +41,7 @@ The default Timeline.Badge color is dark text on a light grey background. - + Default badge color @@ -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 `Octicon` if necessary. +of the child `StyledOcticon` if necessary. ```jsx live - + Background used when closed events occur - + Background when opened or passed events occur - + Background used when pull requests are merged @@ -84,13 +84,13 @@ Timeline has a condensed prop that will reduce the vertical padding and remove t - + This is the message of a condensed TimelineItem - + This is the message of a condensed TimelineItem @@ -105,14 +105,14 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo - + Background used when closed events occur - + Background when opened or passed events occur diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx index a36de973364..021c6019061 100644 --- a/docs/content/TreeView.mdx +++ b/docs/content/TreeView.mdx @@ -34,7 +34,7 @@ import {TreeView} from '@primer/react' Avatar.tsx - + @@ -43,7 +43,7 @@ import {TreeView} from '@primer/react' Button.tsx - + @@ -54,7 +54,7 @@ import {TreeView} from '@primer/react' package.json - + diff --git a/docs/content/deprecated/SideNav.md b/docs/content/deprecated/SideNav.md index 96977974ac8..4cf852fe97e 100644 --- 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 With an avatar - + With an Octicon With a status icon - + With a label @@ -142,11 +142,11 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props ```jsx live - + Account - + Profile @@ -163,7 +163,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props - + Emails diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 34a4ed99699..da1d837ce2b 100644 --- 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: Octicon - url: /Octicon + - title: StyledOcticon + url: /StyledOcticon - title: SubNav url: /SubNav - title: ToggleSwitch diff --git a/docs/src/component-checklist.js b/docs/src/component-checklist.js index 757efb30f64..1e72d10f349 100644 --- a/docs/src/component-checklist.js +++ b/docs/src/component-checklist.js @@ -1,4 +1,4 @@ -import {Box, Octicon, Link, Text} from '@primer/react' +import {Box, StyledOcticon, 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}) => { {checked ? ( - + ) : checked === null ? ( - + ) : ( - + )} diff --git a/docs/src/component-statuses.js b/docs/src/component-statuses.js index 42c431c6072..a6cad737efb 100644 --- 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, Octicon} from '@primer/react' +import {Link, Label, StyledOcticon} 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', }} > - + Reviewed ) : ( diff --git a/generated/components.json b/generated/components.json index bd5ac647dc2..5df40191178 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1238,12 +1238,12 @@ { "name": "as", "type": "React.ElementType", - "defaultValue": "Octicon" + "defaultValue": "StyledOcticon" } ], "passthrough": { - "element": "Octicon", - "url": "/Octicon" + "element": "StyledOcticon", + "url": "/StyledOcticon" } } ] @@ -1891,7 +1891,7 @@ "stories": [ { "id": "components-header--default", - "code": "() => (\n
\n \n \n \n GitHub\n \n \n Menu\n \n \n \n
\n)" + "code": "() => (\n
\n \n \n \n GitHub\n \n \n Menu\n \n \n \n
\n)" } ], "props": [ @@ -2219,50 +2219,6 @@ } ] }, - "octicon": { - "id": "octicon", - "name": "Octicon", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "ariaLabel", - "type": "string", - "defaultValue": "", - "description": "Specifies the aria-label attribute, which is read verbatim by screen readers " - }, - { - "name": "icon", - "type": "Component", - "defaultValue": "", - "description": "Checks the input by default in uncontrolled modeName of the [Octicon component](https://primer.style/octicons/) used in the" - }, - { - "name": "color", - "type": "string", - "defaultValue": "", - "description": "Sets an override color for the Octicon. Compatible with colors from the [Primer color system](https://primer.style/primitives/colors).\"" - }, - { - "name": "size", - "type": "number", - "defaultValue": "16", - "description": "Sets the uniform `width` and `height` of the SVG element" - }, - { - "name": "verticalAlign", - "type": "string", - "defaultValue": "text-bottom", - "description": "Sets the `vertical-align` CSS property" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [] - }, "overlay": { "id": "overlay", "name": "Overlay", @@ -3919,6 +3875,55 @@ ], "subcomponents": [] }, + "styled_octicon": { + "id": "styled_octicon", + "name": "StyledOcticon", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-styledocticon--default", + "code": "() => " + } + ], + "props": [ + { + "name": "ariaLabel", + "type": "string", + "defaultValue": "", + "description": "Specifies the aria-label attribute, which is read verbatim by screen readers " + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "description": "Checks the input by default in uncontrolled modeName of the [Octicon component](https://primer.style/octicons/) used in the" + }, + { + "name": "color", + "type": "string", + "defaultValue": "", + "description": "Sets an override color for the Octicon. Compatible with colors from the [Primer color system](https://primer.style/primitives/colors).\"" + }, + { + "name": "size", + "type": "number", + "defaultValue": "16", + "description": "Sets the uniform `width` and `height` of the SVG element" + }, + { + "name": "verticalAlign", + "type": "string", + "defaultValue": "text-bottom", + "description": "Sets the `vertical-align` CSS property" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, "sub_nav": { "id": "sub_nav", "name": "SubNav", @@ -4380,7 +4385,7 @@ "stories": [ { "id": "components-timeline--default", - "code": "() => (\n \n \n \n \n \n This is a message\n \n \n \n \n \n This is a message\n \n \n \n \n \n This is a message\n \n \n)" + "code": "() => (\n \n \n \n \n \n This is a message\n \n \n \n \n \n This is a message\n \n \n \n \n \n This is a message\n \n \n)" } ], "props": [ @@ -4682,7 +4687,7 @@ "stories": [ { "id": "components-treeview--default", - "code": "() => (\n \n)" + "code": "() => (\n \n)" }, { "id": "components-treeview-features--files", @@ -4690,7 +4695,7 @@ }, { "id": "components-treeview-features--files-changed", - "code": "() => {\n return (\n \n )\n}" + "code": "() => {\n return (\n \n )\n}" }, { "id": "components-treeview-features--async-success", diff --git a/src/CircleBadge/CircleBadge.docs.json b/src/CircleBadge/CircleBadge.docs.json index c09edb015fb..d809da785b5 100644 --- a/src/CircleBadge/CircleBadge.docs.json +++ b/src/CircleBadge/CircleBadge.docs.json @@ -44,13 +44,13 @@ { "name": "as", "type": "React.ElementType", - "defaultValue": "Octicon" + "defaultValue": "StyledOcticon" } ], "passthrough": { - "element": "Octicon", - "url": "/Octicon" + "element": "StyledOcticon", + "url": "/StyledOcticon" } } ] -} +} \ No newline at end of file diff --git a/src/CircleBadge/CircleBadge.tsx b/src/CircleBadge/CircleBadge.tsx index 3712272ab1e..48ead2f6ef9 100644 --- a/src/CircleBadge/CircleBadge.tsx +++ b/src/CircleBadge/CircleBadge.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components' import {get} from '../constants' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import sx, {SxProp} from '../sx' import isNumeric from '../utils/isNumeric' import {ComponentProps} from '../utils/types' @@ -36,7 +36,7 @@ const CircleBadge = styled.div` ${sx}; ` -const CircleBadgeIcon = styled(Octicon)` +const CircleBadgeIcon = styled(StyledOcticon)` height: auto; max-width: 60%; max-height: 55%; diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 76bd4095738..be9fa186567 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -6,7 +6,7 @@ import {get} from '../constants' import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' import {useFocusTrap} from '../hooks/useFocusTrap' import sx, {SxProp} from '../sx' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import {XIcon} from '@primer/octicons-react' import {useFocusZone} from '../hooks/useFocusZone' import {FocusKeys} from '@primer/behaviors' @@ -417,7 +417,7 @@ const DialogCloseButton = styled(Button)` const CloseButton: React.FC void}>> = ({onClose}) => { return ( - + ) } diff --git a/src/Header/Header.stories.tsx b/src/Header/Header.stories.tsx index 2b35502be42..374db8ea2a6 100644 --- a/src/Header/Header.stories.tsx +++ b/src/Header/Header.stories.tsx @@ -4,7 +4,7 @@ import {MarkGithubIcon} from '@primer/octicons-react' import Header from './Header' import Avatar from '../Avatar' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' export default { title: 'Components/Header', @@ -15,7 +15,7 @@ export const Default = () => (
- + GitHub @@ -30,7 +30,7 @@ export const Playground: ComponentStory = args => (
- + GitHub diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index 077b46d96ad..026561d0039 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -9,7 +9,7 @@ import { ActionListTrailingVisualProps, } from '../ActionList' import Box from '../Box' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import sx, {merge, SxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import {useId} from '../hooks/useId' @@ -143,7 +143,7 @@ function ItemWithSubNav({children, subNav, sx: sxProp = defaultSxProp}: ItemWith {children} {/* What happens if the user provides a TrailingVisual? */} - -} - -const Octicon = styled(Icon)` - ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})} -` - -export type OcticonProps = ComponentProps -export default Octicon diff --git a/src/Octicon/index.ts b/src/Octicon/index.ts deleted file mode 100644 index 287bafbcdc7..00000000000 --- a/src/Octicon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default, OcticonProps} from './Octicon' diff --git a/src/StateLabel/StateLabel.tsx b/src/StateLabel/StateLabel.tsx index 6b7017d6a62..58401a618bc 100644 --- a/src/StateLabel/StateLabel.tsx +++ b/src/StateLabel/StateLabel.tsx @@ -12,7 +12,7 @@ import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' import {get} from '../constants' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' @@ -111,7 +111,7 @@ function StateLabel({children, status, variant: variantProp = 'normal', ...rest} return ( {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */} - {status && } + {status && } {children} ) diff --git a/src/StateLabel/__tests__/StateLabel.test.tsx b/src/StateLabel/__tests__/StateLabel.test.tsx index 4fec26dbfb1..f4d1ccd8d14 100644 --- a/src/StateLabel/__tests__/StateLabel.test.tsx +++ b/src/StateLabel/__tests__/StateLabel.test.tsx @@ -9,7 +9,7 @@ describe('StateLabel', () => { Component: StateLabel, toRender: () => Open, options: { - // Rendering a Octicon seems to break getComputedStyles, which + // Rendering a StyledOcticon seems to break getComputedStyles, which // the sx prop implementation test uses to make sure the prop is working correctly. // Despite my best efforts, I cannot figure out why this is happening. So, // unfortunately, we will simply skip this test. diff --git a/src/Octicon/Octicon.docs.json b/src/StyledOcticon/StyledOcticon.docs.json similarity index 95% rename from src/Octicon/Octicon.docs.json rename to src/StyledOcticon/StyledOcticon.docs.json index c01607f79d3..ac8166010b6 100644 --- a/src/Octicon/Octicon.docs.json +++ b/src/StyledOcticon/StyledOcticon.docs.json @@ -1,6 +1,6 @@ { - "id": "octicon", - "name": "Octicon", + "id": "styled_octicon", + "name": "StyledOcticon", "status": "alpha", "a11yReviewed": false, "stories": [], @@ -41,4 +41,4 @@ } ], "subcomponents": [] -} +} \ No newline at end of file diff --git a/src/Octicon/StyledOcticon.stories.tsx b/src/StyledOcticon/StyledOcticon.stories.tsx similarity index 68% rename from src/Octicon/StyledOcticon.stories.tsx rename to src/StyledOcticon/StyledOcticon.stories.tsx index 56e19d1ea81..6a283932c34 100644 --- a/src/Octicon/StyledOcticon.stories.tsx +++ b/src/StyledOcticon/StyledOcticon.stories.tsx @@ -1,16 +1,16 @@ import React from 'react' import {Meta, ComponentStory} from '@storybook/react' -import Octicon from './Octicon' +import StyledOcticon from './StyledOcticon' import {HeartFillIcon} from '@primer/octicons-react' export default { - title: 'Components/Octicon', - component: Octicon, -} as Meta + title: 'Components/StyledOcticon', + component: StyledOcticon, +} 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 index bc9562fbac0..e3d3949213b 100644 --- a/src/StyledOcticon/StyledOcticon.tsx +++ b/src/StyledOcticon/StyledOcticon.tsx @@ -1,5 +1,18 @@ -// Leaving an export here for backwards compatibility -import {default as StyledOcticon} from '../Octicon/Octicon' +import {IconProps} from '@primer/octicons-react' +import React from 'react' +import styled from 'styled-components' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' +type OcticonProps = {icon: React.ElementType; color?: string} & IconProps + +function Octicon({icon: IconComponent, ...rest}: OcticonProps) { + return +} + +const StyledOcticon = styled(Octicon)` + ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})} +` + +export type StyledOcticonProps = ComponentProps export default StyledOcticon -export type {OcticonProps as StyledOcticonProps} from '../Octicon/Octicon' diff --git a/src/Timeline/Timeline.features.stories.tsx b/src/Timeline/Timeline.features.stories.tsx index ead5e5d3f90..2b88ba7a87d 100644 --- a/src/Timeline/Timeline.features.stories.tsx +++ b/src/Timeline/Timeline.features.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Meta} from '@storybook/react' import {ComponentProps} from '../utils/types' import Timeline from './Timeline' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import {GitBranchIcon, GitCommitIcon, GitMergeIcon} from '@primer/octicons-react' import Link from '../Link' @@ -21,7 +21,7 @@ export const ClipSidebar = () => ( - + This is a message @@ -32,13 +32,13 @@ export const CondensedItems = () => ( - + This is a message - + This is a message @@ -49,14 +49,14 @@ export const TimelineBreak = () => ( - + This is a message - + This is a message @@ -67,7 +67,7 @@ export const WithInlineLinks = () => ( - + diff --git a/src/Timeline/Timeline.stories.tsx b/src/Timeline/Timeline.stories.tsx index 27346cc0478..61b1466e425 100644 --- a/src/Timeline/Timeline.stories.tsx +++ b/src/Timeline/Timeline.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Meta, Story} from '@storybook/react' import {ComponentProps} from '../utils/types' import Timeline from './Timeline' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import {GitCommitIcon} from '@primer/octicons-react' export default { @@ -20,19 +20,19 @@ export const Default = () => ( - + This is a message - + This is a message - + This is a message @@ -43,19 +43,19 @@ export const Playground: Story> = args => ( - + This is a message - + This is a message - + This is a message diff --git a/src/TreeView/TreeView.features.stories.tsx b/src/TreeView/TreeView.features.stories.tsx index 25316a10a6f..adb8b68ac4e 100644 --- a/src/TreeView/TreeView.features.stories.tsx +++ b/src/TreeView/TreeView.features.stories.tsx @@ -3,7 +3,7 @@ import {Meta, Story} from '@storybook/react' import React from 'react' import Box from '../Box' import {Button} from '../Button' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import {SubTreeState, TreeView} from './TreeView' const meta: Meta = { @@ -114,7 +114,7 @@ export const FilesChanged: Story = () => { Avatar.tsx - + @@ -129,7 +129,7 @@ export const FilesChanged: Story = () => { Button.tsx - + @@ -138,7 +138,7 @@ export const FilesChanged: Story = () => { Button.test.tsx - + @@ -149,7 +149,7 @@ export const FilesChanged: Story = () => { ReallyLongFileNameThatShouldBeTruncated.tsx - + @@ -166,7 +166,7 @@ export const FilesChanged: Story = () => { index.html - + @@ -175,7 +175,7 @@ export const FilesChanged: Story = () => { favicon.ico - + @@ -913,7 +913,7 @@ export const WithoutIndentation: Story = () => ( Avatar.tsx - + @@ -922,7 +922,7 @@ export const WithoutIndentation: Story = () => ( Button.tsx - + @@ -931,7 +931,7 @@ export const WithoutIndentation: Story = () => ( package.json - + diff --git a/src/TreeView/TreeView.stories.tsx b/src/TreeView/TreeView.stories.tsx index fe6c83a1aa2..70d67a95413 100644 --- a/src/TreeView/TreeView.stories.tsx +++ b/src/TreeView/TreeView.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {DiffAddedIcon, DiffModifiedIcon, FileIcon} from '@primer/octicons-react' import {Meta, Story} from '@storybook/react' import Box from '../Box' -import Octicon from '../Octicon' +import StyledOcticon from '../StyledOcticon' import {TreeView} from './TreeView' const meta: Meta = { @@ -34,7 +34,7 @@ export const Default: Story = () => ( Avatar.tsx - + @@ -43,7 +43,7 @@ export const Default: Story = () => ( Button.tsx - + @@ -54,7 +54,7 @@ export const Default: Story = () => ( package.json - + diff --git a/src/UnderlineNav2/UnderlineNav2.examples.stories.tsx b/src/UnderlineNav2/UnderlineNav2.examples.stories.tsx index 293642c0664..3a2221a4599 100644 --- a/src/UnderlineNav2/UnderlineNav2.examples.stories.tsx +++ b/src/UnderlineNav2/UnderlineNav2.examples.stories.tsx @@ -22,7 +22,7 @@ import { } from '@primer/octicons-react' import {Meta} from '@storybook/react' import {UnderlineNav} from './index' -import {Avatar, Octicon, Button, Box, Heading, Link, Text, StateLabel, BranchName} from '..' +import {Avatar, StyledOcticon, Button, Box, Heading, Link, Text, StateLabel, BranchName} from '..' export default { title: 'Drafts/Components/UnderlineNav/Examples', @@ -131,7 +131,7 @@ export const ProfilePage = () => { - + 47 Followers diff --git a/src/__tests__/Octicon.test.tsx b/src/__tests__/Octicon.test.tsx deleted file mode 100644 index 52a1d7476ec..00000000000 --- a/src/__tests__/Octicon.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import {XIcon} from '@primer/octicons-react' -import {Octicon} 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('Octicon', () => { - behavesAsComponent({ - Component: Octicon, - toRender: () => , - }) - - checkExports('Octicon', { - default: Octicon, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) diff --git a/src/__tests__/Octicon.types.test.tsx b/src/__tests__/Octicon.types.test.tsx deleted file mode 100644 index 4fe6dfaf29e..00000000000 --- a/src/__tests__/Octicon.types.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import {MoonIcon} from '@primer/octicons-react' -import React from 'react' -import Octicon from '../Octicon' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/src/__tests__/__snapshots__/Octicon.test.tsx.snap b/src/__tests__/__snapshots__/Octicon.test.tsx.snap deleted file mode 100644 index ef74ea46657..00000000000 --- a/src/__tests__/__snapshots__/Octicon.test.tsx.snap +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Octicon renders consistently 1`] = ` - -`; diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index a0fbe241750..36c09cae9ae 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -39,7 +39,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` "Link", "LinkButton", "NavList", - "Octicon", "Overlay", "PageLayout", "Pagehead", diff --git a/src/deprecated/DropdownMenu/DropdownButton.tsx b/src/deprecated/DropdownMenu/DropdownButton.tsx index 8764123c07a..bef4ec1a761 100644 --- a/src/deprecated/DropdownMenu/DropdownButton.tsx +++ b/src/deprecated/DropdownMenu/DropdownButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import {TriangleDownIcon} from '@primer/octicons-react' import Button, {ButtonProps} from '../Button/Button' -import Octicon from '../../Octicon' +import StyledOcticon from '../../StyledOcticon' export type DropdownButtonProps = ButtonProps @@ -12,7 +12,7 @@ export const DropdownButton = React.forwardRef, ref): JSX.Element => ( ), ) diff --git a/src/deprecated/SelectMenu/SelectMenuItem.tsx b/src/deprecated/SelectMenu/SelectMenuItem.tsx index 83075c5d355..82d6f869096 100644 --- a/src/deprecated/SelectMenu/SelectMenuItem.tsx +++ b/src/deprecated/SelectMenu/SelectMenuItem.tsx @@ -2,7 +2,7 @@ import {CheckIcon} from '@primer/octicons-react' import React, {forwardRef, useContext, useRef} from 'react' import styled, {css} from 'styled-components' import {get} from '../../constants' -import Octicon from '../../Octicon' +import StyledOcticon from '../../StyledOcticon' import sx, {SxProp} from '../../sx' import {ComponentProps} from '../../utils/types' import {MenuContext} from './SelectMenuContext' @@ -119,7 +119,7 @@ const SelectMenuItem = forwardRef } return ( - + {children} ) diff --git a/src/index.ts b/src/index.ts index 649faf74565..327d04567ae 100644 --- a/src/index.ts +++ b/src/index.ts @@ -117,8 +117,6 @@ export type { NavListTrailingVisualProps, NavListDividerProps, } from './NavList' -export {default as Octicon} from './Octicon' -export type {OcticonProps} from './Octicon' export {default as Overlay} from './Overlay' export type {OverlayProps} from './Overlay' export {default as Pagehead} from './Pagehead'