From ef13d8f7ce0dcb9029134b92546a2769cc0c4a95 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 12 May 2023 06:45:20 -0700 Subject: [PATCH] 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 * Update generated/components.json * test(vrt): update snapshots --------- Co-authored-by: radglob * 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 * 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 * 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 * 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 * Fix generated components. --------- Co-authored-by: radglob Co-authored-by: Matthew Costabile * 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 * 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 * NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127) * use useIsomorphicLayoutEffect * Create .changeset/fast-panthers-refuse.md --------- Co-authored-by: Josh Black * 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 * Update RelativeTime stories (#3136) * Update RelativeTime stories * Update generated/components.json --------- Co-authored-by: colebemis * 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] 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] 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](https://github.com/primer/eslint-plugin-primer-react/compare/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] * chore(eslint): remove unnecessary disable --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black * 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](https://github.com/styled-components/babel-plugin-styled-components/compare/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] * test(snapshots): update snapshots --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black * 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 * 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] Co-authored-by: radglob Co-authored-by: Matthew Costabile Co-authored-by: Josh Black Co-authored-by: Josh Black Co-authored-by: Siddharth Kshetrapal Co-authored-by: simurai Co-authored-by: simurai Co-authored-by: Cole Bemis Co-authored-by: colebemis 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 * 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 * 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] Co-authored-by: jonrohan Co-authored-by: Jeremy Neal Co-authored-by: radglob Co-authored-by: Matthew Costabile Co-authored-by: Josh Black Co-authored-by: Josh Black Co-authored-by: Siddharth Kshetrapal Co-authored-by: simurai Co-authored-by: simurai Co-authored-by: Cole Bemis Co-authored-by: colebemis Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josep Martins --- .changeset/swift-cows-rest.md | 5 + codemods/__tests__/removeSystemProps.js | 12 +- codemods/removeSystemProps.js | 2 +- docs/content/Flash.mdx | 2 +- docs/content/Header.mdx | 2 +- .../{StyledOcticon.mdx => Octicon.mdx} | 14 +-- docs/content/Timeline.mdx | 20 ++-- docs/content/TreeView.mdx | 6 +- docs/content/deprecated/SideNav.md | 10 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 4 +- docs/src/component-checklist.js | 8 +- docs/src/component-statuses.js | 4 +- generated/components.json | 107 +++++++++--------- src/CircleBadge/CircleBadge.docs.json | 8 +- src/CircleBadge/CircleBadge.tsx | 4 +- src/Dialog/Dialog.tsx | 4 +- src/Header/Header.stories.tsx | 6 +- src/NavList/NavList.tsx | 4 +- .../Octicon.docs.json} | 6 +- src/Octicon/Octicon.tsx | 18 +++ .../StyledOcticon.stories.tsx | 12 +- src/Octicon/index.ts | 1 + src/StateLabel/StateLabel.tsx | 4 +- src/StateLabel/__tests__/StateLabel.test.tsx | 2 +- src/StyledOcticon/StyledOcticon.tsx | 19 +--- src/Timeline/Timeline.features.stories.tsx | 14 +-- src/Timeline/Timeline.stories.tsx | 14 +-- src/TreeView/TreeView.features.stories.tsx | 20 ++-- src/TreeView/TreeView.stories.tsx | 8 +- .../UnderlineNav2.examples.stories.tsx | 4 +- src/__tests__/Octicon.test.tsx | 25 ++++ src/__tests__/Octicon.types.test.tsx | 12 ++ .../__snapshots__/Octicon.test.tsx.snap | 26 +++++ .../__snapshots__/exports.test.ts.snap | 1 + .../DropdownMenu/DropdownButton.tsx | 4 +- src/deprecated/SelectMenu/SelectMenuItem.tsx | 4 +- src/index.ts | 2 + 37 files changed, 245 insertions(+), 173 deletions(-) create mode 100644 .changeset/swift-cows-rest.md rename docs/content/{StyledOcticon.mdx => Octicon.mdx} (56%) rename src/{StyledOcticon/StyledOcticon.docs.json => Octicon/Octicon.docs.json} (95%) create mode 100644 src/Octicon/Octicon.tsx rename src/{StyledOcticon => Octicon}/StyledOcticon.stories.tsx (68%) create mode 100644 src/Octicon/index.ts create mode 100644 src/__tests__/Octicon.test.tsx create mode 100644 src/__tests__/Octicon.types.test.tsx create mode 100644 src/__tests__/__snapshots__/Octicon.test.tsx.snap 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 dc7c21cd3ff..11b9db27552 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1252,12 +1252,12 @@ { "name": "as", "type": "React.ElementType", - "defaultValue": "StyledOcticon" + "defaultValue": "Octicon" } ], "passthrough": { - "element": "StyledOcticon", - "url": "/StyledOcticon" + "element": "Octicon", + "url": "/Octicon" } } ] @@ -1905,7 +1905,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": [ @@ -2233,6 +2233,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", @@ -3889,55 +3933,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", @@ -4399,7 +4394,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": [ @@ -4701,7 +4696,7 @@ "stories": [ { "id": "components-treeview--default", - "code": "() => (\n \n)" + "code": "() => (\n \n)" }, { "id": "components-treeview-features--files", @@ -4709,7 +4704,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 8849f17a672..73279553337 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 adb8b68ac4e..25316a10a6f 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 - + @@ -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 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 335f542f443..7e0c5596576 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'