From c39f1a64f0d057f106a674f580078818a0f9bd57 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:23:25 -0700 Subject: [PATCH 01/37] change version --- docs/package.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index 86ae05a85e0..59e187bb225 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@primer/gatsby-theme-doctocat": "^0.20.0", - "@primer/octicons-react": "^9.2.0", + "@primer/octicons-v2-react": "0.0.0-be2ea3b", "@styled-system/prop-types": "^5.1.0", "@styled-system/theme-get": "^5.1.0", "gatsby": "^2.17.0", diff --git a/package.json b/package.json index c3d23517c5c..abfcdcb32af 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "author": "GitHub, Inc.", "license": "MIT", "dependencies": { - "@primer/octicons-react": "^9.2.0", + "@primer/octicons-v2-react": "0.0.0-be2ea3b", "@reach/dialog": "0.3.0", "@styled-system/prop-types": "5.1.2", "@styled-system/props": "5.1.4", From c8c2f3ceccd9d785cc1d180007c1c0f52eb9fbc8 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:23:39 -0700 Subject: [PATCH 02/37] update imports --- .../gatsby-theme-doctocat/live-code-scope.js | 43 +++++++++---------- src/CircleBadge.js | 3 +- src/Dialog.js | 2 +- src/SelectMenu/SelectMenuItem.js | 2 +- src/StateLabel.js | 2 +- yarn.lock | 12 +++--- 6 files changed, 30 insertions(+), 34 deletions(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 0e9897780b6..c69d8e00315 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -1,32 +1,31 @@ import * as primerComponents from '@primer/components' import * as doctocatComponents from '@primer/gatsby-theme-doctocat' import Octicon, { - Check, - Zap, - X, - Search, - PrimitiveDot, - Octoface, - Person, - Mail, - GitCommit, - Flame -} from '@primer/octicons-react' + CheckIcon, + ZapIcon, + XIcon, + SearchIcon, + PrimitiveDotIcon, + OctofaceIcon, + PersonIcon, + MailIcon, + GitCommitIcon, + FlameIcon +} from '@primer/octicons-v2-react' import State from '../../../components/State' export default { ...primerComponents, ...doctocatComponents, State, - Octicon, - Check, - Search, - Zap, - X, - PrimitiveDot, - Octoface, - Person, - Mail, - GitCommit, - Flame + CheckIcon, + SearchIcon, + ZapIcon, + XIcon, + PrimitiveDotIcon, + OctofaceIcon, + PersonIcon, + MailIcon, + GitCommitIcon, + FlameIcon } diff --git a/src/CircleBadge.js b/src/CircleBadge.js index 7529eebf7e8..d3ac7f4ba7a 100644 --- a/src/CircleBadge.js +++ b/src/CircleBadge.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import Octicon from '@primer/octicons-react' import {COMMON, get} from './constants' import isNumeric from './utils/isNumeric' import theme from './theme' @@ -29,7 +28,7 @@ const CircleBadge = styled.div` ${COMMON} ${sizeStyles}; ` -const Icon = styled(Octicon)` +const Icon = styled.span` max-width: 60% !important; height: auto !important; max-height: 55% !important; diff --git a/src/Dialog.js b/src/Dialog.js index b00d4c46ad1..f697c83ab3b 100644 --- a/src/Dialog.js +++ b/src/Dialog.js @@ -5,7 +5,7 @@ import styled, {createGlobalStyle} from 'styled-components' import PropTypes from 'prop-types' import {space, color} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' -import {X} from '@primer/octicons-react' +import {X} from '@primer/octicons-v2-react' import StyledOcticon from './StyledOcticon' import {LAYOUT} from './constants' import theme from './theme' diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index cbd293bae71..20a02cb4893 100644 --- a/src/SelectMenu/SelectMenuItem.js +++ b/src/SelectMenu/SelectMenuItem.js @@ -1,7 +1,7 @@ import React, {useContext} from 'react' import PropTypes from 'prop-types' import styled, {css} from 'styled-components' -import {Check} from '@primer/octicons-react' +import {Check} from '@primer/octicons-v2-react' import {MenuContext} from './SelectMenuContext' import {COMMON, get} from '../constants' import StyledOcticon from '../StyledOcticon' diff --git a/src/StateLabel.js b/src/StateLabel.js index bd0bda8baae..27b8404a516 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octicons-react' +import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octicons-v2-react' import theme, {colors} from './theme' import {COMMON, get} from './constants' import StyledOcticon from './StyledOcticon' diff --git a/yarn.lock b/yarn.lock index cec80e1527a..0352418c689 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1975,12 +1975,10 @@ "@nodelib/fs.scandir" "2.1.3" fastq "^1.6.0" -"@primer/octicons-react@^9.2.0": - version "9.3.1" - resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.3.1.tgz#f38812d387373383d40bb490b56d04eaddfbd5fe" - integrity sha512-UOxcHuGAJ4YvmWodrgBnx44z/bPiD2C/TD7HlOB3BvvT9ozAOwoEm7lKKQqPo9SeDLu73ZsfbFl1AvnBuspzmQ== - dependencies: - prop-types "^15.6.1" +"@primer/octicons-v2-react@0.0.0-be2ea3b": + version "0.0.0-be2ea3b" + resolved "https://registry.yarnpkg.com/@primer/octicons-v2-react/-/octicons-v2-react-0.0.0-be2ea3b.tgz#bafb74fa802ca6e677d949741c648e49dac3bbf7" + integrity sha512-SaSOVzQWrCE8nka0eOVcZOLoifl7kiq4LRJZUWanrXAAs+SsN5D5jJhBqLFYqPv91vwW7HIfupT89YOMxbOHdw== "@reach/component-component@^0.3.0": version "0.3.0" @@ -8718,7 +8716,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== From 182f3a68be0bda98966773511a0e41c44c9ef5ab Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:24:28 -0700 Subject: [PATCH 03/37] refactor CircleOcticon --- src/CircleOcticon.js | 7 +++---- src/__tests__/CircleOcticon.js | 4 ++-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index e5bddbe059e..b7244ddcefe 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -1,17 +1,16 @@ import React from 'react' import PropTypes from 'prop-types' -import Octicon from '@primer/octicons-react' import Flex from './Flex' import theme from './theme' import BorderBox from './BorderBox' function CircleOcticon(props) { const {size, as} = props - const {icon, bg, as: asProp, ...rest} = props + const {icon: Icon, bg, as: asProp, ...rest} = props return ( - + ) @@ -25,7 +24,7 @@ CircleOcticon.defaultProps = { CircleOcticon.propTypes = { ...Flex.propTypes, - icon: Octicon.propTypes.icon, + icon: PropTypes.elementType, size: PropTypes.number, theme: PropTypes.object } diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.js index bcda6cb756d..b15360ec535 100644 --- a/src/__tests__/CircleOcticon.js +++ b/src/__tests__/CircleOcticon.js @@ -1,5 +1,5 @@ import React from 'react' -import {Check} from '@primer/octicons-react' +import {CheckIcon} from '@primer/octicons-v2-react' import {colors} from '../theme' import CircleOcticon from '../CircleOcticon' import {render} from '../utils/testing' @@ -16,7 +16,7 @@ describe('CircleOcticon', () => { }) it('should have no axe violations', async () => { - const {container} = HTMLRender() + const {container} = HTMLRender() const results = await axe(container) expect(results).toHaveNoViolations() cleanup() From 28cf692f589066462bbbeacb50f75c5b29386669 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:25:17 -0700 Subject: [PATCH 04/37] Refactor Dialog --- src/Dialog.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Dialog.js b/src/Dialog.js index f697c83ab3b..03647ac7f93 100644 --- a/src/Dialog.js +++ b/src/Dialog.js @@ -5,8 +5,7 @@ import styled, {createGlobalStyle} from 'styled-components' import PropTypes from 'prop-types' import {space, color} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' -import {X} from '@primer/octicons-v2-react' -import StyledOcticon from './StyledOcticon' +import {XIcon} from '@primer/octicons-v2-react' import {LAYOUT} from './constants' import theme from './theme' import Text from './Text' @@ -82,7 +81,7 @@ const Dialog = ({children, ...props}) => { <> - + {children} From 35e8e4b7ac173f12da0b428da93be2f88703ae02 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:26:24 -0700 Subject: [PATCH 05/37] refactor StateLabel --- src/StateLabel.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/StateLabel.js b/src/StateLabel.js index 27b8404a516..c7d15436e21 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octicons-v2-react' +import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon} from '@primer/octicons-v2-react' import theme, {colors} from './theme' import {COMMON, get} from './constants' import StyledOcticon from './StyledOcticon' @@ -16,11 +16,11 @@ const statusMap = { } const octiconMap = { - issueOpened: IssueOpened, - pullOpened: GitPullRequest, - issueClosed: IssueClosed, - pullClosed: GitPullRequest, - pullMerged: GitMerge + issueOpened: IssueOpenedIcon, + pullOpened: GitPullRequestIcon, + issueClosed: IssueClosedIcon, + pullClosed: GitPullRequestIcon, + pullMerged: GitMergeIcon } function StateLabelBase({className, status, small = false, children}) { From 3f381bffcc7068280a6c02c75e35d057f6e90421 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:27:37 -0700 Subject: [PATCH 06/37] refactor StyledOcticon (temporary) just renders a span now --- src/StyledOcticon.js | 3 +-- src/__tests__/StyledOcticon.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js index a07450ceeb9..66657af7d1d 100644 --- a/src/StyledOcticon.js +++ b/src/StyledOcticon.js @@ -1,10 +1,9 @@ -import Octicon from '@primer/octicons-react' import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON} from './constants' import theme from './theme' -const StyledOcticon = styled(Octicon)(COMMON) +const StyledOcticon = styled.span(COMMON) StyledOcticon.defaultProps = { theme diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js index 9cd45eba9a3..2449f706ef9 100644 --- a/src/__tests__/StyledOcticon.js +++ b/src/__tests__/StyledOcticon.js @@ -1,5 +1,5 @@ import React from 'react' -import {X} from '@primer/octicons-react' +import {XIcon} from '@primer/octicons-v2-react' import StyledOcticon from '../StyledOcticon' import {render} from '../utils/testing' import {COMMON} from '../constants' @@ -14,7 +14,7 @@ describe('StyledOcticon', () => { }) it('should have no axe violations', async () => { - const {container} = HTMLRender() + const {container} = HTMLRender() const results = await axe(container) expect(results).toHaveNoViolations() cleanup() From 6df211ca82ecb31229d0ddf54c049a817a2e69b6 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:28:26 -0700 Subject: [PATCH 07/37] Refactor SelectMenu.Item --- src/SelectMenu/SelectMenuItem.js | 4 ++-- src/__tests__/CircleOcticon.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index 20a02cb4893..5d22c7d6d36 100644 --- a/src/SelectMenu/SelectMenuItem.js +++ b/src/SelectMenu/SelectMenuItem.js @@ -1,7 +1,7 @@ import React, {useContext} from 'react' import PropTypes from 'prop-types' import styled, {css} from 'styled-components' -import {Check} from '@primer/octicons-v2-react' +import {CheckIcon} from '@primer/octicons-v2-react' import {MenuContext} from './SelectMenuContext' import {COMMON, get} from '../constants' import StyledOcticon from '../StyledOcticon' @@ -111,7 +111,7 @@ const SelectMenuItem = ({children, selected, theme, onClick, as, ...rest}) => { } return ( - + {children} ) diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.js index b15360ec535..a476bc7abe2 100644 --- a/src/__tests__/CircleOcticon.js +++ b/src/__tests__/CircleOcticon.js @@ -27,20 +27,20 @@ describe('CircleOcticon', () => { }) it('renders {borderRadius: 50%}', () => { - expect(render()).toHaveStyleRule('border-radius', '50%') + expect(render()).toHaveStyleRule('border-radius', '50%') }) it('respects the bg prop', () => { - expect(render()).toHaveStyleRule('background-color', colors.red[5]) + expect(render()).toHaveStyleRule('background-color', colors.red[5]) }) it('has a default size', () => { - const result = render() + const result = render() expect(result).toHaveStyleRule('width', '32px') expect(result).toHaveStyleRule('height', '32px') }) it('respects the "as" prop', () => { - expect(render().type).toEqual('span') + expect(render().type).toEqual('span') }) }) From 5a2ac5c0919bdec7b9dff8245240ec749043fbab Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:32:55 -0700 Subject: [PATCH 08/37] add Icon suffix --- docs/content/CircleBadge.md | 2 +- docs/content/CircleOcticon.md | 2 +- docs/content/Dialog.md | 2 +- docs/content/FilteredSearch.md | 2 +- docs/content/SideNav.md | 10 +++++----- docs/content/SubNav.md | 4 ++-- docs/content/TextInput.md | 2 +- docs/content/Timeline.md | 20 +++++++++---------- .../gatsby-theme-doctocat/live-code-scope.js | 2 +- src/TextInput.js | 4 ++-- src/__tests__/CircleOcticon.js | 2 +- src/__tests__/StyledOcticon.js | 2 +- 12 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/content/CircleBadge.md b/docs/content/CircleBadge.md index 4c6fe59b44c..c2220e505d1 100644 --- a/docs/content/CircleBadge.md +++ b/docs/content/CircleBadge.md @@ -9,7 +9,7 @@ Use CircleBadge to visually connect logos of third party services like in market ```jsx live - + ``` diff --git a/docs/content/CircleOcticon.md b/docs/content/CircleOcticon.md index fc576896773..15acafd2495 100644 --- a/docs/content/CircleOcticon.md +++ b/docs/content/CircleOcticon.md @@ -8,7 +8,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m ## Default example ```jsx live - + ``` ## System props diff --git a/docs/content/Dialog.md b/docs/content/Dialog.md index 7884eb65d36..02e473c49d3 100644 --- a/docs/content/Dialog.md +++ b/docs/content/Dialog.md @@ -33,7 +33,7 @@ You can also pass any non-text content into the header: setIsOpen(false)}> - + Some content diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md index 471c706f36d..c9062483611 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -16,7 +16,7 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side Item 3 - + ``` diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 61cc1994180..8e94755fe85 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -43,12 +43,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 @@ -96,11 +96,11 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props ```jsx live - + Account - + Profile @@ -117,7 +117,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props - + Emails diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md index 232524fac49..153ed2d2bbf 100644 --- a/docs/content/SubNav.md +++ b/docs/content/SubNav.md @@ -37,7 +37,7 @@ This ensures that the NavLink gets `activeClassName='selected'` Support - + ``` @@ -59,7 +59,7 @@ This ensures that the NavLink gets `activeClassName='selected'` - + diff --git a/docs/content/TextInput.md b/docs/content/TextInput.md index 5207883add2..faa2dc926af 100644 --- a/docs/content/TextInput.md +++ b/docs/content/TextInput.md @@ -10,7 +10,7 @@ TextInput is a form component to add default styling to the native text input. ```jsx live - + ``` ## System props diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index 83e882fcc44..a326b6de490 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -10,7 +10,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con - + @@ -35,7 +35,7 @@ The default Timeline.Badge color is dark text on a light grey background. - + Default badge color @@ -51,25 +51,25 @@ of the child `StyledOcticon` if necessary. - + Red background used when closed events occur - + Green background when opened or passed events occur - + Purple background used when pull requests are merged - + Blue background to indicate new events below @@ -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 - + Red background used when closed events occur - + Green background when opened or passed events occur diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index c69d8e00315..3d5eaea2c06 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -1,6 +1,6 @@ import * as primerComponents from '@primer/components' import * as doctocatComponents from '@primer/gatsby-theme-doctocat' -import Octicon, { +import { CheckIcon, ZapIcon, XIcon, diff --git a/src/TextInput.js b/src/TextInput.js index d1742652519..add3adf3485 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -4,7 +4,7 @@ import classnames from 'classnames' import systemPropTypes from '@styled-system/prop-types' import {omit, pick} from '@styled-system/props' import styled, {css} from 'styled-components' -import Octicon from './StyledOcticon' +import StyleOcticon from './StyledOcticon' import {variant, width, minWidth, maxWidth} from 'styled-system' import {COMMON, get} from './constants' import theme from './theme' @@ -41,7 +41,7 @@ const TextInput = React.forwardRef(({icon, className, block, disabled, ...rest}, disabled={disabled} {...wrapperProps} > - {icon && } + {icon && } ) diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.js index a476bc7abe2..79bd4604b63 100644 --- a/src/__tests__/CircleOcticon.js +++ b/src/__tests__/CircleOcticon.js @@ -10,7 +10,7 @@ expect.extend(toHaveNoViolations) describe('CircleOcticon', () => { it('renders a
with width and height', () => { - const result = render() + const result = render() expect(result).toHaveStyleRule('width', '10px') expect(result).toHaveStyleRule('height', '10px') }) diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js index 2449f706ef9..35732f284b3 100644 --- a/src/__tests__/StyledOcticon.js +++ b/src/__tests__/StyledOcticon.js @@ -21,7 +21,7 @@ describe('StyledOcticon', () => { }) it('matches the snapshot', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it.skip('has default theme', () => { From 9a07f0009d00c9d1a40a94a4c7821cfb5240cc27 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:37:09 -0700 Subject: [PATCH 09/37] Update yarn.lock --- docs/yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/yarn.lock b/docs/yarn.lock index b512000106d..a6861729872 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1302,6 +1302,11 @@ dependencies: prop-types "^15.6.1" +"@primer/octicons-v2-react@0.0.0-be2ea3b": + version "0.0.0-be2ea3b" + resolved "https://registry.yarnpkg.com/@primer/octicons-v2-react/-/octicons-v2-react-0.0.0-be2ea3b.tgz#bafb74fa802ca6e677d949741c648e49dac3bbf7" + integrity sha512-SaSOVzQWrCE8nka0eOVcZOLoifl7kiq4LRJZUWanrXAAs+SsN5D5jJhBqLFYqPv91vwW7HIfupT89YOMxbOHdw== + "@reach/component-component@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5" From c3e3cebe6fd3849a56466a30651bd9717d3d3f73 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:42:06 -0700 Subject: [PATCH 10/37] lint --- src/CircleOcticon.js | 2 +- src/Dialog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index b7244ddcefe..14826ae916f 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -10,7 +10,7 @@ function CircleOcticon(props) { return ( - + ) diff --git a/src/Dialog.js b/src/Dialog.js index 03647ac7f93..68338e350ff 100644 --- a/src/Dialog.js +++ b/src/Dialog.js @@ -81,7 +81,7 @@ const Dialog = ({children, ...props}) => { <> - + {children} From 24251ab35797b9abd9e10db2eb4d89675f602329 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:44:00 -0700 Subject: [PATCH 11/37] Update StyledOcticon.js --- src/StyledOcticon.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js index 66657af7d1d..c510abf3603 100644 --- a/src/StyledOcticon.js +++ b/src/StyledOcticon.js @@ -3,7 +3,13 @@ import styled from 'styled-components' import {COMMON} from './constants' import theme from './theme' -const StyledOcticon = styled.span(COMMON) +const Wrapper = styled.span(COMMON) + +const StyledOcticon = ({icon: Icon, rest}) => { + + + +} StyledOcticon.defaultProps = { theme From 7dd72affb6db71a084f1dd55ec853c9c305136fe Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 13:51:56 -0700 Subject: [PATCH 12/37] update snaps --- src/StyledOcticon.js | 9 +- .../__snapshots__/StateLabel.js.snap | 138 +++++++++--------- .../__snapshots__/StyledOcticon.js.snap | 40 ++--- 3 files changed, 97 insertions(+), 90 deletions(-) diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js index c510abf3603..fc654deb607 100644 --- a/src/StyledOcticon.js +++ b/src/StyledOcticon.js @@ -1,3 +1,4 @@ +import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON} from './constants' @@ -6,9 +7,11 @@ import theme from './theme' const Wrapper = styled.span(COMMON) const StyledOcticon = ({icon: Icon, rest}) => { - - - + return ( + + + + ) } StyledOcticon.defaultProps = { diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.js.snap index 708477ab03c..739ddab5dab 100644 --- a/src/__tests__/__snapshots__/StateLabel.js.snap +++ b/src/__tests__/__snapshots__/StateLabel.js.snap @@ -78,10 +78,6 @@ exports[`StateLabel respects the small flag 2`] = ` `; exports[`StateLabel respects the status prop 1`] = ` -.c1 { - margin-right: 4px; -} - .c0 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -104,35 +100,35 @@ exports[`StateLabel respects the status prop 1`] = ` - + `; exports[`StateLabel respects the status prop 2`] = ` -.c1 { - margin-right: 4px; -} - .c0 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -155,35 +151,35 @@ exports[`StateLabel respects the status prop 2`] = ` - + `; exports[`StateLabel respects the status prop 3`] = ` -.c1 { - margin-right: 4px; -} - .c0 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -206,26 +202,30 @@ exports[`StateLabel respects the status prop 3`] = ` - + `; diff --git a/src/__tests__/__snapshots__/StyledOcticon.js.snap b/src/__tests__/__snapshots__/StyledOcticon.js.snap index 84cf6ae881f..50c99b460e7 100644 --- a/src/__tests__/__snapshots__/StyledOcticon.js.snap +++ b/src/__tests__/__snapshots__/StyledOcticon.js.snap @@ -1,25 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`StyledOcticon matches the snapshot 1`] = ` - + `; From 56d353545885844689c1359fcbbf078a49c15c1b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 14:05:54 -0700 Subject: [PATCH 13/37] remove missing icons --- docs/content/CircleBadge.md | 2 +- docs/content/Dialog.md | 2 +- docs/content/SideNav.md | 4 ++-- .../@primer/gatsby-theme-doctocat/live-code-scope.js | 10 ++++------ src/CircleBadge.js | 11 ++++++++++- 5 files changed, 18 insertions(+), 11 deletions(-) diff --git a/docs/content/CircleBadge.md b/docs/content/CircleBadge.md index c2220e505d1..34733dabd9a 100644 --- a/docs/content/CircleBadge.md +++ b/docs/content/CircleBadge.md @@ -9,7 +9,7 @@ Use CircleBadge to visually connect logos of third party services like in market ```jsx live - + ``` diff --git a/docs/content/Dialog.md b/docs/content/Dialog.md index 02e473c49d3..84a22854d72 100644 --- a/docs/content/Dialog.md +++ b/docs/content/Dialog.md @@ -33,7 +33,7 @@ You can also pass any non-text content into the header: setIsOpen(false)}> - + Some content diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 8e94755fe85..b6dac454bc0 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -48,7 +48,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros With a status icon - + With a label @@ -100,7 +100,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props Account - + Profile diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 3d5eaea2c06..564c6d8c639 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -2,14 +2,13 @@ import * as primerComponents from '@primer/components' import * as doctocatComponents from '@primer/gatsby-theme-doctocat' import { CheckIcon, - ZapIcon, XIcon, SearchIcon, - PrimitiveDotIcon, - OctofaceIcon, + DotIcon, PersonIcon, MailIcon, GitCommitIcon, + AlertIcon, FlameIcon } from '@primer/octicons-v2-react' import State from '../../../components/State' @@ -20,10 +19,9 @@ export default { State, CheckIcon, SearchIcon, - ZapIcon, XIcon, - PrimitiveDotIcon, - OctofaceIcon, + DotIcon, + AlertIcon, PersonIcon, MailIcon, GitCommitIcon, diff --git a/src/CircleBadge.js b/src/CircleBadge.js index d3ac7f4ba7a..19bc9092600 100644 --- a/src/CircleBadge.js +++ b/src/CircleBadge.js @@ -1,3 +1,4 @@ +import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON, get} from './constants' @@ -28,12 +29,20 @@ const CircleBadge = styled.div` ${COMMON} ${sizeStyles}; ` -const Icon = styled.span` +const IconWrapper = styled.span` max-width: 60% !important; height: auto !important; max-height: 55% !important; ${COMMON}; ` +const Icon = ({icon: IconComponent}) => { + return ( + + + + ) +} + CircleBadge.Icon = Icon CircleBadge.defaultProps = { From a920f10d156f387a265a0fe32044b25a9f015055 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 22 Apr 2020 14:09:14 -0700 Subject: [PATCH 14/37] lint fix --- src/CircleBadge.js | 2 +- src/StyledOcticon.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/CircleBadge.js b/src/CircleBadge.js index 19bc9092600..f7e145f8b20 100644 --- a/src/CircleBadge.js +++ b/src/CircleBadge.js @@ -38,7 +38,7 @@ const IconWrapper = styled.span` const Icon = ({icon: IconComponent}) => { return ( - + ) } diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js index fc654deb607..b1f1b7126d5 100644 --- a/src/StyledOcticon.js +++ b/src/StyledOcticon.js @@ -9,7 +9,7 @@ const Wrapper = styled.span(COMMON) const StyledOcticon = ({icon: Icon, rest}) => { return ( - + ) } From f3ad7e2deb01c9003352e146be2d3448b4b62d8f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 11 May 2020 09:40:28 -0700 Subject: [PATCH 15/37] Use @primer/styled-octicons package --- docs/content/Dialog.md | 2 +- docs/content/SideNav.md | 30 ++++---- docs/content/Timeline.md | 20 ++--- docs/package.json | 4 +- .../gatsby-theme-doctocat/live-code-scope.js | 24 +----- docs/yarn.lock | 22 +++--- package.json | 1 + src/Dialog.js | 2 +- src/SelectMenu/SelectMenuItem.js | 9 +-- src/StateLabel.js | 6 +- src/TextInput.js | 6 +- src/__tests__/CircleOcticon.js | 2 +- yarn.lock | 76 +++++++++++++++++++ 13 files changed, 130 insertions(+), 74 deletions(-) diff --git a/docs/content/Dialog.md b/docs/content/Dialog.md index 84a22854d72..578404e9caa 100644 --- a/docs/content/Dialog.md +++ b/docs/content/Dialog.md @@ -33,7 +33,7 @@ You can also pass any non-text content into the header: setIsOpen(false)}> - + Some content diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index b6dac454bc0..3bfd91c8957 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -35,31 +35,29 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros Text Only - + With an avatar - + With an Octicon With a status icon - + With a label - + With a counter 16 - A heading + + A heading + and some more content @@ -70,9 +68,11 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more lightweight version that has items with no borders and are more condensed. ```jsx live - - - Menu + + + + Menu + @@ -96,11 +96,11 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props ```jsx live - + Account - + Profile @@ -117,7 +117,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props - + Emails diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index a326b6de490..6b6001297a6 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -10,7 +10,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con - + @@ -35,7 +35,7 @@ The default Timeline.Badge color is dark text on a light grey background. - + Default badge color @@ -51,25 +51,25 @@ of the child `StyledOcticon` if necessary. - + Red background used when closed events occur - + Green background when opened or passed events occur - + Purple background used when pull requests are merged - + Blue background to indicate new events below @@ -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 - + Red background used when closed events occur - + Green background when opened or passed events occur diff --git a/docs/package.json b/docs/package.json index 59e187bb225..24084c04e76 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,7 @@ "node": ">= 10.x" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^0.20.0", + "@primer/gatsby-theme-doctocat": "0.0.0-66d49bc", "@primer/octicons-v2-react": "0.0.0-be2ea3b", "@styled-system/prop-types": "^5.1.0", "@styled-system/theme-get": "^5.1.0", @@ -25,4 +25,4 @@ "devDependencies": { "minipass": "^2.9.0" } -} \ No newline at end of file +} diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 564c6d8c639..0c33e9a153b 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -1,29 +1,11 @@ import * as primerComponents from '@primer/components' import * as doctocatComponents from '@primer/gatsby-theme-doctocat' -import { - CheckIcon, - XIcon, - SearchIcon, - DotIcon, - PersonIcon, - MailIcon, - GitCommitIcon, - AlertIcon, - FlameIcon -} from '@primer/octicons-v2-react' +import * as octiconComponents from '@primer/styled-octicons' import State from '../../../components/State' export default { ...primerComponents, ...doctocatComponents, - State, - CheckIcon, - SearchIcon, - XIcon, - DotIcon, - AlertIcon, - PersonIcon, - MailIcon, - GitCommitIcon, - FlameIcon + ...octiconComponents, + State } diff --git a/docs/yarn.lock b/docs/yarn.lock index a6861729872..1d9c6ae2480 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1234,17 +1234,17 @@ react-is "16.10.2" styled-system "5.1.2" -"@primer/gatsby-theme-doctocat@^0.20.0": - version "0.20.0" - resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.20.0.tgz#95f7d965ecfa7199ad0e022b1029b9c6b2a793ff" - integrity sha512-ltCnDFRT+X3EIT5jI8jsGKeVx7RZTJpqC9Ms1AbtTZ7V6aJ6ocHbY0kSYqWmGu8Juaqy0u3aocoG8u4P66q7QQ== +"@primer/gatsby-theme-doctocat@0.0.0-66d49bc": + version "0.0.0-66d49bc" + resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.0.0-66d49bc.tgz#972e177eb28d1af937b9388ef59e4abb6305a4ac" + integrity sha512-Yi7XCSKN3d/YU2AbbgBRBdiiMHff6MORGyuLr+Ln1ZHL9GgG6nr5IrRWDOalNcCbzc/VrrF8apghvCwGs/Z6EA== dependencies: "@babel/preset-env" "^7.5.5" "@babel/preset-react" "^7.0.0" "@mdx-js/mdx" "^1.0.21" "@mdx-js/react" "^1.0.21" "@primer/components" "^16.1.0" - "@primer/octicons-react" "^9.1.1" + "@primer/styled-octicons" "^0.0.0-0ccdd71" "@styled-system/theme-get" "^5.0.12" "@testing-library/jest-dom" "^4.1.0" "@testing-library/react" "^9.1.3" @@ -1288,13 +1288,6 @@ styled-components "^4.3.2" styled-system "^5.0.18" -"@primer/octicons-react@^9.1.1": - version "9.4.0" - resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.4.0.tgz#19f6ed2eab82e78c2762315d19c7ce1677fcf4ed" - integrity sha512-TAPjzQaIrPqI5TpxNKkBTxS7b8Y1v7iMuiN5ZshhSp9GHbdymWKtCXRDk13lo6woDeSn/8tIdZTSerTR3c0bQA== - dependencies: - prop-types "^15.6.1" - "@primer/octicons-react@^9.2.0": version "9.3.1" resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.3.1.tgz#f38812d387373383d40bb490b56d04eaddfbd5fe" @@ -1307,6 +1300,11 @@ resolved "https://registry.yarnpkg.com/@primer/octicons-v2-react/-/octicons-v2-react-0.0.0-be2ea3b.tgz#bafb74fa802ca6e677d949741c648e49dac3bbf7" integrity sha512-SaSOVzQWrCE8nka0eOVcZOLoifl7kiq4LRJZUWanrXAAs+SsN5D5jJhBqLFYqPv91vwW7HIfupT89YOMxbOHdw== +"@primer/styled-octicons@^0.0.0-0ccdd71": + version "0.0.0-44a8bc7" + resolved "https://registry.yarnpkg.com/@primer/styled-octicons/-/styled-octicons-0.0.0-44a8bc7.tgz#0f509a21f9dce2fdffa431aa1fc0066e75f3b1c9" + integrity sha512-Tkse8+XzDLoyWi6R9wUikqM01FomLGJOAvZYPQfXu5jsFcjw5l67LWWJIHLRIre/RED0RuAoPrzR52SpJmKlAg== + "@reach/component-component@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5" diff --git a/package.json b/package.json index abfcdcb32af..2295e32e983 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "license": "MIT", "dependencies": { "@primer/octicons-v2-react": "0.0.0-be2ea3b", + "@primer/styled-octicons": "0.0.0-35511fe", "@reach/dialog": "0.3.0", "@styled-system/prop-types": "5.1.2", "@styled-system/props": "5.1.4", diff --git a/src/Dialog.js b/src/Dialog.js index 68338e350ff..6a0760ad536 100644 --- a/src/Dialog.js +++ b/src/Dialog.js @@ -5,7 +5,7 @@ import styled, {createGlobalStyle} from 'styled-components' import PropTypes from 'prop-types' import {space, color} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' -import {XIcon} from '@primer/octicons-v2-react' +import {XIcon} from '@primer/styled-octicons' import {LAYOUT} from './constants' import theme from './theme' import Text from './Text' diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index 5d22c7d6d36..010a37aa181 100644 --- a/src/SelectMenu/SelectMenuItem.js +++ b/src/SelectMenu/SelectMenuItem.js @@ -1,11 +1,10 @@ -import React, {useContext} from 'react' +import {CheckIcon} from '@primer/styled-octicons' import PropTypes from 'prop-types' +import React, {useContext} from 'react' import styled, {css} from 'styled-components' -import {CheckIcon} from '@primer/octicons-v2-react' -import {MenuContext} from './SelectMenuContext' import {COMMON, get} from '../constants' -import StyledOcticon from '../StyledOcticon' import theme from '../theme' +import {MenuContext} from './SelectMenuContext' export const listItemStyles = css` display: flex; @@ -111,7 +110,7 @@ const SelectMenuItem = ({children, selected, theme, onClick, as, ...rest}) => { } return ( - + {children} ) diff --git a/src/StateLabel.js b/src/StateLabel.js index c7d15436e21..24aeafa1dfb 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -1,10 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon} from '@primer/octicons-v2-react' +import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon} from '@primer/styled-octicons' import theme, {colors} from './theme' import {COMMON, get} from './constants' -import StyledOcticon from './StyledOcticon' const statusMap = { issueClosed: colors.red[6], @@ -25,9 +24,10 @@ const octiconMap = { function StateLabelBase({className, status, small = false, children}) { const octiconProps = small ? {width: '1em'} : {} + const Icon = octiconMap[status] return ( - {status && } + {status && } {children} ) diff --git a/src/TextInput.js b/src/TextInput.js index add3adf3485..aca3d25c23e 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -27,7 +27,7 @@ const sizeVariants = variant({ }) // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input -const TextInput = React.forwardRef(({icon, className, block, disabled, ...rest}, ref) => { +const TextInput = React.forwardRef(({icon: Icon, className, block, disabled, ...rest}, ref) => { // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') const wrapperProps = pick(rest) @@ -35,13 +35,13 @@ const TextInput = React.forwardRef(({icon, className, block, disabled, ...rest}, return ( - {icon && } + {Icon && } ) diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.js index 79bd4604b63..d62cb58f704 100644 --- a/src/__tests__/CircleOcticon.js +++ b/src/__tests__/CircleOcticon.js @@ -1,5 +1,5 @@ import React from 'react' -import {CheckIcon} from '@primer/octicons-v2-react' +import {CheckIcon} from '@primer/styled-octicon' import {colors} from '../theme' import CircleOcticon from '../CircleOcticon' import {render} from '../utils/testing' diff --git a/yarn.lock b/yarn.lock index 0352418c689..a9551b4f720 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1980,6 +1980,17 @@ resolved "https://registry.yarnpkg.com/@primer/octicons-v2-react/-/octicons-v2-react-0.0.0-be2ea3b.tgz#bafb74fa802ca6e677d949741c648e49dac3bbf7" integrity sha512-SaSOVzQWrCE8nka0eOVcZOLoifl7kiq4LRJZUWanrXAAs+SsN5D5jJhBqLFYqPv91vwW7HIfupT89YOMxbOHdw== +"@primer/styled-octicons@0.0.0-35511fe": + version "0.0.0-35511fe" + resolved "https://registry.yarnpkg.com/@primer/styled-octicons/-/styled-octicons-0.0.0-35511fe.tgz#b8cc447c38656971397801b634b7ebdab4b10b76" + integrity sha512-qAJ8LqwVfPo/yRq/T7j9JVZ2h7M9iOu9JtLeNQsI5CHAIy8i06afa/eJx8egEw2Da5hwNJdb4VW9HJ4pXYyf5g== + dependencies: + "@styled-system/css" "^5.1.5" + "@styled-system/prop-types" "^5.1.5" + "@types/styled-system" "^5.1.9" + "@types/styled-system__css" "^5.0.8" + styled-system "^5.1.5" + "@reach/component-component@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5" @@ -2030,6 +2041,13 @@ dependencies: "@styled-system/core" "^5.1.2" +"@styled-system/border@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6" + integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A== + dependencies: + "@styled-system/core" "^5.1.2" + "@styled-system/color@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43" @@ -2049,6 +2067,11 @@ resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.4.tgz#fc51d0789a69b3831e00e6f8daf9f1d345eebdc3" integrity sha512-79IFT37Kxb6dlbx/0hwIGOakNHkK5oU3cMypGziShnEK8WMgK/+vuAi4MHO7uLI+FZ5U8MGYvGY9Gtk0mBzxSg== +"@styled-system/css@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc" + integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A== + "@styled-system/flexbox@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf" @@ -2084,6 +2107,13 @@ dependencies: prop-types "^15.7.2" +"@styled-system/prop-types@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/prop-types/-/prop-types-5.1.5.tgz#f813b78c583f9a3a9693d5eb185c2fd3dd0448a8" + integrity sha512-D/0d0ltp8QGhwrRifivQeIdoKkQDpFIGi98DXdpRXOaJStYXLx6aBSfS/YYIijbF1nZs1hWlAgXxYvDhCxHLSA== + dependencies: + prop-types "^15.7.2" + "@styled-system/props@5.1.4": version "5.1.4" resolved "https://registry.yarnpkg.com/@styled-system/props/-/props-5.1.4.tgz#a0b76bb3be64cb152db3db33a031f33a43977bab" @@ -2127,6 +2157,14 @@ "@styled-system/core" "^5.1.2" "@styled-system/css" "^5.1.4" +"@styled-system/variant@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd" + integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw== + dependencies: + "@styled-system/core" "^5.1.2" + "@styled-system/css" "^5.1.5" + "@testing-library/dom@^6.11.0": version "6.11.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.11.0.tgz#962a38f1a721fdb7c9e35e7579e33ff13a00eda4" @@ -2369,6 +2407,20 @@ dependencies: csstype "^2.6.4" +"@types/styled-system@^5.1.9": + version "5.1.9" + resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade" + integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ== + dependencies: + csstype "^2.6.9" + +"@types/styled-system__css@^5.0.8": + version "5.0.8" + resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.8.tgz#3886fc89e003aadda858349a5cf324fe54b09980" + integrity sha512-skv+daDje8vWQ8wnqVV0GCzgWVKx4gI9lJpAxWE77s52Ne6k/SCPP8HGE4BFbWDvK+qi5O3p89BGWVOQ1VHjMg== + dependencies: + csstype "^2.6.6" + "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0": version "6.11.1" resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.11.1.tgz#6058a6ac391db679f7c60dbb27b81f0620de2dd9" @@ -4144,6 +4196,11 @@ csstype@^2.2.0, csstype@^2.5.5, csstype@^2.6.4: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431" integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA== +csstype@^2.6.6, csstype@^2.6.9: + version "2.6.10" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" + integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== + current-git-branch@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/current-git-branch/-/current-git-branch-1.1.0.tgz#3730e71ee024ed27dab16d740e5b1ea4774fa49f" @@ -10310,6 +10367,25 @@ styled-system@^5.1.4: "@styled-system/variant" "^5.1.4" object-assign "^4.1.1" +styled-system@^5.1.5: + version "5.1.5" + resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e" + integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A== + dependencies: + "@styled-system/background" "^5.1.2" + "@styled-system/border" "^5.1.5" + "@styled-system/color" "^5.1.2" + "@styled-system/core" "^5.1.2" + "@styled-system/flexbox" "^5.1.2" + "@styled-system/grid" "^5.1.2" + "@styled-system/layout" "^5.1.2" + "@styled-system/position" "^5.1.2" + "@styled-system/shadow" "^5.1.2" + "@styled-system/space" "^5.1.2" + "@styled-system/typography" "^5.1.2" + "@styled-system/variant" "^5.1.5" + object-assign "^4.1.1" + stylis-rule-sheet@^0.0.10: version "0.0.10" resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" From c10093ccd64503ddf2e8e54c9c14774d230865e3 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 11 May 2020 09:54:24 -0700 Subject: [PATCH 16/37] Remove StyledOcticon --- docs/content/StyledOcticon.md | 28 ----------------- docs/content/Timeline.md | 3 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 -- index.d.ts | 12 +------- src/StyledOcticon.js | 26 ---------------- src/TextInput.js | 1 - src/__tests__/StyledOcticon.js | 30 ------------------- .../__snapshots__/StyledOcticon.js.snap | 29 ------------------ src/index.js | 1 - 9 files changed, 2 insertions(+), 130 deletions(-) delete mode 100644 docs/content/StyledOcticon.md delete mode 100644 src/StyledOcticon.js delete mode 100644 src/__tests__/StyledOcticon.js delete mode 100644 src/__tests__/__snapshots__/StyledOcticon.js.snap diff --git a/docs/content/StyledOcticon.md b/docs/content/StyledOcticon.md deleted file mode 100644 index 673fb1df5f0..00000000000 --- a/docs/content/StyledOcticon.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: StyledOcticon -tags: icon ---- - -StyledOcticon renders an [Octicon](https://octicons.github.com) with common system props, including `color`, margin, and padding. - -## Default example - -```jsx live - - -``` - -## System props - -StyledOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including: - -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| ariaLabel | String | | Specifies the `aria-label` attribute, which is read verbatim by screen readers | -| icon | Octicon | | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component | -| size | Number | 16 | Sets the uniform `width` and `height` of the SVG element | -| verticalAlign | String | `text-bottom` | Sets the `vertical-align` CSS property | diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index 6b6001297a6..e7184c84fb3 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -44,8 +44,7 @@ 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. +To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop of the icon if necessary. ```jsx live diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 29e1666c0d2..b61f4a4d374 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -76,8 +76,6 @@ url: /SideNav - title: StateLabel url: /StateLabel - - title: StyledOcticon - url: /StyledOcticon - title: SubNav url: /SubNav - title: TabNav diff --git a/index.d.ts b/index.d.ts index 309e1b315b7..6d02d9b9a76 100644 --- a/index.d.ts +++ b/index.d.ts @@ -150,13 +150,6 @@ declare module '@primer/components' { export const CircleOcticon: React.FunctionComponent - export interface StyledOcticonProps extends CommonProps { - size?: number - icon: React.ReactNode - } - - export const StyledOcticon: React.FunctionComponent - export interface DropdownProps extends DetailsProps {} export interface DropdownItemProps extends CommonProps, Omit, 'color'> {} @@ -593,10 +586,7 @@ declare module '@primer/components/src/CircleOcticon' { import {CircleOcticon} from '@primer/components' export default CircleOcticon } -declare module '@primer/components/src/StyledOcticon' { - import {StyledOcticon} from '@primer/components' - export default StyledOcticon -} + declare module '@primer/components/src/Dropdown' { import {Dropdown} from '@primer/components' export default Dropdown diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js deleted file mode 100644 index b1f1b7126d5..00000000000 --- a/src/StyledOcticon.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import {COMMON} from './constants' -import theme from './theme' - -const Wrapper = styled.span(COMMON) - -const StyledOcticon = ({icon: Icon, rest}) => { - return ( - - - - ) -} - -StyledOcticon.defaultProps = { - theme -} - -StyledOcticon.propTypes = { - ...COMMON.propTypes, - theme: PropTypes.object -} - -export default StyledOcticon diff --git a/src/TextInput.js b/src/TextInput.js index aca3d25c23e..db206374d1a 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -4,7 +4,6 @@ import classnames from 'classnames' import systemPropTypes from '@styled-system/prop-types' import {omit, pick} from '@styled-system/props' import styled, {css} from 'styled-components' -import StyleOcticon from './StyledOcticon' import {variant, width, minWidth, maxWidth} from 'styled-system' import {COMMON, get} from './constants' import theme from './theme' diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js deleted file mode 100644 index 35732f284b3..00000000000 --- a/src/__tests__/StyledOcticon.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import {XIcon} from '@primer/octicons-v2-react' -import StyledOcticon from '../StyledOcticon' -import {render} from '../utils/testing' -import {COMMON} from '../constants' -import {render as HTMLRender, cleanup} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' -import 'babel-polyfill' -expect.extend(toHaveNoViolations) - -describe('StyledOcticon', () => { - it('implements system props', () => { - expect(StyledOcticon).toImplementSystemProps(COMMON) - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - cleanup() - }) - - it('matches the snapshot', () => { - expect(render()).toMatchSnapshot() - }) - - it.skip('has default theme', () => { - expect(StyledOcticon).toSetDefaultTheme() - }) -}) diff --git a/src/__tests__/__snapshots__/StyledOcticon.js.snap b/src/__tests__/__snapshots__/StyledOcticon.js.snap deleted file mode 100644 index 50c99b460e7..00000000000 --- a/src/__tests__/__snapshots__/StyledOcticon.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StyledOcticon matches the snapshot 1`] = ` - - -`; diff --git a/src/index.js b/src/index.js index 8081a1fe0b2..7871d6dda1c 100644 --- a/src/index.js +++ b/src/index.js @@ -42,7 +42,6 @@ export {default as ProgressBar} from './ProgressBar' export {default as SelectMenu} from './SelectMenu' export {default as SideNav} from './SideNav' export {default as StateLabel} from './StateLabel' -export {default as StyledOcticon} from './StyledOcticon' export {default as SubNav} from './SubNav' export {default as TabNav} from './TabNav' export {default as TextInput} from './TextInput' From 15c7e840e3dd8d5876ecf5e127fa02913721f8a5 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 11 May 2020 09:55:23 -0700 Subject: [PATCH 17/37] Update StateLabel snapshot --- .../__snapshots__/StateLabel.js.snap | 138 +++++++++--------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.js.snap index 739ddab5dab..c46801df788 100644 --- a/src/__tests__/__snapshots__/StateLabel.js.snap +++ b/src/__tests__/__snapshots__/StateLabel.js.snap @@ -78,6 +78,10 @@ exports[`StateLabel respects the small flag 2`] = ` `; exports[`StateLabel respects the status prop 1`] = ` +.c1 { + margin-right: 4px; +} + .c0 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -100,35 +104,35 @@ exports[`StateLabel respects the status prop 1`] = ` - - + } + viewBox="0 0 16 16" + width={16} + /> `; exports[`StateLabel respects the status prop 2`] = ` +.c1 { + margin-right: 4px; +} + .c0 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -151,35 +155,35 @@ exports[`StateLabel respects the status prop 2`] = ` - - + } + viewBox="0 0 16 16" + width={16} + /> `; exports[`StateLabel respects the status prop 3`] = ` +.c1 { + margin-right: 4px; +} + .c0 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -202,30 +206,26 @@ exports[`StateLabel respects the status prop 3`] = ` - - + } + viewBox="0 0 16 16" + width={16} + /> `; From 5cb65aca3dac94d1b5c8d61837efdac6e278e746 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 11 May 2020 09:55:35 -0700 Subject: [PATCH 18/37] Fix import in CircleOcticon test --- src/__tests__/CircleOcticon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.js index d62cb58f704..379ca2f1c40 100644 --- a/src/__tests__/CircleOcticon.js +++ b/src/__tests__/CircleOcticon.js @@ -1,5 +1,5 @@ import React from 'react' -import {CheckIcon} from '@primer/styled-octicon' +import {CheckIcon} from '@primer/styled-octicons' import {colors} from '../theme' import CircleOcticon from '../CircleOcticon' import {render} from '../utils/testing' From d2b44848154cad8a3a6346406b864abbf25f1b32 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 11 May 2020 10:22:11 -0700 Subject: [PATCH 19/37] Update snapshots --- .../__snapshots__/CircleOcticon.js.snap | 22 +++--- .../__snapshots__/SelectMenu.js.snap | 72 +++++++++---------- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/__tests__/__snapshots__/CircleOcticon.js.snap b/src/__tests__/__snapshots__/CircleOcticon.js.snap index 4d1315f7db0..13a8b369fd9 100644 --- a/src/__tests__/__snapshots__/CircleOcticon.js.snap +++ b/src/__tests__/__snapshots__/CircleOcticon.js.snap @@ -44,25 +44,25 @@ exports[`CircleOcticon renders consistently 1`] = ` > + viewBox="0 0 16 16" + width={16} + />
`; diff --git a/src/__tests__/__snapshots__/SelectMenu.js.snap b/src/__tests__/__snapshots__/SelectMenu.js.snap index c8b29fbfa91..9aed905be1b 100644 --- a/src/__tests__/__snapshots__/SelectMenu.js.snap +++ b/src/__tests__/__snapshots__/SelectMenu.js.snap @@ -353,24 +353,24 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` + viewBox="0 0 16 16" + width={16} + /> Primer Components bugs