From 492bc3571b6e11d5a60eb9a1d115a558836b7c49 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 23 Oct 2018 15:03:29 -0700 Subject: [PATCH 01/42] add fontWeights to theme --- src/theme.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/theme.js b/src/theme.js index 08831033222..b7b26451cf3 100644 --- a/src/theme.js +++ b/src/theme.js @@ -47,6 +47,12 @@ const theme = { ]), mono: fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace']) }, + fontWeights: { + light: 300, + normal: 400, + semibold: 500, + bold: 600 + }, colors, borders: [0, '1px solid'], fontSizes, From caf60d241783d35bf074c86a30a4c9ceedaf98a9 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 23 Oct 2018 15:06:31 -0700 Subject: [PATCH 02/42] update fontWeight usages --- pages/doc-components/Header.js | 2 +- pages/doc-components/IndexHero.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/doc-components/Header.js b/pages/doc-components/Header.js index c3676412341..eb41db03ac3 100644 --- a/pages/doc-components/Header.js +++ b/pages/doc-components/Header.js @@ -51,7 +51,7 @@ const Header = ({router}) => ( borderColor="gray.6" display="inline-block" > - + Menu diff --git a/pages/doc-components/IndexHero.js b/pages/doc-components/IndexHero.js index 1c85f5dcbc9..1861ba564e7 100644 --- a/pages/doc-components/IndexHero.js +++ b/pages/doc-components/IndexHero.js @@ -10,7 +10,7 @@ const IndexHero = () => ( Primer Components - + v{version} From ecadd552b36e0ae553a5a43461daa56c41967ce5 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 23 Oct 2018 15:10:05 -0700 Subject: [PATCH 03/42] update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a223d98b3fe..14bd8212bff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "4.0.0-beta", + "version": "5.0.0-beta", "description": "Primer react components", "main": "dist/index.umd.js", "module": "dist/index.esm.js", From 4802968799ae91e3910ba56e9a99624e927ed366 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 23 Oct 2018 15:10:44 -0700 Subject: [PATCH 04/42] fix lint + test workflow --- .github/main.workflow | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/.github/main.workflow b/.github/main.workflow index 5b76e486d01..bbfb20c53b5 100644 --- a/.github/main.workflow +++ b/.github/main.workflow @@ -1,14 +1,19 @@ workflow "Lint and test" { on = "push" - resolves = ["lint", "test"] + resolves = ["install", "lint", "test"] +} + +action "install" { + uses = "actions/npm@94e6933" + args = "ci" } action "lint" { uses = "actions/npm@94e6933" - args = "lint" + args = "run lint" } action "test" { - args = "test" uses = "actions/npm@94e6933" + args = "test" } From dbfae160b4f0772b82d304d14d68cdef9f59267c Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 23 Oct 2018 15:11:26 -0700 Subject: [PATCH 05/42] add "needs" for lint and test actions --- .github/main.workflow | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/main.workflow b/.github/main.workflow index bbfb20c53b5..8f128f56ea8 100644 --- a/.github/main.workflow +++ b/.github/main.workflow @@ -9,11 +9,13 @@ action "install" { } action "lint" { + needs = ["install"] uses = "actions/npm@94e6933" args = "run lint" } action "test" { + needs = ["install"] uses = "actions/npm@94e6933" args = "test" } From 2f2c67ea5b0d7d226157e6f316b35f69d63e4547 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 23 Oct 2018 15:24:46 -0700 Subject: [PATCH 06/42] update tests --- src/__tests__/Heading.js | 12 ++++++++++-- src/__tests__/Text.js | 4 ++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.js index 923fbdd8704..09b91997492 100644 --- a/src/__tests__/Heading.js +++ b/src/__tests__/Heading.js @@ -17,6 +17,12 @@ const theme = { normal: 1.5, condensed: 1.25, condensedUltra: 1 + }, + fontWeights: { + light: '300', + normal: '400', + semibold: '500', + bold: '600' } } @@ -34,8 +40,10 @@ describe('Heading', () => { }) it('respects fontWeight', () => { - expect(render()).toHaveStyleRule('font-weight', 'bold') - expect(render()).toHaveStyleRule('font-weight', 'normal') + expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.bold) + expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.normal) + expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.semibold) + expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.light) }) it('respects lineHeight', () => { diff --git a/src/__tests__/Text.js b/src/__tests__/Text.js index 597cd12f485..64dc55e179f 100644 --- a/src/__tests__/Text.js +++ b/src/__tests__/Text.js @@ -41,8 +41,8 @@ describe('Text', () => { }) it('respects fontWeight', () => { - expect(render()).toHaveStyleRule('font-weight', 'bold') - expect(render()).toHaveStyleRule('font-weight', 'normal') + expect(render()).toHaveStyleRule('font-weight', '600') + expect(render()).toHaveStyleRule('font-weight', '400') }) it('respects lineHeight', () => { From f84c9e5ad9179a3599818f2d95ec8b586cd89e5e Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 23 Oct 2018 15:27:51 -0700 Subject: [PATCH 07/42] fix lint --- src/__tests__/Heading.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.js index 09b91997492..67236189de5 100644 --- a/src/__tests__/Heading.js +++ b/src/__tests__/Heading.js @@ -41,8 +41,14 @@ describe('Heading', () => { it('respects fontWeight', () => { expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.bold) - expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.normal) - expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.semibold) + expect(render()).toHaveStyleRule( + 'font-weight', + theme.fontWeights.normal + ) + expect(render()).toHaveStyleRule( + 'font-weight', + theme.fontWeights.semibold + ) expect(render()).toHaveStyleRule('font-weight', theme.fontWeights.light) }) From ae2472ab3ed4e205c6c8ea2efe8f602c6bb4d813 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 12:15:46 -0700 Subject: [PATCH 08/42] rename Octicon -> StyledOcticon --- src/Dropdown.js | 4 ++-- src/StateLabel.js | 4 ++-- src/{Octicon.js => StyledOcticon.js} | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) rename src/{Octicon.js => StyledOcticon.js} (55%) diff --git a/src/Dropdown.js b/src/Dropdown.js index 92f1a6f4989..c343f94f22d 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import Octicon from './Octicon' +import StyledOcticon from './StyledOcticon' import {TriangleDown} from '@githubprimer/octicons-react' import Button from './Button' import Box from './Box' @@ -19,7 +19,7 @@ function Dropdown({title, scheme, children, className, ...rest}) { - {scheme && } + {scheme && } {children} ) diff --git a/src/Octicon.js b/src/StyledOcticon.js similarity index 55% rename from src/Octicon.js rename to src/StyledOcticon.js index 7e127028e0d..6a384ecb964 100644 --- a/src/Octicon.js +++ b/src/StyledOcticon.js @@ -1,4 +1,6 @@ import Octicon from '@githubprimer/octicons-react' import {withSystemProps, COMMON} from './system-props' -export default withSystemProps(Octicon, COMMON) +const StyledOcticon = withSystemProps(Octicon, COMMON) + +export default StyledOcticon From ff92ad40873b32383dc2b57c87ba9e614e64f9a1 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 12:16:36 -0700 Subject: [PATCH 09/42] export StyledOcticon --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 7808e7f66db..9d6a9eb06cb 100644 --- a/src/index.js +++ b/src/index.js @@ -43,6 +43,7 @@ export {default as Heading} from './Heading' export {default as Label} from './Label' export {default as BranchName} from './BranchName' export {default as Link} from './Link' +export {default as StyledOcticon} from './StyledOcticon' export {default as Text} from './Text' export {default as Tooltip} from './Tooltip' export {default as CounterLabel} from './CounterLabel' From 5104eef9f0f291081cf3c82ae56a4869b6ecab6d Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 12:16:43 -0700 Subject: [PATCH 10/42] sort exports alphabetically --- src/index.js | 33 +++++++++++++-------------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index 9d6a9eb06cb..63970316006 100644 --- a/src/index.js +++ b/src/index.js @@ -13,41 +13,34 @@ export {default as BaseStyles} from './BaseStyles' // Layout export {default as BorderBox} from './BorderBox' export {default as Box} from './Box' +export {default as Flex} from './Flex' export {Position, Absolute, Fixed, Relative, Sticky} from './Position' // Components export {default as Avatar} from './Avatar' - -export {default as Button} from './Button' +export {default as BranchName} from './BranchName' export {default as ButtonDanger} from './ButtonDanger' -export {default as ButtonPrimary} from './ButtonPrimary' -export {default as ButtonOutline} from './ButtonOutline' export {default as ButtonLink} from './ButtonLink' -export {default as OcticonButton} from './OcticonButton' - +export {default as ButtonOutline} from './ButtonOutline' +export {default as ButtonPrimary} from './ButtonPrimary' +export {default as Button} from './Button' export {default as Caret} from './Caret' -export {default as PointerBox} from './PointerBox' -export {default as CircleOcticon} from './CircleOcticon' export {default as CircleBadge} from './CircleBadge' - +export {default as CircleOcticon} from './CircleOcticon' +export {default as CounterLabel} from './CounterLabel' export {default as Details} from './Details' -export {default as Dropdown} from './Dropdown' - export {default as Donut} from './Donut' +export {default as Dropdown} from './Dropdown' export {default as FilterList} from './FilterList' -export {default as Flex} from './Flex' - -export {default as TextInput} from './TextInput' - +export {default as Flash} from './Flash' export {default as Heading} from './Heading' export {default as Label} from './Label' -export {default as BranchName} from './BranchName' export {default as Link} from './Link' +export {default as OcticonButton} from './OcticonButton' +export {default as PointerBox} from './PointerBox' +export {default as StateLabel} from './StateLabel' export {default as StyledOcticon} from './StyledOcticon' +export {default as TextInput} from './TextInput' export {default as Text} from './Text' export {default as Tooltip} from './Tooltip' -export {default as CounterLabel} from './CounterLabel' -export {default as Flash} from './Flash' -export {default as StateLabel} from './StateLabel' - export {default as UnderlineNav} from './UnderlineNav' From ea0417917ad3189f0d36e94172cceea364cd9416 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 12:20:39 -0700 Subject: [PATCH 11/42] add basic StyledOcticon tests --- src/__tests__/StyledOcticon.js | 20 +++++++++++++++++++ .../__snapshots__/StyledOcticon.js.snap | 3 +++ 2 files changed, 23 insertions(+) create mode 100644 src/__tests__/StyledOcticon.js create mode 100644 src/__tests__/__snapshots__/StyledOcticon.js.snap diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js new file mode 100644 index 00000000000..8fac46f04e7 --- /dev/null +++ b/src/__tests__/StyledOcticon.js @@ -0,0 +1,20 @@ +import React from 'react' +import {X} from '@githubprimer/octicons-react' +import StyledOcticon from '../StyledOcticon' +import theme from '../theme' +import {render} from '../utils/testing' +import {COMMON, LAYOUT} from '../system-props' + +describe('StyledOcticon', () => { + it('is a system component', () => { + expect(StyledOcticon.systemComponent).toEqual(true) + }) + + it('implements layout system props', () => { + expect(StyledOcticon).toImplementSystemProps(COMMON) + }) + + it('matches the snapshot', () => { + expect(() => render()).toMatchSnapshot() + }) +}) diff --git a/src/__tests__/__snapshots__/StyledOcticon.js.snap b/src/__tests__/__snapshots__/StyledOcticon.js.snap new file mode 100644 index 00000000000..1430a3f066b --- /dev/null +++ b/src/__tests__/__snapshots__/StyledOcticon.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StyledOcticon matches the snapshot 1`] = `[Function]`; From 49176160a5322c63ad89d1bb7928edec1e91c898 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 12:38:33 -0700 Subject: [PATCH 12/42] lint --- src/__tests__/StyledOcticon.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js index 8fac46f04e7..26923ebeddd 100644 --- a/src/__tests__/StyledOcticon.js +++ b/src/__tests__/StyledOcticon.js @@ -1,9 +1,8 @@ import React from 'react' import {X} from '@githubprimer/octicons-react' import StyledOcticon from '../StyledOcticon' -import theme from '../theme' import {render} from '../utils/testing' -import {COMMON, LAYOUT} from '../system-props' +import {COMMON} from '../system-props' describe('StyledOcticon', () => { it('is a system component', () => { From 6818e7be1878af2f608ba43b30a020a54b276d8a Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 12:42:52 -0700 Subject: [PATCH 13/42] fix the StyledOcticon snapshot :grimacing: --- src/__tests__/StyledOcticon.js | 2 +- .../__snapshots__/StyledOcticon.js.snap | 24 ++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/__tests__/StyledOcticon.js b/src/__tests__/StyledOcticon.js index 26923ebeddd..50e0bd89346 100644 --- a/src/__tests__/StyledOcticon.js +++ b/src/__tests__/StyledOcticon.js @@ -14,6 +14,6 @@ describe('StyledOcticon', () => { }) it('matches the snapshot', () => { - expect(() => render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) }) diff --git a/src/__tests__/__snapshots__/StyledOcticon.js.snap b/src/__tests__/__snapshots__/StyledOcticon.js.snap index 1430a3f066b..0d12fec54c5 100644 --- a/src/__tests__/__snapshots__/StyledOcticon.js.snap +++ b/src/__tests__/__snapshots__/StyledOcticon.js.snap @@ -1,3 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`StyledOcticon matches the snapshot 1`] = `[Function]`; +exports[`StyledOcticon matches the snapshot 1`] = ` + +`; From 2bb146c7fd0d023edc272effeddee975a415168e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 24 Oct 2018 15:02:05 -0700 Subject: [PATCH 14/42] add StyledOcticon docs --- pages/components/docs/StyledOcticon.md | 29 ++++++++++++++++++++++++++ pages/components/docs/index.js | 3 ++- 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 pages/components/docs/StyledOcticon.md diff --git a/pages/components/docs/StyledOcticon.md b/pages/components/docs/StyledOcticon.md new file mode 100644 index 00000000000..602734b3377 --- /dev/null +++ b/pages/components/docs/StyledOcticon.md @@ -0,0 +1,29 @@ + +# StyledOcticon + +StyledOcticon renders an Octicon with common system props, including `color`, margin, and padding. + +## Default example + +```.jsx + + +``` + +## System props + +StyledOcticon components get `COMMON` system props. Read our [System Props](/components/docs/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 used in the component | +| size | Number | 16 | Sets the uniform `width` and `height` of the SVG element | +| verticalAlign | String | `text-bottom` | Sets the `text-align` CSS property | + + +export const meta = {displayName: 'StyledOcticon'} diff --git a/pages/components/docs/index.js b/pages/components/docs/index.js index a20e2cff3eb..3bc2d237ff2 100644 --- a/pages/components/docs/index.js +++ b/pages/components/docs/index.js @@ -18,7 +18,8 @@ export {meta as Link} from './Link.md' export {meta as PointerBox} from './PointerBox.md' export {meta as Position} from './Position.md' export {meta as StateLabel} from './StateLabel.md' -export {meta as Text} from './Text.md' +export {meta as StyledOcticon} from './StyledOcticon.md' export {meta as TextInput} from './TextInput.md' +export {meta as Text} from './Text.md' export {meta as Tooltip} from './Tooltip.md' export {meta as UnderlineNav} from './UnderlineNav.md' From 43d59f5ba13b9e41faf577dc209d41deb08348b8 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 16:47:39 -0700 Subject: [PATCH 15/42] remove border props from Layout, add to BorderBox --- src/BorderBox.js | 3 ++- src/system-props.js | 4 ---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/BorderBox.js b/src/BorderBox.js index 18035cfa73f..71793d14c94 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -1,3 +1,4 @@ +import {borders, borderColor, borderRadius, boxShadow} from 'styled-system' import {withSystemProps, LAYOUT} from './system-props' const BorderBox = withSystemProps( @@ -8,7 +9,7 @@ const BorderBox = withSystemProps( borderColor: 'gray.2', borderRadius: 1 }, - LAYOUT + [...LAYOUT, borders, borderColor, borderRadius, boxShadow] ) export default BorderBox diff --git a/src/system-props.js b/src/system-props.js index 78d232906dd..a6d60425ec8 100644 --- a/src/system-props.js +++ b/src/system-props.js @@ -18,10 +18,6 @@ export const TYPOGRAPHY = COMMON.concat( export const LAYOUT = COMMON.concat( // layout props - 'borders', - 'borderColor', - 'borderRadius', - 'boxShadow', 'display', 'size', 'width', From f21d4e808841dd6f97a0a5a5a98a432fe658131f Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:02:34 -0700 Subject: [PATCH 16/42] update Box tests --- src/__tests__/Box.js | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/src/__tests__/Box.js b/src/__tests__/Box.js index 93113626e5a..230b51b9fbe 100644 --- a/src/__tests__/Box.js +++ b/src/__tests__/Box.js @@ -30,20 +30,6 @@ describe('Box', () => { expect(render()).toMatchSnapshot() }) - describe('borders', () => { - it('handles border prop', () => { - expect(render()).toMatchSnapshot() - }) - it('handles a single border edge', () => { - expect(render()).toMatchSnapshot() - }) - it('handles multiple border edges', () => { - expect(render()).toMatchSnapshot() - }) - it('handles just a border color', () => { - expect(render()).toMatchSnapshot() - }) - }) it('respects display', () => { expect(render()).toMatchSnapshot() @@ -56,11 +42,4 @@ describe('Box', () => { expect(render()).toMatchSnapshot() expect(render()).toMatchSnapshot() }) - - it('renders shadow', () => { - expect(render()).toMatchSnapshot() - expect(render()).toMatchSnapshot() - expect(render()).toMatchSnapshot() - expect(render()).toMatchSnapshot() - }) }) From 2f09185f93d8f6d662691edef5c0fd473d7e4f7f Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:02:45 -0700 Subject: [PATCH 17/42] Fix CircleOcticon --- src/CircleOcticon.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index fef285c6514..58887b718aa 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -2,21 +2,23 @@ import React from 'react' import PropTypes from 'prop-types' import Octicon from '@githubprimer/octicons-react' import Flex from './Flex' +import BorderBox from './BorderBox' function CircleOcticon(props) { const {size} = props const {icon, ...rest} = props return ( - - - + + + + + ) } CircleOcticon.defaultProps = { ...Flex.defaultProps, size: 32, - borderRadius: '50%' } CircleOcticon.propTypes = { From d89c08fcc3c3b8dd3370b6d076a5a68eea399bb7 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:08:03 -0700 Subject: [PATCH 18/42] update Dropdown --- src/Dropdown.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Dropdown.js b/src/Dropdown.js index 92f1a6f4989..0fa3adf03c1 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -4,7 +4,7 @@ import classnames from 'classnames' import Octicon from './Octicon' import {TriangleDown} from '@githubprimer/octicons-react' import Button from './Button' -import Box from './Box' +import BorderBox from './BorderBox' import Caret from './Caret' import Details from './Details' import Flex from './Flex' @@ -21,7 +21,7 @@ function Dropdown({title, scheme, children, className, ...rest}) { {title} - {children} - + )} From 9141a68be58b584f057e021a1d59e21f7a6d0268 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:33:50 -0700 Subject: [PATCH 19/42] set bg on CircleOcticon --- src/CircleOcticon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index 58887b718aa..154ad16eec2 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -6,9 +6,9 @@ import BorderBox from './BorderBox' function CircleOcticon(props) { const {size} = props - const {icon, ...rest} = props + const {icon, bg, ...rest} = props return ( - + From e31d0775e499e350e206510012ba75925dd30379 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:34:02 -0700 Subject: [PATCH 20/42] remove unnecessary imports --- src/BorderBox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BorderBox.js b/src/BorderBox.js index 71793d14c94..0a321a3b40b 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -1,4 +1,4 @@ -import {borders, borderColor, borderRadius, boxShadow} from 'styled-system' +import {boxShadow} from 'styled-system' import {withSystemProps, LAYOUT} from './system-props' const BorderBox = withSystemProps( @@ -9,7 +9,7 @@ const BorderBox = withSystemProps( borderColor: 'gray.2', borderRadius: 1 }, - [...LAYOUT, borders, borderColor, borderRadius, boxShadow] + [...LAYOUT, boxShadow] ) export default BorderBox From d7c5c7b7d6d6786a4111035fed6b0a4e7ec2bed7 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:34:09 -0700 Subject: [PATCH 21/42] update snaps --- src/__tests__/__snapshots__/Box.js.snap | 83 -------------------- src/__tests__/__snapshots__/Dropdown.js.snap | 14 ++-- 2 files changed, 8 insertions(+), 89 deletions(-) diff --git a/src/__tests__/__snapshots__/Box.js.snap b/src/__tests__/__snapshots__/Box.js.snap index 66caafa4852..88b3c5be0c5 100644 --- a/src/__tests__/__snapshots__/Box.js.snap +++ b/src/__tests__/__snapshots__/Box.js.snap @@ -1,48 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Box borders handles a single border edge 1`] = ` -.emotion-0 { - border-left: 1px solid; - border-color: #28a745; -} - -
-`; - -exports[`Box borders handles border prop 1`] = ` -.emotion-0 { - border: 1px solid; -} - -
-`; - -exports[`Box borders handles just a border color 1`] = ` -.emotion-0 { - border-color: #d73a49; -} - -
-`; - -exports[`Box borders handles multiple border edges 1`] = ` -.emotion-0 { - border-right: 1px solid; - border-left: 1px solid; - border-color: #e1e4e8; -} - -
-`; - exports[`Box renders margin 1`] = ` .emotion-0 { margin: 4px; @@ -175,46 +132,6 @@ exports[`Box renders padding 3`] = ` /> `; -exports[`Box renders shadow 1`] = ` -.emotion-0 { - box-shadow: 0 1px 1px rgba(27,31,35,0.1); -} - -
-`; - -exports[`Box renders shadow 2`] = ` -.emotion-0 { - box-shadow: 0 1px 5px rgba(27,31,35,0.15); -} - -
-`; - -exports[`Box renders shadow 3`] = ` -.emotion-0 { - box-shadow: 0 1px 15px rgba(27,31,35,0.15); -} - -
-`; - -exports[`Box renders shadow 4`] = ` -.emotion-0 { - box-shadow: 0 10px 50px rgba(27,31,35,0.07); -} - -
-`; - exports[`Box renders without any props 1`] = `
hi @@ -178,14 +179,14 @@ exports[`Dropdown matches the snapshots 2`] = ` position: absolute; z-index: 99999; background-color: #fff; + border: 1px solid; + border-color: #e1e4e8; + border-radius: 3px; margin-top: 4px; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; - border: 1px solid; - border-color: #e1e4e8; - border-radius: 3px; box-shadow: 0 1px 1px rgba(27,31,35,0.1); } @@ -271,6 +272,7 @@ exports[`Dropdown matches the snapshots 2`] = `
hello! From 33be76198c25102b3377486fe6326a3d2f3a3306 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 24 Oct 2018 17:52:15 -0700 Subject: [PATCH 22/42] lint --- src/CircleOcticon.js | 6 +++--- src/__tests__/Box.js | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index 154ad16eec2..bb7f42f969d 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -8,9 +8,9 @@ function CircleOcticon(props) { const {size} = props const {icon, bg, ...rest} = props return ( - + - + ) @@ -18,7 +18,7 @@ function CircleOcticon(props) { CircleOcticon.defaultProps = { ...Flex.defaultProps, - size: 32, + size: 32 } CircleOcticon.propTypes = { diff --git a/src/__tests__/Box.js b/src/__tests__/Box.js index 230b51b9fbe..f5e06b7cf4c 100644 --- a/src/__tests__/Box.js +++ b/src/__tests__/Box.js @@ -30,7 +30,6 @@ describe('Box', () => { expect(render()).toMatchSnapshot() }) - it('respects display', () => { expect(render()).toMatchSnapshot() expect(render()).toMatchSnapshot() From 92c6ed6f1c8bd9e3a439f835eb5018611cf5029e Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 25 Oct 2018 09:17:00 -0700 Subject: [PATCH 23/42] pass boxShadow as string --- src/BorderBox.js | 3 +-- src/__tests__/__snapshots__/Dropdown.js.snap | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/BorderBox.js b/src/BorderBox.js index 0a321a3b40b..78ea3ba77e3 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -1,4 +1,3 @@ -import {boxShadow} from 'styled-system' import {withSystemProps, LAYOUT} from './system-props' const BorderBox = withSystemProps( @@ -9,7 +8,7 @@ const BorderBox = withSystemProps( borderColor: 'gray.2', borderRadius: 1 }, - [...LAYOUT, boxShadow] + [...LAYOUT, 'boxShadow'] ) export default BorderBox diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap index c77ed70fb53..1a4dba96d64 100644 --- a/src/__tests__/__snapshots__/Dropdown.js.snap +++ b/src/__tests__/__snapshots__/Dropdown.js.snap @@ -117,7 +117,6 @@ exports[`Dropdown matches the snapshots 1`] = `
hi @@ -272,7 +271,6 @@ exports[`Dropdown matches the snapshots 2`] = `
hello! From 2b5eded71c7725c67dd216a6bdcb1fae7cf1a8f7 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 25 Oct 2018 09:56:17 -0700 Subject: [PATCH 24/42] add some tests --- src/__tests__/BorderBox.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js index d52f818c40b..ee978064185 100644 --- a/src/__tests__/BorderBox.js +++ b/src/__tests__/BorderBox.js @@ -1,5 +1,5 @@ import React from 'react' -import {colors} from '../theme' +import theme, {colors} from '../theme' import BorderBox from '../BorderBox' import Box from '../Box' import {render} from '../utils/testing' @@ -9,12 +9,17 @@ describe('BorderBox', () => { expect(BorderBox.systemComponent).toEqual(true) }) - it('renders a Box with default props', () => { - expect(render()).toEqual(render()) - }) - it('renders borders', () => { expect(render()).toHaveStyleRule('border-color', colors.green[5]) expect(render()).toHaveStyleRule('border-bottom', '0') }) + + it('renders border radius', () => { + expect(render()).toHaveStyleRule('border-radius', `${theme.radii[2]}px`) + }) + + // the test returns the box shadow value without spaces, so had to manually provide the expected string here + it('renders box shadow', () => { + expect(render()).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)') + }) }) From 83cd4f7d753d2c8ff850307d7446edac74671615 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 25 Oct 2018 09:57:10 -0700 Subject: [PATCH 25/42] lint --- src/__tests__/BorderBox.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js index ee978064185..6ebda952318 100644 --- a/src/__tests__/BorderBox.js +++ b/src/__tests__/BorderBox.js @@ -1,7 +1,6 @@ import React from 'react' import theme, {colors} from '../theme' import BorderBox from '../BorderBox' -import Box from '../Box' import {render} from '../utils/testing' describe('BorderBox', () => { @@ -20,6 +19,6 @@ describe('BorderBox', () => { // the test returns the box shadow value without spaces, so had to manually provide the expected string here it('renders box shadow', () => { - expect(render()).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)') + expect(render()).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)') }) }) From 3cc354ef29c7419ac65ae0a33e44f89eded47b83 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 25 Oct 2018 10:19:03 -0700 Subject: [PATCH 26/42] add width and remove block --- pages/components/docs/Button.md | 1 - src/Button.js | 6 ++---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/pages/components/docs/Button.md b/pages/components/docs/Button.md index 9d50bcca02d..991b8662daa 100644 --- a/pages/components/docs/Button.md +++ b/pages/components/docs/Button.md @@ -19,7 +19,6 @@ Button components get `COMMON` system props. Read our [System Props](/components | Prop name | Type | Description | | :- | :- | :- | | is | String | sets the HTML tag for the component, defaults to `button` | -| block | Boolean | adds `display: block` to the component | | disabled | Boolean | sets the `disabled` attribute on the Button | | grouped | Boolean | allows you to use Button in a line of Buttons without duplicate borders | | onClick | Function | function to be called when Button is clicked | diff --git a/src/Button.js b/src/Button.js index dbbd1a6a5a6..6a7a69e718b 100644 --- a/src/Button.js +++ b/src/Button.js @@ -9,7 +9,7 @@ injectGlobal(sass` @import "primer-buttons/index.scss"; `) -function Button({is: Tag, children, size, block, linkStyle, grouped, scheme, onClick, disabled, className, ...rest}) { +function Button({is: Tag, children, size, linkStyle, grouped, scheme, onClick, disabled, className, ...rest}) { const classes = classnames( className, { @@ -17,7 +17,6 @@ function Button({is: Tag, children, size, block, linkStyle, grouped, scheme, onC 'btn-link': linkStyle, 'btn-sm': size === 'sm', 'btn-large': size === 'large', - 'btn-block': block, 'BtnGroup-item': grouped }, scheme ? `btn-${scheme}` : null @@ -35,7 +34,6 @@ Button.defaultProps = { } Button.propTypes = { - block: PropTypes.bool, children: PropTypes.node, disabled: PropTypes.bool, grouped: PropTypes.bool, @@ -46,4 +44,4 @@ Button.propTypes = { size: PropTypes.oneOf(['sm', 'large']) } -export default withSystemProps(Button, COMMON) +export default withSystemProps(Button, [...COMMON, 'width']) From d2bef28c0225f386ff9e18d09d958175a8a8f357 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 25 Oct 2018 10:44:05 -0700 Subject: [PATCH 27/42] remove ButtonLink --- pages/components/docs/Button.md | 1 - src/ButtonLink.js | 6 ------ src/index.js | 1 - 3 files changed, 8 deletions(-) delete mode 100644 src/ButtonLink.js diff --git a/pages/components/docs/Button.md b/pages/components/docs/Button.md index 991b8662daa..71f2d63b3dc 100644 --- a/pages/components/docs/Button.md +++ b/pages/components/docs/Button.md @@ -5,7 +5,6 @@ ```.jsx Button Danger -Button Link Button Outline Button Primary ``` diff --git a/src/ButtonLink.js b/src/ButtonLink.js deleted file mode 100644 index f00fd4a6cc2..00000000000 --- a/src/ButtonLink.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' -import Button from './Button' - -const ButtonLink = props =>