diff --git a/.changeset/swift-cows-rest.md b/.changeset/swift-cows-rest.md new file mode 100644 index 00000000000..2f22776cb32 --- /dev/null +++ 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 index ef37944d92c..e2a33e9f69d 100644 --- 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}) => `.trim(), ` -import {Button, StyledOcticon} from '@primer/components' +import {Button, Octicon} 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 b5b0f203027..f829a124668 100644 --- 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 index 35044beb961..76010d4f3da 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 5bb22e1b187..d1f54cf8293 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/StyledOcticon.mdx b/docs/content/Octicon.mdx similarity index 56% rename from docs/content/StyledOcticon.mdx rename to docs/content/Octicon.mdx index 051ce95b164..8d5c29b16a3 100644 --- a/docs/content/StyledOcticon.mdx +++ b/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 <> - - + + ``` diff --git a/docs/content/Timeline.mdx b/docs/content/Timeline.mdx index 69c4474858a..5e89d046d92 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 `StyledOcticon` if necessary. +of the child `Octicon` 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 021c6019061..a36de973364 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 4cf852fe97e..96977974ac8 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 da1d837ce2b..34a4ed99699 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: 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 index 1e72d10f349..757efb30f64 100644 --- 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}) => { {checked ? ( - + ) : checked === null ? ( - + ) : ( - + )} diff --git a/docs/src/component-statuses.js b/docs/src/component-statuses.js index a6cad737efb..42c431c6072 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, 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', }} > - + Reviewed ) : ( diff --git a/generated/components.json b/generated/components.json index 684622efdf3..041f317e733 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1238,12 +1238,12 @@ { "name": "as", "type": "React.ElementType", - "defaultValue": "StyledOcticon" + "defaultValue": "Octicon" } ], "passthrough": { - "element": "StyledOcticon", - "url": "/StyledOcticon" + "element": "Octicon", + "url": "/Octicon" } } ] @@ -1860,7 +1860,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": [ @@ -2188,6 +2188,50 @@ } ] }, + "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", @@ -3838,55 +3882,6 @@ ], "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", @@ -4348,7 +4343,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": [ @@ -4650,7 +4645,7 @@ "stories": [ { "id": "components-treeview--default", - "code": "() => (\n \n)" + "code": "() => (\n \n)" }, { "id": "components-treeview-features--files", @@ -4658,7 +4653,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 d809da785b5..c09edb015fb 100644 --- a/src/CircleBadge/CircleBadge.docs.json +++ b/src/CircleBadge/CircleBadge.docs.json @@ -44,13 +44,13 @@ { "name": "as", "type": "React.ElementType", - "defaultValue": "StyledOcticon" + "defaultValue": "Octicon" } ], "passthrough": { - "element": "StyledOcticon", - "url": "/StyledOcticon" + "element": "Octicon", + "url": "/Octicon" } } ] -} \ No newline at end of file +} diff --git a/src/CircleBadge/CircleBadge.tsx b/src/CircleBadge/CircleBadge.tsx index 48ead2f6ef9..3712272ab1e 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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(StyledOcticon)` +const CircleBadgeIcon = styled(Octicon)` height: auto; max-width: 60%; max-height: 55%; diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index be9fa186567..76bd4095738 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 374db8ea2a6..2b35502be42 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 026561d0039..077b46d96ad 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -9,7 +9,7 @@ import { ActionListTrailingVisualProps, } from '../ActionList' import Box from '../Box' -import StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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/StyledOcticon/StyledOcticon.stories.tsx b/src/Octicon/StyledOcticon.stories.tsx similarity index 68% rename from src/StyledOcticon/StyledOcticon.stories.tsx rename to src/Octicon/StyledOcticon.stories.tsx index 6a283932c34..56e19d1ea81 100644 --- a/src/StyledOcticon/StyledOcticon.stories.tsx +++ b/src/Octicon/StyledOcticon.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/Octicon/index.ts b/src/Octicon/index.ts new file mode 100644 index 00000000000..287bafbcdc7 --- /dev/null +++ b/src/Octicon/index.ts @@ -0,0 +1 @@ +export {default, OcticonProps} from './Octicon' diff --git a/src/StateLabel/StateLabel.tsx b/src/StateLabel/StateLabel.tsx index 58401a618bc..6b7017d6a62 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 f4d1ccd8d14..4fec26dbfb1 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 StyledOcticon seems to break getComputedStyles, which + // Rendering a Octicon 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/StyledOcticon/StyledOcticon.tsx b/src/StyledOcticon/StyledOcticon.tsx index e3d3949213b..bc9562fbac0 100644 --- a/src/StyledOcticon/StyledOcticon.tsx +++ b/src/StyledOcticon/StyledOcticon.tsx @@ -1,18 +1,5 @@ -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' +// Leaving an export here for backwards compatibility +import {default as StyledOcticon} from '../Octicon/Octicon' -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 2b88ba7a87d..ead5e5d3f90 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 61b1466e425..27346cc0478 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 19ca6b8f362..aec221bd7ae 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 - + @@ -806,7 +806,7 @@ export const WithoutIndentation: Story = () => ( Avatar.tsx - + @@ -815,7 +815,7 @@ export const WithoutIndentation: Story = () => ( Button.tsx - + @@ -824,7 +824,7 @@ export const WithoutIndentation: Story = () => ( package.json - + diff --git a/src/TreeView/TreeView.stories.tsx b/src/TreeView/TreeView.stories.tsx index 70d67a95413..fe6c83a1aa2 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 StyledOcticon from '../StyledOcticon' +import Octicon from '../Octicon' 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 3a2221a4599..293642c0664 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, StyledOcticon, Button, Box, Heading, Link, Text, StateLabel, BranchName} from '..' +import {Avatar, Octicon, 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 new file mode 100644 index 00000000000..52a1d7476ec --- /dev/null +++ b/src/__tests__/Octicon.test.tsx @@ -0,0 +1,25 @@ +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 new file mode 100644 index 00000000000..4fe6dfaf29e --- /dev/null +++ b/src/__tests__/Octicon.types.test.tsx @@ -0,0 +1,12 @@ +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 new file mode 100644 index 00000000000..ef74ea46657 --- /dev/null +++ b/src/__tests__/__snapshots__/Octicon.test.tsx.snap @@ -0,0 +1,26 @@ +// 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 36c09cae9ae..a0fbe241750 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -39,6 +39,7 @@ 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 bef4ec1a761..8764123c07a 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 StyledOcticon from '../../StyledOcticon' +import Octicon from '../../Octicon' 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 82d6f869096..83075c5d355 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 StyledOcticon from '../../StyledOcticon' +import Octicon from '../../Octicon' 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 327d04567ae..649faf74565 100644 --- a/src/index.ts +++ b/src/index.ts @@ -117,6 +117,8 @@ 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'