diff --git a/docs/content/CircleBadge.md b/docs/content/CircleBadge.md index 4c6fe59b44c..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/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..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/FilteredSearch.md b/docs/content/FilteredSearch.md index 1eb8e3a81f9..97bd4f9fffc 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -17,7 +17,7 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side Item 3 - + ``` diff --git a/docs/content/Flash.md b/docs/content/Flash.md index a799c7b1274..2ade391db0e 100644 --- a/docs/content/Flash.md +++ b/docs/content/Flash.md @@ -19,7 +19,7 @@ Flash components with icons inside of them will automatically set the correct co ```jsx live - + Success! ``` @@ -30,7 +30,7 @@ Flash components get `COMMON` system props. Read our [System Props](/system-prop ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| full | Boolean | | Creates a full width Flash component| -| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component | +| Name | Type | Default | Description | +| :------ | :------ | :-----: | :----------------------------------------------------------------------------------------------------------------------- | +| full | Boolean | | Creates a full width Flash component | +| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component | diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 40dc70e461b..00d62ba1c96 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 @@ -139,19 +139,19 @@ If using React Router, you can use the `as` prop to render the element as a `Nav ### SideNav -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | 'nav' | Sets the HTML tag for the component. | -| bordered | Boolean | false | Renders the component with a border. | -| variant | String | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). | +| Name | Type | Default | Description | +| :------- | :------ | :------: | :----------------------------------------------------------------------------- | +| as | String | 'nav' | Sets the HTML tag for the component. | +| bordered | Boolean | false | Renders the component with a border. | +| variant | String | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). | ### SideNav.Link -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | 'a' | Sets the HTML tag for the component. | -| href | String | | URL to be used for the Link | -| muted | Boolean | false | Uses light gray for Link color, and blue on hover | -| selected | Boolean | false | Sets the link as selected, giving it a different style and setting the `aria-current` attribute. | -| underline | Boolean | false | Adds underline to the Link | -| variant | String | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. | +| Name | Type | Default | Description | +| :-------- | :------ | :------: | :------------------------------------------------------------------------------------------------ | +| as | String | 'a' | Sets the HTML tag for the component. | +| href | String | | URL to be used for the Link | +| muted | Boolean | false | Uses light gray for Link color, and blue on hover | +| selected | Boolean | false | Sets the link as selected, giving it a different style and setting the `aria-current` attribute. | +| underline | Boolean | false | Adds underline to the Link | +| variant | String | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. | 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/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 a57752fc482..08587239588 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..e7184c84fb3 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 @@ -44,32 +44,31 @@ 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 - + 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 +83,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 +104,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/content/getting-started.md b/docs/content/getting-started.md index 2c905059621..c0fb9171cc5 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -8,10 +8,10 @@ To get started using Primer React, install the package and its peer dependencies ```bash # with npm -npm install @primer/components react react-dom styled-components +npm install @primer/components react react-dom styled-components @primer/styled-octicons # with yarn -yarn add @primer/components react react-dom styled-components +yarn add @primer/components react react-dom styled-components @primer/styled-octicons ``` You can now import Primer React from the main package module: @@ -49,6 +49,22 @@ Primer React requires the following libraries to be installed along with it: - `styled-components` at version 4.0.0 or higher - `react` at versions 16.8.0 or higher - `react-dom` at versions 16.8.0 or higher +- `@primer/styled-octicons` at versions 10.0.0 or higher + +### Using Octicons with Primer React Components +We use the `@primer/styled-octicons` package for Octicons in the Primer React Components library. + +In order to avoid version mismatches, `@primer/styled-octicons` is set as a peer dependency. This allows you to decide which version of `@primer/styled-octicons` you'd like to use in your project and makes sure that any Octicons used in other parts of your application match the icons used in Primer React Components. + +As mentioned in the previous section on [Peer dependencies](#Peer-dependencies), you'll need to install `@primer/styled-octicons` before getting started with Primer React Components, regardless of whether or not you are using `@primer/styled-octicons` directly. `@primer/styled-octicons` and `@primer/components` are both tree-shaking friendly, so you shouldn't need to worry about dependency bloat. + +You can reference the [`@primer/styled-octicons documentation](https://primer.style/octicons/packages/styled-system) for more detail on how to use these components, but in general the `@primer/styled-octicons` components work similar any Primer React component: + +```jsx live + +``` + +`@primer/styled-octicons` components have access to all [`COMMON`](https://primer.style/components/system-props#system-prop-categories) system props as well as the [`sx`](https://primer.style/components/overriding-styles) prop. ## BaseStyles diff --git a/docs/package.json b/docs/package.json index fb214875db8..61a3dc9bb28 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,8 +11,8 @@ "node": ">= 10.x" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^0.20.0", - "@primer/octicons-react": "^9.2.0", + "@primer/gatsby-theme-doctocat": "0.21.0", + "@primer/styled-octicons": "^10.0.0", "@styled-system/prop-types": "^5.1.0", "@styled-system/theme-get": "^5.1.0", "gatsby": "^2.17.0", diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/layout.js b/docs/src/@primer/gatsby-theme-doctocat/components/layout.js index 18c4d1b9a02..5ffa5ae960f 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/layout.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/layout.js @@ -1,6 +1,4 @@ -import {BorderBox, Box, Flex, Grid, Heading, Position, Text, Details, StyledOcticon} from '@primer/components' -import {ChevronDown, ChevronRight} from '@primer/octicons-react' -import React from 'react' +import {BorderBox, Box, Details, Flex, Grid, Heading, Position, Text} from '@primer/components' import Head from '@primer/gatsby-theme-doctocat/src/components/head' import Header, {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header' import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer' @@ -8,6 +6,8 @@ import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar' import SourceLink from '@primer/gatsby-theme-doctocat/src/components/source-link' import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label' import TableOfContents from '@primer/gatsby-theme-doctocat/src/components/table-of-contents' +import {ChevronDownIcon, ChevronRightIcon} from '@primer/styled-octicons' +import React from 'react' function Layout({children, pageContext}) { const {title, description, status, source, additionalContributors = []} = pageContext.frontmatter @@ -62,7 +62,7 @@ function Layout({children, pageContext}) { {({open}) => ( <> - + {open ? : } Table of contents diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js b/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js index 5703f3685aa..03eecd1e52d 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js @@ -5,18 +5,18 @@ // in Doctocat but are in this project. Since the error exists in an area // of JSX code where the disable-line comment does not work, we must disable // it for the whole file until the problem is fixed upstream. -import {BorderBox, Flex, Link, StyledOcticon, Text} from '@primer/components' -import {ChevronDown, ChevronUp, X} from '@primer/octicons-react' -import {Link as GatsbyLink} from 'gatsby' -import debounce from 'lodash.debounce' -import React from 'react' -import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml' -import primerNavItems from '@primer/gatsby-theme-doctocat/src/primer-nav.yml' -import useSiteMetadata from '@primer/gatsby-theme-doctocat/src/use-site-metadata' +import {BorderBox, Flex, Link, Text} from '@primer/components' import DarkButton from '@primer/gatsby-theme-doctocat/src/components/dark-button' import Details from '@primer/gatsby-theme-doctocat/src/components/details' import Drawer from '@primer/gatsby-theme-doctocat/src/components/drawer' import NavItems from '@primer/gatsby-theme-doctocat/src/components/nav-items' +import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml' +import primerNavItems from '@primer/gatsby-theme-doctocat/src/primer-nav.yml' +import useSiteMetadata from '@primer/gatsby-theme-doctocat/src/use-site-metadata' +import {ChevronDownIcon, ChevronUpIcon, XIcon} from '@primer/styled-octicons' +import {Link as GatsbyLink} from 'gatsby' +import debounce from 'lodash.debounce' +import React from 'react' export function useNavDrawerState(breakpoint) { // Handle string values from themes with units at the end @@ -64,7 +64,7 @@ function NavDrawer({isOpen, onDismiss}) { Primer - + @@ -104,7 +104,7 @@ function PrimerNavItems({items}) { {item.title} - + {open ? : } diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js index bdf3fd9a788..414e6b24aed 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js @@ -1,5 +1,5 @@ -import {BorderBox, Flex, Link, StyledOcticon, themeGet} from '@primer/components' -import {LinkExternal} from '@primer/octicons-react' +import {BorderBox, Flex, Link, themeGet} from '@primer/components' +import {LinkExternalIcon} from '@primer/styled-octicons' import {Link as GatsbyLink} from 'gatsby' import preval from 'preval.macro' import React from 'react' @@ -59,7 +59,7 @@ function NavItems({items}) { GitHub - + diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js b/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js index 5fc04e1997c..f86b19b03b6 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js @@ -1,7 +1,7 @@ -import {BorderBox, Grid, Link, StyledOcticon} from '@primer/components' -import {Pencil} from '@primer/octicons-react' -import React from 'react' +import {BorderBox, Grid, Link} from '@primer/components' import Contributors from '@primer/gatsby-theme-doctocat/src/components/contributors' +import {PencilIcon} from '@primer/styled-octicons' +import React from 'react' function PageFooter({editUrl, contributors}) { return editUrl || contributors.length > 0 ? ( @@ -9,7 +9,7 @@ function PageFooter({editUrl, contributors}) { {editUrl ? ( - + Edit this page on GitHub ) : null} 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..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,32 +1,11 @@ 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' +import * as octiconComponents from '@primer/styled-octicons' import State from '../../../components/State' export default { ...primerComponents, ...doctocatComponents, - State, - Octicon, - Check, - Search, - Zap, - X, - PrimitiveDot, - Octoface, - Person, - Mail, - GitCommit, - Flame + ...octiconComponents, + State } diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index f078cf08de8..396baa62121 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -81,8 +81,6 @@ url: /SideNav - title: StateLabel url: /StateLabel - - title: StyledOcticon - url: /StyledOcticon - title: SubNav url: /SubNav - title: TabNav diff --git a/docs/yarn.lock b/docs/yarn.lock index 01a355bbb35..d6ca28cd961 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.21.0": + version "0.21.0" + resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.21.0.tgz#ee91c270d078fa18abf6a92fbef449b8b27beb40" + integrity sha512-LdvpLdIA1tFD0Xk4SJy5bOs1NJSlBvcuNvKHFf1KS1HDI3ZJDxQV8hqN8ahf0TL+kRwSEOvY8ErB/d8Je3Tuwg== 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" @@ -1302,6 +1295,22 @@ dependencies: prop-types "^15.6.1" +"@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== + +"@primer/styled-octicons@^10.0.0": + version "10.0.0" + resolved "https://registry.yarnpkg.com/@primer/styled-octicons/-/styled-octicons-10.0.0.tgz#a4520a98162ad9a9fc80fc0158400cd24e35384d" + integrity sha512-dARc+ZCBFgJ5uGi34So3bujJmHie6IWsPh3+iX9tIQtxqH3+lU4MaCHOFX1MJxojaeaQGqFlwe67KN/XcWPRvQ== + 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" @@ -1373,6 +1382,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" @@ -1392,6 +1408,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" @@ -1434,6 +1455,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" @@ -1477,6 +1505,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" + "@szmarczak/http-timer@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421" @@ -1711,6 +1747,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.11" + resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.11.tgz#a9ff7e5d75e69a0d5ccff36acb4bbd491f1a9da9" + integrity sha512-hUieAt4sFS7zwbdU9Vlnn/c3vkfhTMhyiccYGpUSX96nJ4BF3NjLIjMu3cQOYS5EX4gPkHJZhkfdw41ov1NjhQ== + dependencies: + csstype "^2.6.6" + "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0": version "6.12.1" resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz#37af28fae051f9e3feed5684535b1540c97ae28b" @@ -4215,6 +4265,11 @@ csstype@^2.2.0, 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== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -12871,6 +12926,25 @@ styled-system@^5.0.18, styled-system@^5.1.0, 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" + stylefire@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-7.0.2.tgz#874a82dd2bcada39c13e75e0c67b70009e06f556" diff --git a/index.d.ts b/index.d.ts index 449bed6adde..447c8ffd703 100644 --- a/index.d.ts +++ b/index.d.ts @@ -123,21 +123,20 @@ declare module '@primer/components' { variant?: 'small' | 'medium' | 'large' } - export const CircleBadge: React.FunctionComponent - - export interface CircleOcticonProps extends CommonProps, FlexProps { - size?: number + export interface CircleBadgeIconProps extends CommonProps, Omit, 'color'> { icon: React.ReactNode } - export const CircleOcticon: React.FunctionComponent + export const CircleBadge: React.FunctionComponent & { + Icon: React.FunctionComponent + } - export interface StyledOcticonProps extends CommonProps { + export interface CircleOcticonProps extends CommonProps, FlexProps { size?: number icon: React.ReactNode } - export const StyledOcticon: React.FunctionComponent + export const CircleOcticon: React.FunctionComponent export interface DropdownProps extends DetailsProps {} export interface DropdownItemProps extends CommonProps, Omit, 'color'> {} @@ -590,10 +589,7 @@ declare module '@primer/components/lib/CircleOcticon' { import {CircleOcticon} from '@primer/components' export default CircleOcticon } -declare module '@primer/components/lib/StyledOcticon' { - import {StyledOcticon} from '@primer/components' - export default StyledOcticon -} + declare module '@primer/components/lib/Dropdown' { import {Dropdown} from '@primer/components' export default Dropdown diff --git a/package.json b/package.json index 4a9a909bfcc..2647495ccf9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "20.0.0", + "version": "19.1.1", "description": "Primer react components", "main": "lib/index.js", "module": "lib-esm/index.js", @@ -42,7 +42,6 @@ "dependencies": { "@babel/helpers": "7.9.2", "@babel/runtime": "7.9.2", - "@primer/octicons-react": "^9.6.0", "@primer/primitives": "3.0.0", "@reach/dialog": "0.3.0", "@styled-system/css": "5.1.5", @@ -69,6 +68,7 @@ "@babel/plugin-transform-runtime": "7.9.0", "@babel/preset-env": "7.9.5", "@babel/preset-react": "7.9.4", + "@primer/styled-octicons": "^10.0.0", "@rollup/plugin-commonjs": "11.1.0", "@rollup/plugin-node-resolve": "7.1.3", "babel-core": "7.0.0-bridge.0", @@ -102,7 +102,8 @@ "peerDependencies": { "react": "^16.8.0", "react-dom": "^16.8.0", - "styled-components": "4.x || 5.x" + "styled-components": "4.x || 5.x", + "@primer/styled-octicons": "10.x" }, "actionBundlesize": { "build": "yarn && yarn dist:rollup", diff --git a/playroom/components.js b/playroom/components.js index 9e9505a873f..e688e2390ab 100644 --- a/playroom/components.js +++ b/playroom/components.js @@ -1,3 +1,3 @@ export * from '../src/index' export {WithPseudoClass, StickerSheet, ComponentStickerSheet} from './util' -export {Check, Zap, X, Search, PrimitiveDot, Octoface, Person, Mail} from '@primer/octicons-react' +export * from '@primer/styled-octicons' diff --git a/rollup.config.js b/rollup.config.js index 4c6d5028bf6..0b68590aa7e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -23,7 +23,7 @@ const plugins = [ export default [ { input: 'src/index.js', - external: ['styled-components', 'react', 'react-dom'], + external: ['styled-components', 'react', 'react-dom', '@primer/styled-octicons'], plugins, output: formats.map(format => ({ file: `dist/browser.${format}.js`, diff --git a/src/CircleBadge.js b/src/CircleBadge.js index 731df05129a..7e47d646aea 100644 --- a/src/CircleBadge.js +++ b/src/CircleBadge.js @@ -1,6 +1,6 @@ +import React from 'react' 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' @@ -27,11 +27,16 @@ const CircleBadge = styled.div` background-color: ${get('colors.white')}; border-radius: 50%; box-shadow: ${get('shadows.medium')}; - ${COMMON} ${sizeStyles}; + ${COMMON}; + ${sizeStyles}; ${sx}; ` -CircleBadge.Icon = styled(Octicon)` +const Icon = ({icon: IconComponent, ...rest}) => { + return +} + +CircleBadge.Icon = styled(Icon)` max-width: 60% !important; height: auto !important; max-height: 55% !important; diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index 72eef37f19c..797c6ed706f 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 {size, as, theme} = 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/Dialog.js b/src/Dialog.js index 1f266ec8770..ac6c947b168 100644 --- a/src/Dialog.js +++ b/src/Dialog.js @@ -1,15 +1,14 @@ -import React from 'react' +import {XIcon} from '@primer/styled-octicons' import {Dialog as ReachDialog} from '@reach/dialog' +import PropTypes from 'prop-types' import raw from 'raw.macro' +import React from 'react' import styled, {createGlobalStyle} from 'styled-components' -import PropTypes from 'prop-types' -import {X} from '@primer/octicons-react' -import StyledOcticon from './StyledOcticon' import {COMMON, LAYOUT} from './constants' -import theme from './theme' +import Flex from './Flex' import sx from './sx' import Text from './Text' -import Flex from './Flex' +import theme from './theme' const reachStyles = raw('@reach/dialog/styles.css') @@ -78,12 +77,12 @@ function DialogHeader({theme, children, ...rest}) { ) } -function Dialog({children, ...props}) { +function Dialog({children, theme, ...props}) { return ( <> - + - + {children} diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index 02f36ad0a8f..63bf018a602 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 {Check} from '@primer/octicons-react' -import {MenuContext} from './SelectMenuContext' import {COMMON, get} from '../constants' -import StyledOcticon from '../StyledOcticon' import theme from '../theme' +import {MenuContext} from './SelectMenuContext' import sx from '../sx' export const listItemStyles = css` @@ -113,7 +112,7 @@ const SelectMenuItem = ({children, selected, theme, onClick, ...rest}) => { } return ( - + {children} ) diff --git a/src/StateLabel.js b/src/StateLabel.js index c756390ee29..05808ede8df 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -1,21 +1,20 @@ -import React from 'react' +import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/styled-octicons' import PropTypes from 'prop-types' +import React from 'react' import styled from 'styled-components' -import {GitMerge, GitPullRequest, IssueClosed, IssueOpened, Question} from '@primer/octicons-react' import {variant} from 'styled-system' -import theme from './theme' import {COMMON, get} from './constants' -import StyledOcticon from './StyledOcticon' import sx from './sx' +import theme from './theme' import {useDeprecation} from './utils/deprecate' const octiconMap = { - issueOpened: IssueOpened, - pullOpened: GitPullRequest, - issueClosed: IssueClosed, - pullClosed: GitPullRequest, - pullMerged: GitMerge, - draft: GitPullRequest + issueOpened: IssueOpenedIcon, + pullOpened: GitPullRequestIcon, + issueClosed: IssueClosedIcon, + pullClosed: GitPullRequestIcon, + pullMerged: GitMergeIcon, + draft: GitPullRequestIcon } const colorVariants = variant({ @@ -42,7 +41,7 @@ const StateLabelBase = styled.span` ${sx}; ` -function StateLabel({children, small, status, variant, ...rest}) { +function StateLabel({children, small, status, variant, theme, ...rest}) { const deprecate = useDeprecation({ name: "StateLabel 'small' prop", message: "Use variant='small' or variant='normal' instead.", @@ -55,9 +54,10 @@ function StateLabel({children, small, status, variant, ...rest}) { } const octiconProps = variant === 'small' ? {width: '1em'} : {} + const Icon = octiconMap[status] || QuestionIcon return ( - - {status && } + + {status && } {children} ) diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js deleted file mode 100644 index 4b3052bc983..00000000000 --- a/src/StyledOcticon.js +++ /dev/null @@ -1,23 +0,0 @@ -import Octicon from '@primer/octicons-react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import {COMMON} from './constants' -import theme from './theme' -import sx from './sx' - -const StyledOcticon = styled(Octicon)` - ${COMMON}; - ${sx}; -` - -StyledOcticon.defaultProps = { - theme -} - -StyledOcticon.propTypes = { - ...COMMON.propTypes, - ...sx.propTypes, - theme: PropTypes.object -} - -export default StyledOcticon diff --git a/src/TextInput.js b/src/TextInput.js index 50bf4afac6d..ce0e2cd940b 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 Octicon from './StyledOcticon' import {variant, width, minWidth, maxWidth} from 'styled-system' import {COMMON, get} from './constants' import theme from './theme' @@ -28,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, sx, ...rest}, ref) => { +const TextInput = React.forwardRef(({icon: Icon, className, block, disabled, sx, ...rest}, ref) => { // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') const wrapperProps = pick(rest) @@ -36,14 +35,14 @@ const TextInput = React.forwardRef(({icon, className, block, disabled, sx, ...re return ( - {icon && } + {Icon && } ) diff --git a/src/__tests__/CircleBadge.js b/src/__tests__/CircleBadge.js index 4898da58815..62e3cee4871 100644 --- a/src/__tests__/CircleBadge.js +++ b/src/__tests__/CircleBadge.js @@ -1,10 +1,11 @@ +import {CheckIcon} from '@primer/styled-octicons' +import {cleanup, render as HTMLRender} from '@testing-library/react' +import 'babel-polyfill' +import {axe, toHaveNoViolations} from 'jest-axe' import React from 'react' import {CircleBadge} from '..' -import {render, mount, behavesAsComponent, checkExports} 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' +import {behavesAsComponent, checkExports, mount, render} from '../utils/testing' expect.extend(toHaveNoViolations) const imgInput = @@ -17,11 +18,7 @@ describe('CircleBadge', () => { }) describe('CircleBadge.Icon', () => { - behavesAsComponent(CircleBadge.Icon, [COMMON], () => ( - -
- - )) + behavesAsComponent(CircleBadge.Icon, [COMMON], () => ) }) it('should have no axe violations', async () => { diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.js index 7b780f16c5d..0e15fa27d90 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/styled-octicons' import {colors} from '../theme' import {CircleOcticon} from '..' import {render, behavesAsComponent, checkExports} from '../utils/testing' @@ -10,36 +10,40 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('CircleOcticon', () => { - behavesAsComponent(CircleOcticon, [COMMON, FLEX, LAYOUT], () => ) + behavesAsComponent(CircleOcticon, [COMMON, FLEX, LAYOUT], () => ) checkExports('CircleOcticon', { default: CircleOcticon }) it('renders a
with width and height', () => { - const result = render() + const result = render() expect(result).toHaveStyleRule('width', '10px') expect(result).toHaveStyleRule('height', '10px') }) it('should have no axe violations', async () => { - const {container} = HTMLRender() + const {container} = HTMLRender() const results = await axe(container) expect(results).toHaveNoViolations() cleanup() }) 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') + }) }) diff --git a/src/__tests__/StateLabel.js b/src/__tests__/StateLabel.js index e6b0e21a362..0e8f5ba48be 100644 --- a/src/__tests__/StateLabel.js +++ b/src/__tests__/StateLabel.js @@ -9,13 +9,7 @@ import {Deprecations} from '../utils/deprecate' expect.extend(toHaveNoViolations) describe('StateLabel', () => { - behavesAsComponent(StateLabel, [COMMON], () => Open, { - // Rendering a StyledOcticon seems to break getComputedStyles, which - // the sx prop implementation test uses to make sure the prop is working correctly. - // Despite my best efforts, I cannot figure out why this is happening. So, - // unfortunately, we will simply skip this test. - skipSx: true - }) + behavesAsComponent(StateLabel, [COMMON], () => Open) checkExports('StateLabel', { default: StateLabel diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js deleted file mode 100644 index f1ffaca97f6..00000000000 --- a/src/__tests__/StyledOcticon.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import {X} from '@primer/octicons-react' -import {StyledOcticon} from '..' -import {behavesAsComponent, checkExports} 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', () => { - behavesAsComponent(StyledOcticon, [COMMON], () => ) - - checkExports('StyledOcticon', { - default: 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() - }) -}) diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap index cc47f0aa165..2aeded5fea5 100644 --- a/src/__tests__/__snapshots__/CircleBadge.js.snap +++ b/src/__tests__/__snapshots__/CircleBadge.js.snap @@ -10,21 +10,24 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
- +/> `; exports[`CircleBadge renders consistently 1`] = ` diff --git a/src/__tests__/__snapshots__/CircleOcticon.js.snap b/src/__tests__/__snapshots__/CircleOcticon.js.snap index 4d1315f7db0..61fb01bfea1 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 24 24" + width={32} + />
`; diff --git a/src/__tests__/__snapshots__/SelectMenu.js.snap b/src/__tests__/__snapshots__/SelectMenu.js.snap index c8b29fbfa91..ef1ea8c66ac 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