From 6b786fd12e71de65e0c3f8ba433f707aa721eb52 Mon Sep 17 00:00:00 2001 From: Tiaan du Plessis Date: Mon, 13 Apr 2020 14:37:39 +0200 Subject: [PATCH 001/154] Switch to usage of variant for StateLabel and remove theme calls --- docs/content/StateLabel.md | 2 +- index.d.ts | 4 +- src/StateLabel.js | 37 ++++-- src/__tests__/StateLabel.js | 6 +- .../__snapshots__/StateLabel.js.snap | 116 +++++++++--------- 5 files changed, 88 insertions(+), 77 deletions(-) diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md index 4c09d09c125..a90e25b60b8 100644 --- a/docs/content/StateLabel.md +++ b/docs/content/StateLabel.md @@ -17,5 +17,5 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system | Name | Type | Default | Description | | :- | :- | :-: | :- | -| small | Boolean | | Used to create a smaller version of the default StateLabel | +| variant | String | 'large' | a value of `small` or `large` results in a smaller or larger version of the StateLabel. | | status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed` or `pullMerged`. diff --git a/index.d.ts b/index.d.ts index f4538f169d4..d855d9fe4cc 100644 --- a/index.d.ts +++ b/index.d.ts @@ -301,7 +301,7 @@ declare module '@primer/components' { export interface SelectMenuModalProps extends CommonProps, Omit, 'color'> {} export interface SelectMenuListProps extends CommonProps, Omit, 'color'> {} - + export interface SelectMenuItemProps extends Omit, Omit, 'color'> { selected?: boolean @@ -368,7 +368,7 @@ declare module '@primer/components' { } export interface StateLabelProps extends CommonProps { - small?: boolean + variant?: 'small' | 'large' status: 'issueOpened' | 'issueClosed' | 'pullOpened' | 'pullClosed' | 'pullMerged' } diff --git a/src/StateLabel.js b/src/StateLabel.js index bd0bda8baae..fccd6c31d23 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -2,17 +2,18 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octicons-react' +import {variant} from 'styled-system' import theme, {colors} from './theme' import {COMMON, get} from './constants' import StyledOcticon from './StyledOcticon' const statusMap = { - issueClosed: colors.red[6], - pullClosed: colors.red[5], - pullMerged: colors.purple[5], + issueClosed: get('colors.red.6'), + pullClosed: get('colors.red.5'), + pullMerged: get('colors.purple.5'), issueOpened: '#159739', // Custom green pullOpened: '#2cbe4e', // This was generated by a sass function in Primer, so using a hex here - gray: colors.gray[5] + gray: get('colors.gray.5') } const octiconMap = { @@ -23,8 +24,21 @@ const octiconMap = { pullMerged: GitMerge } -function StateLabelBase({className, status, small = false, children}) { - const octiconProps = small ? {width: '1em'} : {} +const sizeVariant = variant({ + variants: { + small: { + padding: `4px 8px`, + fontSize: get('fontSizes.0') + }, + large: { + padding: `8px 12px`, + fontSize: get('fontSizes.1') + } + } +}) + +function StateLabelBase({className, status, variant = 'large', children}) { + const octiconProps = variant === 'small' ? {width: '1em'} : {} return ( {status && } @@ -36,28 +50,25 @@ function StateLabelBase({className, status, small = false, children}) { const StateLabel = styled(StateLabelBase)` display: inline-flex; align-items: center; - padding: ${props => (props.small ? `4px 8px` : `8px 12px`)}; font-weight: 600; line-height: 16px; color: ${colors.white}; - font-size: ${props => - props.small - ? theme.fontSizes[0] - : theme.fontSizes[1]}; // TODO: these should use the get function instead of referencing the theme directly text-align: center; background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)}; border-radius: ${get('radii.3')}; + ${sizeVariant} ${COMMON}; ` StateLabel.defaultProps = { - theme + theme, + variant: 'large' } StateLabel.propTypes = { - small: PropTypes.bool, status: PropTypes.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged']), theme: PropTypes.object, + variant: PropTypes.oneOf(['small', 'large']), ...COMMON.propTypes } diff --git a/src/__tests__/StateLabel.js b/src/__tests__/StateLabel.js index 5ef630708d6..a2262465a13 100644 --- a/src/__tests__/StateLabel.js +++ b/src/__tests__/StateLabel.js @@ -29,9 +29,9 @@ describe('StateLabel', () => { expect(StateLabel).toSetDefaultTheme() }) - it('respects the small flag', () => { - expect(render()).toMatchSnapshot() - expect(render()).toMatchSnapshot() + it('respects the variant prop', () => { + expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('renders children', () => { diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.js.snap index 708477ab03c..7e022d50d00 100644 --- a/src/__tests__/__snapshots__/StateLabel.js.snap +++ b/src/__tests__/__snapshots__/StateLabel.js.snap @@ -10,14 +10,14 @@ exports[`StateLabel renders children 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - padding: 8px 12px; font-weight: 600; line-height: 16px; color: #fff; - font-size: 14px; text-align: center; background-color: #6a737d; border-radius: 100px; + padding: 8px 12px; + font-size: 14px; } `; -exports[`StateLabel respects the small flag 1`] = ` -.c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 4px 8px; - font-weight: 600; - line-height: 16px; - color: #fff; - font-size: 12px; - text-align: center; - background-color: #6a737d; - border-radius: 100px; -} - - -`; - -exports[`StateLabel respects the small flag 2`] = ` -.c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 8px 12px; - font-weight: 600; - line-height: 16px; - color: #fff; - font-size: 14px; - text-align: center; - background-color: #6a737d; - border-radius: 100px; -} - - -`; - exports[`StateLabel respects the status prop 1`] = ` .c1 { margin-right: 4px; @@ -91,14 +41,14 @@ exports[`StateLabel respects the status prop 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - padding: 8px 12px; font-weight: 600; line-height: 16px; color: #fff; - font-size: 14px; text-align: center; background-color: #159739; border-radius: 100px; + padding: 8px 12px; + font-size: 14px; } `; + +exports[`StateLabel respects the variant prop 1`] = ` +.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-weight: 600; + line-height: 16px; + color: #fff; + text-align: center; + background-color: #6a737d; + border-radius: 100px; + padding: 4px 8px; + font-size: 12px; +} + + +`; + +exports[`StateLabel respects the variant prop 2`] = ` +.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-weight: 600; + line-height: 16px; + color: #fff; + text-align: center; + background-color: #6a737d; + border-radius: 100px; + padding: 8px 12px; + font-size: 14px; +} + + +`; From 07c09446bc644d7cc8c81a2a272552af6c67abaa Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 15:15:05 -0700 Subject: [PATCH 002/154] Update styled-components and add @styled-system/css --- package.json | 5 +- yarn.lock | 167 ++++++++++++++++++++++++++++++--------------------- 2 files changed, 103 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index ca792cd6589..58848ba5c4b 100644 --- a/package.json +++ b/package.json @@ -38,11 +38,12 @@ "dependencies": { "@primer/octicons-react": "^9.2.0", "@reach/dialog": "0.3.0", + "@styled-system/css": "5.1.5", "@styled-system/prop-types": "5.1.2", "@styled-system/props": "5.1.4", "@styled-system/theme-get": "5.1.2", - "@types/styled-components": "^4.4.0", "@testing-library/react": "9.4.0", + "@types/styled-components": "^4.4.0", "@types/styled-system": "5.1.2", "babel-plugin-macros": "2.6.1", "babel-polyfill": "6.26.0", @@ -79,7 +80,7 @@ "rollup": "1.25.1", "rollup-plugin-babel": "4.3.3", "rollup-plugin-commonjs": "10.1.0", - "styled-components": "4.4.0" + "styled-components": "5.1.0" }, "peerDependencies": { "react": "^16.8.0", diff --git a/yarn.lock b/yarn.lock index 08ac3cf2613..bad6e79b8d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -132,6 +132,16 @@ lodash "^4.17.13" source-map "^0.5.0" +"@babel/generator@^7.9.5": + version "7.9.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.5.tgz#27f0917741acc41e6eaaced6d68f96c3fa9afaf9" + integrity sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ== + dependencies: + "@babel/types" "^7.9.5" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce" @@ -299,6 +309,15 @@ "@babel/template" "^7.8.3" "@babel/types" "^7.8.3" +"@babel/helper-function-name@^7.9.5": + version "7.9.5" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c" + integrity sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw== + dependencies: + "@babel/helper-get-function-arity" "^7.8.3" + "@babel/template" "^7.8.3" + "@babel/types" "^7.9.5" + "@babel/helper-get-function-arity@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0" @@ -489,6 +508,11 @@ dependencies: "@babel/types" "^7.8.3" +"@babel/helper-validator-identifier@^7.9.5": + version "7.9.5" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80" + integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g== + "@babel/helper-wrap-function@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace" @@ -560,6 +584,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8" integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw== +"@babel/parser@^7.9.0": + version "7.9.4" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8" + integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA== + "@babel/plugin-proposal-async-generator-functions@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d" @@ -1739,6 +1768,21 @@ globals "^11.1.0" lodash "^4.17.13" +"@babel/traverse@^7.4.5": + version "7.9.5" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2" + integrity sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ== + dependencies: + "@babel/code-frame" "^7.8.3" + "@babel/generator" "^7.9.5" + "@babel/helper-function-name" "^7.9.5" + "@babel/helper-split-export-declaration" "^7.8.3" + "@babel/parser" "^7.9.0" + "@babel/types" "^7.9.5" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4": version "7.8.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c" @@ -1772,6 +1816,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.9.5": + version "7.9.5" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444" + integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg== + dependencies: + "@babel/helper-validator-identifier" "^7.9.5" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef" @@ -1780,22 +1833,27 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@emotion/is-prop-valid@^0.8.1": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983" - integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg== +"@emotion/is-prop-valid@^0.8.8": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== dependencies: - "@emotion/memoize" "0.7.3" - -"@emotion/memoize@0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" - integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== + "@emotion/memoize" "0.7.4" -"@emotion/unitless@^0.7.0": +"@emotion/memoize@0.7.4": version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" - integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== "@jest/console@^25.0.0": version "25.0.0" @@ -2046,6 +2104,11 @@ dependencies: object-assign "^4.1.1" +"@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/css@^5.1.4": version "5.1.4" resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.4.tgz#fc51d0789a69b3831e00e6f8daf9f1d345eebdc3" @@ -4087,14 +4150,14 @@ css-select@^1.1.0, css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" -css-to-react-native@^2.2.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d" - integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw== +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== dependencies: camelize "^1.0.0" css-color-keywords "^1.0.0" - postcss-value-parser "^3.3.0" + postcss-value-parser "^4.0.2" css-tree@^1.0.0-alpha.28: version "1.0.0-alpha.39" @@ -5774,7 +5837,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -6416,11 +6479,6 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= -is-what@^3.3.1: - version "3.4.0" - resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.4.0.tgz#a9b3fe0c22f52d49efef977f640da44e65a3f866" - integrity sha512-oFdBRuSY9PocqPoUUseDXek4I+A1kWGigZGhuG+7GEkp0tRkek11adc0HbTEVsNvtojV7rp0uhf5LWtGvHzoOQ== - is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -7423,11 +7481,6 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" -memoize-one@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" - integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== - memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -7444,13 +7497,6 @@ memory-fs@^0.5.0: errno "^0.1.3" readable-stream "^2.0.1" -merge-anything@^2.2.4: - version "2.4.4" - resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0" - integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ== - dependencies: - is-what "^3.3.1" - merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -8585,11 +8631,6 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: indexes-of "^1.0.1" uniq "^1.0.1" -postcss-value-parser@^3.3.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" - integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== - postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9" @@ -8713,7 +8754,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.6.1, 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== @@ -8952,7 +8993,7 @@ react-is@16.10.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab" integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA== -react-is@^16.10.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: +react-is@^16.10.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== @@ -9751,6 +9792,11 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -10250,23 +10296,20 @@ style-loader@^1.1.3: loader-utils "^1.2.3" schema-utils "^2.6.4" -styled-components@4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.0.tgz#4e381e2dab831d0e6ea431c2840a96323e84e21b" - integrity sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw== +styled-components@5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.0.tgz#2e3985b54f461027e1c91af3229e1c2530872a4e" + integrity sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q== dependencies: "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.0.0" - "@emotion/is-prop-valid" "^0.8.1" - "@emotion/unitless" "^0.7.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" babel-plugin-styled-components ">= 1" - css-to-react-native "^2.2.2" - memoize-one "^5.0.0" - merge-anything "^2.2.4" - prop-types "^15.5.4" - react-is "^16.6.0" - stylis "^3.5.0" - stylis-rule-sheet "^0.0.10" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" supports-color "^5.5.0" styled-system@5.1.2: @@ -10307,21 +10350,11 @@ styled-system@^5.1.4: "@styled-system/variant" "^5.1.4" 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" - integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== - stylis@3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw== -stylis@^3.5.0: - version "3.5.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" - integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== - supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" From fd5fbe5c812b8b1edd3042ee427bd63e1a452707 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 15:15:26 -0700 Subject: [PATCH 003/154] Get styled-components from the root project --- docs/gatsby-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index 7262fd12997..5354f19e60c 100644 --- a/docs/gatsby-config.js +++ b/docs/gatsby-config.js @@ -18,7 +18,7 @@ module.exports = { options: { alias: { '@primer/components': path.resolve(__dirname, '../src'), - 'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'), + 'styled-components': path.resolve(__dirname, '..', 'node_modules', 'styled-components'), 'react': path.resolve(__dirname, 'node_modules', 'react'), } } From 39af9e7bbda2d01cd0cfec20cdd5fd5dcf0d40ba Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 15:15:45 -0700 Subject: [PATCH 004/154] Add withSx Hoc --- src/hoc/withSx.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/hoc/withSx.js diff --git a/src/hoc/withSx.js b/src/hoc/withSx.js new file mode 100644 index 00000000000..d571f20ecd1 --- /dev/null +++ b/src/hoc/withSx.js @@ -0,0 +1,36 @@ +import React from 'react' +import {useTheme} from 'styled-components' +import css from '@styled-system/css' + +function getDisplayName(WrappedComponent) { + return WrappedComponent.displayName || WrappedComponent.name || 'Component' +} + +const withSx = Component => { + function SxWrapper({sx, children, ...props}) { + const ctxTheme = useTheme() + if (!sx) { + return {children} + } + + const extraProps = {} + const compiled = css(sx)(props.theme || ctxTheme) + if (props.style) { + extraProps.style = Object.assign({}, props.style, compiled) + } else { + extraProps.style = compiled + } + + return ( + + {children} + + ) + } + + SxWrapper.displayName = `withSx(${getDisplayName(Component)})` + + return SxWrapper +} + +export default withSx From c98df7cefe21571966f1827fb83f11c9edca0f8c Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 15:16:01 -0700 Subject: [PATCH 005/154] Wrap Heading in withSx --- src/Heading.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Heading.js b/src/Heading.js index f75ff14c3bc..4042289508f 100644 --- a/src/Heading.js +++ b/src/Heading.js @@ -1,14 +1,15 @@ +import withSx from './hoc/withSx' import styled from 'styled-components' import PropTypes from 'prop-types' import {TYPOGRAPHY, COMMON, get} from './constants' import theme from './theme' -const Heading = styled.h1` +const Heading = withSx(styled.h1` font-weight: ${get('fontWeights.bold')}; font-size: ${get('fontSizes.5')}; margin: 0; ${TYPOGRAPHY} ${COMMON}; -` +`) Heading.defaultProps = { theme From c5145bd4dfd9e4aa0986a7ab02bc65140919064f Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 18:40:54 -0700 Subject: [PATCH 006/154] Refactor sx prop --- src/hoc/withSx.js | 36 ------------------------------------ src/sx.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 36 deletions(-) delete mode 100644 src/hoc/withSx.js create mode 100644 src/sx.js diff --git a/src/hoc/withSx.js b/src/hoc/withSx.js deleted file mode 100644 index d571f20ecd1..00000000000 --- a/src/hoc/withSx.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import {useTheme} from 'styled-components' -import css from '@styled-system/css' - -function getDisplayName(WrappedComponent) { - return WrappedComponent.displayName || WrappedComponent.name || 'Component' -} - -const withSx = Component => { - function SxWrapper({sx, children, ...props}) { - const ctxTheme = useTheme() - if (!sx) { - return {children} - } - - const extraProps = {} - const compiled = css(sx)(props.theme || ctxTheme) - if (props.style) { - extraProps.style = Object.assign({}, props.style, compiled) - } else { - extraProps.style = compiled - } - - return ( - - {children} - - ) - } - - SxWrapper.displayName = `withSx(${getDisplayName(Component)})` - - return SxWrapper -} - -export default withSx diff --git a/src/sx.js b/src/sx.js new file mode 100644 index 00000000000..f4a5531870f --- /dev/null +++ b/src/sx.js @@ -0,0 +1,32 @@ +import styled from 'styled-components' + +import css from '@styled-system/css' + +const sxProps = props => css(props.sx) + +function generateSxComp(base) { + function tag(strings, ...values) { + const Comp = base(strings, ...values) + return styled(Comp)` + ${sxProps}; + ` + } + + return tag +} + +function sxStyled(Comp) { + return generateSxComp(styled(Comp)) +} + +for (const ctr of Object.keys(styled)) { + sxStyled[ctr] = generateSxComp(styled[ctr], ctr) +} + +const sx = { + get styled() { + return sxStyled + } +} + +export default sx From bcaa4c049278b740f402c0183e34063a0f510932 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 18:46:09 -0700 Subject: [PATCH 007/154] Update components from withSx => sx.styled --- src/BorderBox.js | 4 ++-- src/Heading.js | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/BorderBox.js b/src/BorderBox.js index 2cdde7b595d..778fd593ff2 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -1,10 +1,10 @@ -import styled from 'styled-components' +import sx from './sx' import PropTypes from 'prop-types' import Box from './Box' import theme from './theme' import {BORDER} from './constants' -const BorderBox = styled(Box)(BORDER) +const BorderBox = sx.styled(Box)(BORDER) BorderBox.defaultProps = { theme, diff --git a/src/Heading.js b/src/Heading.js index 4042289508f..81705fd48b5 100644 --- a/src/Heading.js +++ b/src/Heading.js @@ -1,15 +1,14 @@ -import withSx from './hoc/withSx' -import styled from 'styled-components' +import sx from './sx' import PropTypes from 'prop-types' import {TYPOGRAPHY, COMMON, get} from './constants' import theme from './theme' -const Heading = withSx(styled.h1` +const Heading = sx.styled.h1` font-weight: ${get('fontWeights.bold')}; font-size: ${get('fontSizes.5')}; margin: 0; ${TYPOGRAPHY} ${COMMON}; -`) +` Heading.defaultProps = { theme From 9ef246ff62ce36ba3419be67e8cf36b3ceffa5f2 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 18:48:04 -0700 Subject: [PATCH 008/154] Remove temporary variable --- src/sx.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/sx.js b/src/sx.js index f4a5531870f..3c402aba445 100644 --- a/src/sx.js +++ b/src/sx.js @@ -5,14 +5,12 @@ import css from '@styled-system/css' const sxProps = props => css(props.sx) function generateSxComp(base) { - function tag(strings, ...values) { + return function(strings, ...values) { const Comp = base(strings, ...values) return styled(Comp)` ${sxProps}; ` } - - return tag } function sxStyled(Comp) { From 7bec95700b2651970fffa94f2f3b9c0ecec5ffd2 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 18:48:46 -0700 Subject: [PATCH 009/154] :art: --- src/sx.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/sx.js b/src/sx.js index 3c402aba445..153b7b12f69 100644 --- a/src/sx.js +++ b/src/sx.js @@ -1,5 +1,4 @@ import styled from 'styled-components' - import css from '@styled-system/css' const sxProps = props => css(props.sx) From 512df86b2b990b6649bacf3e2d2ccd2f9ac8d16c Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 20:27:11 -0700 Subject: [PATCH 010/154] Revert styled-component update --- package.json | 2 +- yarn.lock | 149 ++++++++++++++++++++++----------------------------- 2 files changed, 64 insertions(+), 87 deletions(-) diff --git a/package.json b/package.json index 58848ba5c4b..1edafa168a0 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "rollup": "1.25.1", "rollup-plugin-babel": "4.3.3", "rollup-plugin-commonjs": "10.1.0", - "styled-components": "5.1.0" + "styled-components": "4.4.0" }, "peerDependencies": { "react": "^16.8.0", diff --git a/yarn.lock b/yarn.lock index bad6e79b8d9..fffb4274e2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -132,16 +132,6 @@ lodash "^4.17.13" source-map "^0.5.0" -"@babel/generator@^7.9.5": - version "7.9.5" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.5.tgz#27f0917741acc41e6eaaced6d68f96c3fa9afaf9" - integrity sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ== - dependencies: - "@babel/types" "^7.9.5" - jsesc "^2.5.1" - lodash "^4.17.13" - source-map "^0.5.0" - "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce" @@ -309,15 +299,6 @@ "@babel/template" "^7.8.3" "@babel/types" "^7.8.3" -"@babel/helper-function-name@^7.9.5": - version "7.9.5" - resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c" - integrity sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw== - dependencies: - "@babel/helper-get-function-arity" "^7.8.3" - "@babel/template" "^7.8.3" - "@babel/types" "^7.9.5" - "@babel/helper-get-function-arity@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0" @@ -508,11 +489,6 @@ dependencies: "@babel/types" "^7.8.3" -"@babel/helper-validator-identifier@^7.9.5": - version "7.9.5" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80" - integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g== - "@babel/helper-wrap-function@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace" @@ -584,11 +560,6 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8" integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw== -"@babel/parser@^7.9.0": - version "7.9.4" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8" - integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA== - "@babel/plugin-proposal-async-generator-functions@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d" @@ -1768,21 +1739,6 @@ globals "^11.1.0" lodash "^4.17.13" -"@babel/traverse@^7.4.5": - version "7.9.5" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2" - integrity sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ== - dependencies: - "@babel/code-frame" "^7.8.3" - "@babel/generator" "^7.9.5" - "@babel/helper-function-name" "^7.9.5" - "@babel/helper-split-export-declaration" "^7.8.3" - "@babel/parser" "^7.9.0" - "@babel/types" "^7.9.5" - debug "^4.1.0" - globals "^11.1.0" - lodash "^4.17.13" - "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4": version "7.8.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c" @@ -1816,15 +1772,6 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@babel/types@^7.9.5": - version "7.9.5" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444" - integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg== - dependencies: - "@babel/helper-validator-identifier" "^7.9.5" - lodash "^4.17.13" - to-fast-properties "^2.0.0" - "@cnakazawa/watch@^1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef" @@ -1833,7 +1780,7 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@^0.8.1": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1845,12 +1792,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== -"@emotion/stylis@^0.8.4": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@^0.7.4": +"@emotion/unitless@^0.7.0": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -2418,9 +2360,9 @@ integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== "@types/styled-components@^4.4.0": - version "4.4.2" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.2.tgz#709fa7afd7dc0963b8316a0159240f0fe19a026d" - integrity sha512-dngFx2PuGoy0MGE68eHayAmJvLSqWrnTe9w+DnQruu8PS+waWEsKmoBRhkzL2h2pK1OJhzJhVfuiz+oZa4etpA== + version "4.4.3" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.3.tgz#74dd00ad760845a98890a8539361d8afc32059de" + integrity sha512-U0udeNOZBfUkJycmGJwmzun0FBt11rZy08weVQmE2xfUNAbX8AGOEWxWna2d+qAUKxKgMlcG+TZT0+K2FfDcnQ== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" @@ -4150,14 +4092,14 @@ css-select@^1.1.0, css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" -css-to-react-native@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" - integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== +css-to-react-native@^2.2.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d" + integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw== dependencies: camelize "^1.0.0" css-color-keywords "^1.0.0" - postcss-value-parser "^4.0.2" + postcss-value-parser "^3.3.0" css-tree@^1.0.0-alpha.28: version "1.0.0-alpha.39" @@ -5837,7 +5779,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -6479,6 +6421,11 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-what@^3.3.1: + version "3.8.0" + resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.8.0.tgz#610bc46a524355f2424eb85eedc6ebbbf7e1ff8c" + integrity sha512-UKeBoQfV8bjlM4pmx1FLDHdxslW/1mTksEs8ReVsilPmUv5cORd4+2/wFcviI3cUjrLybxCjzc8DnodAzJ/Wrg== + is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -7481,6 +7428,11 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" +memoize-one@^5.0.0: + version "5.1.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" + integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -7497,6 +7449,13 @@ memory-fs@^0.5.0: errno "^0.1.3" readable-stream "^2.0.1" +merge-anything@^2.2.4: + version "2.4.4" + resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0" + integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ== + dependencies: + is-what "^3.3.1" + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -8631,6 +8590,11 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: indexes-of "^1.0.1" uniq "^1.0.1" +postcss-value-parser@^3.3.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" + integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== + postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9" @@ -8754,7 +8718,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.4, prop-types@^15.6.1, 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== @@ -8998,6 +8962,11 @@ react-is@^16.10.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== +react-is@^16.6.0: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + react-remove-scroll-bar@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.0.0.tgz#94437a7f3dbda99817ff64b928ee206e298ba157" @@ -9792,11 +9761,6 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" -shallowequal@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" - integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== - shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -10296,20 +10260,23 @@ style-loader@^1.1.3: loader-utils "^1.2.3" schema-utils "^2.6.4" -styled-components@5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.0.tgz#2e3985b54f461027e1c91af3229e1c2530872a4e" - integrity sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q== +styled-components@4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.0.tgz#4e381e2dab831d0e6ea431c2840a96323e84e21b" + integrity sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw== dependencies: "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^0.8.8" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" + "@babel/traverse" "^7.0.0" + "@emotion/is-prop-valid" "^0.8.1" + "@emotion/unitless" "^0.7.0" babel-plugin-styled-components ">= 1" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" + css-to-react-native "^2.2.2" + memoize-one "^5.0.0" + merge-anything "^2.2.4" + prop-types "^15.5.4" + react-is "^16.6.0" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" supports-color "^5.5.0" styled-system@5.1.2: @@ -10350,11 +10317,21 @@ styled-system@^5.1.4: "@styled-system/variant" "^5.1.4" 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" + integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== + stylis@3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw== +stylis@^3.5.0: + version "3.5.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" + integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" From c5c398f1c3c6e846a5550f85f60b1b587e32cb0e Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 20:27:49 -0700 Subject: [PATCH 011/154] :art: --- src/sx.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/sx.js b/src/sx.js index 153b7b12f69..977938dca03 100644 --- a/src/sx.js +++ b/src/sx.js @@ -5,10 +5,7 @@ const sxProps = props => css(props.sx) function generateSxComp(base) { return function(strings, ...values) { - const Comp = base(strings, ...values) - return styled(Comp)` - ${sxProps}; - ` + return base(strings, ...values, sxProps) } } From 0c7cacf364db2b144b61699400af37d0d8a19b33 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 11:54:36 -0700 Subject: [PATCH 012/154] Major bump to v19.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c3d23517c5c..cf2c2ac848a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "18.0.0", + "version": "19.0.0", "description": "Primer react components", "main": "dist/index.umd.js", "module": "dist/index.esm.js", From d1287216de033520423020be1c308e125afc0b89 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 14 Apr 2020 13:22:20 -0700 Subject: [PATCH 013/154] Add FLEX to Box and make Flex display:flex --- docs/content/BorderBox.md | 2 +- docs/content/Box.md | 2 +- docs/content/Flex.md | 5 ++--- docs/content/PointerBox.md | 2 +- docs/content/Popover.md | 2 +- docs/content/SideNav.md | 2 +- index.d.ts | 23 ++++++++--------------- src/Box.js | 4 +++- src/Flex.js | 8 ++------ 9 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/content/BorderBox.md b/docs/content/BorderBox.md index 287115e210f..69925bc419f 100644 --- a/docs/content/BorderBox.md +++ b/docs/content/BorderBox.md @@ -13,7 +13,7 @@ BorderBox is a Box component with a border. When no `borderColor` is present, th ## System props -BorderBox components get `COMMON`, `LAYOUT` and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props. +BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Box.md b/docs/content/Box.md index e101a340098..ec0d92d401b 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -18,7 +18,7 @@ The Box component serves as a wrapper component for most layout related needs. U ## System props -Box components get the `COMMON` and `LAYOUT` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props. +Box components get the `COMMON`, `LAYOUT`, and `FLEX` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Flex.md b/docs/content/Flex.md index a93087d9d88..812e6f33775 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -2,9 +2,9 @@ title: Flex --- -Flex is a component that will allow you to use flexbox properties. +The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. -*Previously, `Flex.Item` was used for flex item specific properties - we've added all properties to the `Flex` component, but are keeping Flex.Item around for backwards compatibility.* +*Previously, `Flex.Item` was used for flex item specific properties - we've added all properties to the `Box` and `Flex` components, but are keeping `Flex.Item` around for backwards compatibility.* ## Default example @@ -28,7 +28,6 @@ Flex is a component that will allow you to use flexbox properties. Flex components get `FLEX`, `COMMON`, and `LAYOUT` system props. - Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/PointerBox.md b/docs/content/PointerBox.md index 1f0b4b9f7b2..070ccb4a5b0 100644 --- a/docs/content/PointerBox.md +++ b/docs/content/PointerBox.md @@ -14,7 +14,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it. ## System props -PointerBox components get `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. +PointerBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Popover.md b/docs/content/Popover.md index 29f20a76ad2..2e412dcd1eb 100644 --- a/docs/content/Popover.md +++ b/docs/content/Popover.md @@ -86,7 +86,7 @@ render() ## System props -`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props. +`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 61cc1994180..43729417878 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -133,7 +133,7 @@ If using React Router, you can use the `as` prop to render the element as a `Nav ## System props -`SideNav` components get `COMMON`, `BORDER`, and `LAYOUT` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. +`SideNav` components get `COMMON`, `BORDER`, `LAYOUT`, and `FLEX` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/index.d.ts b/index.d.ts index 309e1b315b7..b679452f065 100644 --- a/index.d.ts +++ b/index.d.ts @@ -37,29 +37,22 @@ declare module '@primer/components' { StyledSystem.BottomProps, StyledSystem.LeftProps {} - interface FlexItemProps + export interface BoxProps extends BaseProps, CommonProps, LayoutProps, - StyledSystem.FlexProps, - StyledSystem.JustifySelfProps, - StyledSystem.AlignSelfProps, - StyledSystem.OrderProps {} + StyledSystem.FlexboxProps, + Omit, 'color'> {} + + export const Box: React.FunctionComponent - interface FlexProps extends BaseProps, CommonProps, LayoutProps, StyledSystem.FlexboxProps, BoxProps {} + interface FlexProps extends BoxProps {} + interface FlexItemProps extends BoxProps {} export const Flex: React.FunctionComponent & { Item: React.FunctionComponent } - export interface BoxProps - extends BaseProps, - CommonProps, - LayoutProps, - Omit, 'color'> {} - - export const Box: React.FunctionComponent - export interface TextProps extends BaseProps, CommonProps, @@ -349,7 +342,7 @@ declare module '@primer/components' { Header: React.FunctionComponent } - export interface SideNavProps extends CommonProps, BorderProps, Omit, 'color'> { + export interface SideNavProps extends CommonProps, BorderBoxProps, Omit, 'color'> { bordered?: boolean variant?: 'normal' | 'lightweight' } diff --git a/src/Box.js b/src/Box.js index 82b53baf5eb..1111ce324ff 100644 --- a/src/Box.js +++ b/src/Box.js @@ -2,10 +2,11 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import {space, color} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' -import {LAYOUT} from './constants' +import {FLEX, LAYOUT} from './constants' import theme from './theme' const Box = styled.div` + ${FLEX} ${LAYOUT} ${space} ${color} @@ -14,6 +15,7 @@ const Box = styled.div` Box.defaultProps = {theme} Box.propTypes = { + ...FLEX.propTypes, ...LAYOUT.propTypes, ...systemPropTypes.space, ...systemPropTypes.color, diff --git a/src/Flex.js b/src/Flex.js index b21e7331f80..81ff5639fdf 100644 --- a/src/Flex.js +++ b/src/Flex.js @@ -4,14 +4,10 @@ import {FLEX} from './constants' import theme from './theme' import Box from './Box' -const Flex = styled(Box)` - ${FLEX}; -` +const Flex = styled(Box)`` // Keeping this around for backwards compatibility, but it's the same as `FLEX` -Flex.Item = styled(Box)` - ${FLEX}; -` +Flex.Item = styled(Box)`` Flex.defaultProps = { theme, From fb27355fb86b507cfdce7133ac66dd9b698cb986 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 14 Apr 2020 14:18:50 -0700 Subject: [PATCH 014/154] Add Dropdown.Button to FilteredSearch example --- docs/content/FilteredSearch.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md index 471c706f36d..1eb8e3a81f9 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -9,7 +9,8 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side ```jsx live - + + Filter Item 1 Item 2 From 688e1b64d3c4d68c1e702279f76782a4c9208bb3 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 11:32:42 -0700 Subject: [PATCH 015/154] Split BorderBox default props --- docs/content/BorderBox.md | 5 +++-- src/BorderBox.js | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/content/BorderBox.md b/docs/content/BorderBox.md index 69925bc419f..7b500c26581 100644 --- a/docs/content/BorderBox.md +++ b/docs/content/BorderBox.md @@ -19,7 +19,8 @@ BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. | Prop name | Type | Default | Description | | :- | :- | :-: | :- | -| border | String | 'borders.1' (from theme) | Sets the border, use theme values or provide your own. | +| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | +| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | | borderColor | String | 'gray.2' (from theme) | Sets the border color, use theme values or provide your own. | -| borderRadius | String or Number| 'radii.1' (from theme)| Sets the border radius, use theme values or provide your own. | +| borderRadius | String or Number| 2 (from theme)| Sets the border radius, use theme values or provide your own. | | boxShadow | String | | Sets box shadow, use theme values or provide your own. | diff --git a/src/BorderBox.js b/src/BorderBox.js index 2cdde7b595d..f53ac7ad007 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -8,7 +8,8 @@ const BorderBox = styled(Box)(BORDER) BorderBox.defaultProps = { theme, - border: '1px solid', + borderWidth: '1px', + borderStyle: 'solid', borderColor: 'gray.2', borderRadius: 2 } From 3db413fa1155491207b95d273e9fa16adf871d65 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 11:34:57 -0700 Subject: [PATCH 016/154] Shadow Doctocat components that use the old BorderBox styles --- .../gatsby-theme-doctocat/components/code.js | 48 +++++++ .../components/layout.js | 88 ++++++++++++ .../components/nav-drawer.js | 131 ++++++++++++++++++ .../components/nav-items.js | 71 ++++++++++ .../components/page-footer.js | 27 ++++ .../components/sidebar.js | 26 ++++ .../components/wrap-root-element.js.temp | 45 ++++++ 7 files changed, 436 insertions(+) create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/code.js create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/layout.js create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/code.js b/docs/src/@primer/gatsby-theme-doctocat/components/code.js new file mode 100644 index 00000000000..f9995e5036e --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/code.js @@ -0,0 +1,48 @@ +import {Absolute, BorderBox, Relative, Text} from '@primer/components' +import Highlight, {defaultProps} from 'prism-react-renderer' +import githubTheme from 'prism-react-renderer/themes/github' +import React from 'react' +import ClipboardCopy from '@primer/gatsby-theme-doctocat/src/components/clipboard-copy' +import LiveCode from '@primer/gatsby-theme-doctocat/src/components/live-code' + +function Code({className, children, live, noinline}) { + const language = className ? className.replace(/language-/, '') : '' + const code = children.trim() + + if (live) { + return + } + + return ( + + + + + + {({className, style, tokens, getLineProps, getTokenProps}) => ( + + {tokens.map((line, i) => ( + // eslint-disable-next-line react/no-array-index-key +
+ {line.map((token, key) => ( + // eslint-disable-next-line react/no-array-index-key + + ))} +
+ ))} + + )} + + + ) +} + +export default Code diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/layout.js b/docs/src/@primer/gatsby-theme-doctocat/components/layout.js new file mode 100644 index 00000000000..18c4d1b9a02 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/layout.js @@ -0,0 +1,88 @@ +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 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' +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' + +function Layout({children, pageContext}) { + const {title, description, status, source, additionalContributors = []} = pageContext.frontmatter + + return ( + + +
+ + + + + + + {title} + + {pageContext.tableOfContents.items ? ( + + + Table of contents + + + + ) : null} + + {status || source ? ( + + {status ? : null} + + {source ? : null} + + ) : null} + {pageContext.tableOfContents.items ? ( + +
+ {({open}) => ( + <> + + + Table of contents + + + + + + )} +
+ + ) : null} + {children} + ({login})))} + /> + + + + + ) +} + +export default Layout diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js b/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js new file mode 100644 index 00000000000..5703f3685aa --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js @@ -0,0 +1,131 @@ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +// +// ^- these area here because Doctocat has eslint errors that are not reported +// 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 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' + +export function useNavDrawerState(breakpoint) { + // Handle string values from themes with units at the end + if (typeof breakpoint === 'string') { + breakpoint = parseInt(breakpoint, 10) + } + const [isOpen, setOpen] = React.useState(false) + + const onResize = React.useCallback(() => { + if (window.innerWidth >= breakpoint) { + setOpen(false) + } + }, [setOpen, breakpoint]) + + const debouncedOnResize = React.useCallback(debounce(onResize, 250), [onResize]) + + React.useEffect(() => { + if (isOpen) { + window.addEventListener('resize', debouncedOnResize) + return () => { + // cancel any debounced invocation of the resize handler + debouncedOnResize.cancel() + window.removeEventListener('resize', debouncedOnResize) + } + } + }, [isOpen, debouncedOnResize]) + + return [isOpen, setOpen] +} + +function NavDrawer({isOpen, onDismiss}) { + const siteMetadata = useSiteMetadata() + return ( + + + + + + + Primer + + + + + + + + + + + {navItems.length > 0 ? ( + + + {siteMetadata.title} + + + + ) : null} + + + ) +} + +function PrimerNavItems({items}) { + return items.map((item, index) => { + return ( + + {item.children ? ( + // eslint-disable-next-line react/no-array-index-key +
+ {({open, toggle}) => ( + <> + + + {item.title} + + + + + {item.children.map(child => ( + + {child.title} + + ))} + + + )} +
+ ) : ( + // eslint-disable-next-line react/no-array-index-key + + {item.title} + + )} + + ) + }) +} + +export default NavDrawer diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js new file mode 100644 index 00000000000..bdf3fd9a788 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js @@ -0,0 +1,71 @@ +import {BorderBox, Flex, Link, StyledOcticon, themeGet} from '@primer/components' +import {LinkExternal} from '@primer/octicons-react' +import {Link as GatsbyLink} from 'gatsby' +import preval from 'preval.macro' +import React from 'react' +import styled from 'styled-components' + +// This code needs to run at build-time so it can access the file system. +const repositoryUrl = preval` + const readPkgUp = require('read-pkg-up') + const getPkgRepo = require('get-pkg-repo') + try { + const repo = getPkgRepo(readPkgUp.sync().package) + module.exports = \`https://github.com/\${repo.user}/\${repo.project}\` + } catch (error) { + module.exports = '' + } +` + +const NavLink = styled(Link)` + &.active { + font-weight: ${themeGet('fontWeights.bold')}; + color: ${themeGet('colors.gray.8')}; + } +` + +function NavItems({items}) { + return ( + <> + {items.map(item => ( + + + + {item.title} + + {item.children ? ( + + {item.children.map(child => ( + + {child.title} + + ))} + + ) : null} + + + ))} + {repositoryUrl ? ( + + + + GitHub + + + + + ) : null} + + ) +} + +export default NavItems diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js b/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js new file mode 100644 index 00000000000..5fc04e1997c --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js @@ -0,0 +1,27 @@ +import {BorderBox, Grid, Link, StyledOcticon} from '@primer/components' +import {Pencil} from '@primer/octicons-react' +import React from 'react' +import Contributors from '@primer/gatsby-theme-doctocat/src/components/contributors' + +function PageFooter({editUrl, contributors}) { + return editUrl || contributors.length > 0 ? ( + + + {editUrl ? ( + + + Edit this page on GitHub + + ) : null} + + {contributors.length > 0 ? : null} + + + ) : null +} + +PageFooter.defaultProps = { + contributors: [] +} + +export default PageFooter diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js new file mode 100644 index 00000000000..c6d6cc34680 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -0,0 +1,26 @@ +import {BorderBox, Flex, Position} from '@primer/components' +import React from 'react' +import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml' +import {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header' +import NavItems from '@primer/gatsby-theme-doctocat/src/components/nav-items' + +function Sidebar() { + return ( + + + + + + + + ) +} + +export default Sidebar diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp new file mode 100644 index 00000000000..49c1a4309c4 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp @@ -0,0 +1,45 @@ +import {MDXProvider} from '@mdx-js/react' +import {Link, theme} from '@primer/components' +import React from 'react' +import {ThemeProvider} from 'styled-components' +import Blockquote from '@primer/gatsby-theme-doctocat/src/components/blockquote' +import Code from './code' +import DescriptionList from '@primer/gatsby-theme-doctocat/src/components/description-list' +import {H1, H2, H3, H4, H5, H6} from '@primer/gatsby-theme-doctocat/src/components/heading' +import HorizontalRule from '@primer/gatsby-theme-doctocat/src/components/horizontal-rule' +import Image from '@primer/gatsby-theme-doctocat/src/components/image' +import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' +import List from '@primer/gatsby-theme-doctocat/src/components/list' +import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph' +import Table from '@primer/gatsby-theme-doctocat/src/components/table' + +const components = { + a: Link, + pre: props => props.children, + code: Code, + inlineCode: InlineCode, + table: Table, + img: Image, + p: Paragraph, + hr: HorizontalRule, + blockquote: Blockquote, + h1: H1, + h2: H2, + h3: H3, + h4: H4, + h5: H5, + h6: H6, + ul: List, + ol: List.withComponent('ol'), + dl: DescriptionList +} + +function wrapRootElement({element}) { + return ( + + {element} + + ) +} + +export default wrapRootElement From 80774f488b67a70ebce97df7ed7a090c588126c3 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 11:48:14 -0700 Subject: [PATCH 017/154] Update components for new BorderBox API --- docs/content/SideNav.md | 2 +- src/CircleOcticon.js | 2 +- src/SideNav.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 43729417878..40dc70e461b 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -71,7 +71,7 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more ```jsx live - + Menu diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index e5bddbe059e..72eef37f19c 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -9,7 +9,7 @@ function CircleOcticon(props) { const {size, as} = props const {icon, bg, as: asProp, ...rest} = props return ( - + diff --git a/src/SideNav.js b/src/SideNav.js index 517954d063f..c1b222ee687 100644 --- a/src/SideNav.js +++ b/src/SideNav.js @@ -13,7 +13,7 @@ function SideNavBase({variant, className, bordered, children, ...props}) { const newClassName = classnames(className, `variant-${variantClassName}`) if (!bordered) { - props = {...props, border: 'none'} + props = {...props, borderWidth: 0} } return ( From d6dba255a7029fe171aa98b4c5ded3eb1cfa8663 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 11:53:53 -0700 Subject: [PATCH 018/154] Update tests for new BorderBox API --- src/__tests__/Position.js | 12 ++++-- src/__tests__/__snapshots__/Flex.js.snap | 34 ++++++++-------- .../__snapshots__/PointerBox.js.snap | 9 +++-- src/__tests__/__snapshots__/Popover.js.snap | 39 ++++++++++++------- src/__tests__/__snapshots__/SideNav.js.snap | 3 +- src/__tests__/__snapshots__/Timeline.js.snap | 22 +++++------ 6 files changed, 70 insertions(+), 49 deletions(-) diff --git a/src/__tests__/Position.js b/src/__tests__/Position.js index f89bfd21958..cff834a7de8 100644 --- a/src/__tests__/Position.js +++ b/src/__tests__/Position.js @@ -35,7 +35,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'absolute') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) it('respects the "as" prop', () => { @@ -71,7 +72,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'fixed') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) }) @@ -103,7 +105,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'relative') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) }) @@ -132,7 +135,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'sticky') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) }) }) diff --git a/src/__tests__/__snapshots__/Flex.js.snap b/src/__tests__/__snapshots__/Flex.js.snap index 5ceee15024e..9688ef95fb8 100644 --- a/src/__tests__/__snapshots__/Flex.js.snap +++ b/src/__tests__/__snapshots__/Flex.js.snap @@ -2,13 +2,13 @@ exports[`Flex respects alignContent 1`] = ` .c0 { + -webkit-align-content: start; + -ms-flex-line-pack: start; + align-content: start; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-content: start; - -ms-flex-line-pack: start; - align-content: start; }
and 1`] = ` .c1 { background-color: #d73a49; - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; } @@ -54,7 +55,8 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` exports[`PointerBox passes the "borderColor" prop to both and 1`] = ` .c1 { border-color: #d73a49; - border: 1px solid; + border-width: 1px; + border-style: solid; border-radius: 6px; } @@ -103,7 +105,8 @@ exports[`PointerBox passes the "borderColor" prop to both and in with relative positioning 1`] = ` .c1 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; } diff --git a/src/__tests__/__snapshots__/Popover.js.snap b/src/__tests__/__snapshots__/Popover.js.snap index dfa98493cf5..197c744d023 100644 --- a/src/__tests__/__snapshots__/Popover.js.snap +++ b/src/__tests__/__snapshots__/Popover.js.snap @@ -8,7 +8,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of b } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -216,7 +217,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of b } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -424,7 +426,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of b } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -632,7 +635,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of l } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -840,7 +844,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of l } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1048,7 +1053,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of l } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1256,7 +1262,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of r } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1464,7 +1471,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of r } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1672,7 +1680,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of r } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1880,7 +1889,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of t } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -2088,7 +2098,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of t } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -2296,7 +2307,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of t } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -2665,7 +2677,8 @@ exports[`Popover and Popover.Content renders with default props 1`] = ` exports[`Popover and Popover.Content renders with default props 2`] = ` .c0 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap index ccd14ec95f5..3f4b424763e 100644 --- a/src/__tests__/__snapshots__/SideNav.js.snap +++ b/src/__tests__/__snapshots__/SideNav.js.snap @@ -2,7 +2,8 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = ` .c0 { - border: none; + border-width: 0; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; } diff --git a/src/__tests__/__snapshots__/Timeline.js.snap b/src/__tests__/__snapshots__/Timeline.js.snap index adccf37419a..c7662e3418a 100644 --- a/src/__tests__/__snapshots__/Timeline.js.snap +++ b/src/__tests__/__snapshots__/Timeline.js.snap @@ -49,17 +49,6 @@ exports[`Timeline.Badge renders 1`] = ` } .c1 { - overflow: hidden; - width: 32px; - height: 32px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-right: 8px; - margin-left: -15px; - color: #444d56; - background-color: #e1e4e8; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -71,6 +60,17 @@ exports[`Timeline.Badge renders 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + overflow: hidden; + width: 32px; + height: 32px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-right: 8px; + margin-left: -15px; + color: #444d56; + background-color: #e1e4e8; border-radius: 50%; border: 2px solid #fff; } From a31d019fb5d777aabc2aac3f932bcc2697e6be02 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 12:00:47 -0700 Subject: [PATCH 019/154] Update BorderBoxProps TS interface --- index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index b679452f065..216d3c4ad3e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -116,7 +116,8 @@ declare module '@primer/components' { export const BaseStyles: React.FunctionComponent export interface BorderBoxProps extends CommonProps, LayoutProps, BorderProps, BoxProps { - border?: string + borderWidth?: string | number + borderStyle?: string borderColor?: string borderRadius?: string | number boxShadow?: string From 5b37a2a1a738900806a7a620cb7ed769d62c4f03 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 16 Apr 2020 12:00:56 -0700 Subject: [PATCH 020/154] Add usage note to BorderBox docs --- docs/content/BorderBox.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/content/BorderBox.md b/docs/content/BorderBox.md index 7b500c26581..2a72369a085 100644 --- a/docs/content/BorderBox.md +++ b/docs/content/BorderBox.md @@ -11,6 +11,8 @@ BorderBox is a Box component with a border. When no `borderColor` is present, th This is a BorderBox ``` +Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`. + ## System props BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. From 88aa3e7eca7b8e423dc6a36cdb4a44323b0a88d2 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 17 Apr 2020 11:58:08 -0700 Subject: [PATCH 021/154] Deprecate Flex.Item --- docs/content/Flex.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/Flex.md b/docs/content/Flex.md index 812e6f33775..51b079fc056 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -4,7 +4,7 @@ title: Flex The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. -*Previously, `Flex.Item` was used for flex item specific properties - we've added all properties to the `Box` and `Flex` components, but are keeping `Flex.Item` around for backwards compatibility.* +*Previously, a `Flex.Item` component was used for flex item specific properties; this component is deprecated in favor of the `Box` component, which now has all such properties.* ## Default example From 4d3d9741169171d838581a97832fdd1334955a6d Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 17 Apr 2020 11:58:21 -0700 Subject: [PATCH 022/154] Use COMMON instead of space and color for Box system props --- src/Box.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Box.js b/src/Box.js index 1111ce324ff..a94916488c9 100644 --- a/src/Box.js +++ b/src/Box.js @@ -1,15 +1,13 @@ import styled from 'styled-components' import PropTypes from 'prop-types' -import {space, color} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' -import {FLEX, LAYOUT} from './constants' +import {COMMON, FLEX, LAYOUT} from './constants' import theme from './theme' const Box = styled.div` + ${COMMON} ${FLEX} ${LAYOUT} - ${space} - ${color} ` Box.defaultProps = {theme} From 30ff26ef9a22ce72bf4776b8e9c2dff0095f2da4 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 17 Apr 2020 11:58:40 -0700 Subject: [PATCH 023/154] Update system props tests for Box and BorderBox --- src/__tests__/BorderBox.js | 4 +++- src/__tests__/Box.js | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js index 67a2c3becc8..92daeb9ec1d 100644 --- a/src/__tests__/BorderBox.js +++ b/src/__tests__/BorderBox.js @@ -2,7 +2,7 @@ import React from 'react' import theme, {colors} from '../theme' import BorderBox from '../BorderBox' import {render} from '../utils/testing' -import {LAYOUT, COMMON} from '../constants' +import {LAYOUT, COMMON, BORDER, FLEX} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' @@ -19,6 +19,8 @@ describe('BorderBox', () => { it('implements layout system props', () => { expect(BorderBox).toImplementSystemProps(LAYOUT) expect(BorderBox).toImplementSystemProps(COMMON) + expect(BorderBox).toImplementSystemProps(BORDER) + expect(BorderBox).toImplementSystemProps(FLEX) }) it('has default theme', () => { diff --git a/src/__tests__/Box.js b/src/__tests__/Box.js index 0cb4bb2820a..2f1d48f7553 100644 --- a/src/__tests__/Box.js +++ b/src/__tests__/Box.js @@ -2,7 +2,7 @@ import React from 'react' import Box from '../Box' import theme from '../theme' import {render} from '../utils/testing' -import {LAYOUT, COMMON} from '../constants' +import {LAYOUT, COMMON, FLEX} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' @@ -17,8 +17,9 @@ describe('Box', () => { }) it('implements system props', () => { - expect(Box).toImplementSystemProps(LAYOUT) expect(Box).toImplementSystemProps(COMMON) + expect(Box).toImplementSystemProps(LAYOUT) + expect(Box).toImplementSystemProps(FLEX) }) it('respects the "as" prop', () => { From 286582fc3bd3910644c00265316828bd4330bae2 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 17 Apr 2020 11:58:50 -0700 Subject: [PATCH 024/154] Update snapshots --- .../__snapshots__/Pagination.js.snap | 1 + src/__tests__/__snapshots__/Box.js.snap | 16 +++++++++ src/__tests__/__snapshots__/Flex.js.snap | 33 +++++++++++++++++++ src/__tests__/__snapshots__/Grid.js.snap | 19 +++++++++++ src/__tests__/__snapshots__/Timeline.js.snap | 28 +++++++++++++--- 5 files changed, 93 insertions(+), 4 deletions(-) diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.js.snap b/src/__tests__/Pagination/__snapshots__/Pagination.js.snap index 04172d2115d..a795623b994 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.js.snap +++ b/src/__tests__/Pagination/__snapshots__/Pagination.js.snap @@ -3,6 +3,7 @@ exports[`Pagination matches snapshot 1`] = ` .c1 { display: inline-block; + display: inline-block; } .c2 { diff --git a/src/__tests__/__snapshots__/Box.js.snap b/src/__tests__/__snapshots__/Box.js.snap index fdc1decf0e6..19b36c03c10 100644 --- a/src/__tests__/__snapshots__/Box.js.snap +++ b/src/__tests__/__snapshots__/Box.js.snap @@ -141,6 +141,7 @@ exports[`Box renders without any props 1`] = ` exports[`Box respects display 1`] = ` .c0 { display: inline; + display: inline; }
Date: Fri, 17 Apr 2020 12:12:35 -0700 Subject: [PATCH 025/154] Update some more propTypes --- index.d.ts | 8 +------- src/Flex.js | 6 ++---- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/index.d.ts b/index.d.ts index 216d3c4ad3e..f4629d89028 100644 --- a/index.d.ts +++ b/index.d.ts @@ -115,13 +115,7 @@ declare module '@primer/components' { export const BaseStyles: React.FunctionComponent - export interface BorderBoxProps extends CommonProps, LayoutProps, BorderProps, BoxProps { - borderWidth?: string | number - borderStyle?: string - borderColor?: string - borderRadius?: string | number - boxShadow?: string - } + export interface BorderBoxProps extends BorderProps, BoxProps {} export const BorderBox: React.FunctionComponent diff --git a/src/Flex.js b/src/Flex.js index 81ff5639fdf..32bb784d4e3 100644 --- a/src/Flex.js +++ b/src/Flex.js @@ -1,6 +1,5 @@ import styled from 'styled-components' import PropTypes from 'prop-types' -import {FLEX} from './constants' import theme from './theme' import Box from './Box' @@ -17,12 +16,11 @@ Flex.Item.defaultProps = { theme } Flex.propTypes = { - ...Box.propTypes, - ...FLEX.propTypes + ...Box.propTypes } Flex.Item.propTypes = { - ...FLEX.propTypes, + ...Box.propTypes, theme: PropTypes.object } From 0eb814de15962524c6e2714c7744f2ea406123eb Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 17 Apr 2020 12:18:20 -0700 Subject: [PATCH 026/154] Remove Flex.Item :fire: --- docs/content/Flex.md | 2 +- index.d.ts | 8 ++------ src/Flex.js | 13 +------------ 3 files changed, 4 insertions(+), 19 deletions(-) diff --git a/docs/content/Flex.md b/docs/content/Flex.md index 51b079fc056..245f917151a 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -4,7 +4,7 @@ title: Flex The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. -*Previously, a `Flex.Item` component was used for flex item specific properties; this component is deprecated in favor of the `Box` component, which now has all such properties.* +*Previously, a `Flex.Item` component was used for flex item specific properties; `Box` now contains all those properties and should be used in its place.* ## Default example diff --git a/index.d.ts b/index.d.ts index f4629d89028..cece3471edd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -22,8 +22,7 @@ declare module '@primer/components' { } interface BorderProps - extends BaseProps, - StyledSystem.BordersProps, + extends StyledSystem.BordersProps, StyledSystem.BorderColorProps, StyledSystem.BoxShadowProps, StyledSystem.BorderRadiusProps {} @@ -47,11 +46,8 @@ declare module '@primer/components' { export const Box: React.FunctionComponent interface FlexProps extends BoxProps {} - interface FlexItemProps extends BoxProps {} - export const Flex: React.FunctionComponent & { - Item: React.FunctionComponent - } + export const Flex: React.FunctionComponent & {} export interface TextProps extends BaseProps, diff --git a/src/Flex.js b/src/Flex.js index 32bb784d4e3..5f0a95f7c09 100644 --- a/src/Flex.js +++ b/src/Flex.js @@ -1,27 +1,16 @@ import styled from 'styled-components' -import PropTypes from 'prop-types' import theme from './theme' import Box from './Box' const Flex = styled(Box)`` -// Keeping this around for backwards compatibility, but it's the same as `FLEX` -Flex.Item = styled(Box)`` - Flex.defaultProps = { theme, display: 'flex' } -Flex.Item.defaultProps = { - theme -} + Flex.propTypes = { ...Box.propTypes } -Flex.Item.propTypes = { - ...Box.propTypes, - theme: PropTypes.object -} - export default Flex From ab8ff2fb9e0384ac2b9d055c05801511fee86ae4 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 17 Apr 2020 13:13:39 -0700 Subject: [PATCH 027/154] Remove Flex.Item tests --- src/__tests__/FlexItem.js | 39 -------------------- src/__tests__/__snapshots__/FlexItem.js.snap | 27 -------------- 2 files changed, 66 deletions(-) delete mode 100644 src/__tests__/FlexItem.js delete mode 100644 src/__tests__/__snapshots__/FlexItem.js.snap diff --git a/src/__tests__/FlexItem.js b/src/__tests__/FlexItem.js deleted file mode 100644 index 86330c88773..00000000000 --- a/src/__tests__/FlexItem.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import Flex from '../Flex' -import {FLEX} from '../constants' -import {render} from '../utils/testing' -import {render as HTMLRender, cleanup} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' -import 'babel-polyfill' -expect.extend(toHaveNoViolations) - -describe('Flex.Item', () => { - it('implements system props', () => { - expect(Flex.Item).toImplementSystemProps(FLEX) - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - cleanup() - }) - - it('has default theme', () => { - expect(Flex.Item).toSetDefaultTheme() - }) - - it('respects alignSelf', () => { - expect(render()).toMatchSnapshot() - }) - - it('renders as correct tag', () => { - const item = render( - - hi - - ) - expect(item.type).toEqual('button') - expect(item).toMatchSnapshot() - }) -}) diff --git a/src/__tests__/__snapshots__/FlexItem.js.snap b/src/__tests__/__snapshots__/FlexItem.js.snap deleted file mode 100644 index 577fcd760be..00000000000 --- a/src/__tests__/__snapshots__/FlexItem.js.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Flex.Item renders as correct tag 1`] = ` -.c0 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - - -`; - -exports[`Flex.Item respects alignSelf 1`] = ` -.c0 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - -
-`; From 236f05d2e8ae2e13a5ce68ef0e28cc048b3ecc00 Mon Sep 17 00:00:00 2001 From: skw Date: Fri, 17 Apr 2020 14:43:55 -0700 Subject: [PATCH 028/154] Remove "Segoe UI Symbol" from font stack --- src/theme.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/theme.js b/src/theme.js index e0542dfa958..0e3b08f834d 100644 --- a/src/theme.js +++ b/src/theme.js @@ -64,8 +64,7 @@ const fonts = { 'Arial', 'sans-serif', 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol' + 'Segoe UI Emoji' ]), mono: fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace']) } From c27ea3fe8a7dcc8b7e3fe146a9efdda76c5c75f0 Mon Sep 17 00:00:00 2001 From: Albin Groen Date: Sat, 18 Apr 2020 15:40:22 +0200 Subject: [PATCH 029/154] Default to center-align button text --- src/ButtonStyles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index d0133010ca1..5edb71f6b5f 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -14,6 +14,7 @@ export default css` border-radius: ${get('radii.2')}; appearance: none; text-decoration: none; + text-align: center; &:hover { // needed to override link styles From 99830547f42312e3148aef4419688c3486efd8d7 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 20 Apr 2020 11:24:40 -0700 Subject: [PATCH 030/154] Clean up BorderProps --- index.d.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/index.d.ts b/index.d.ts index cece3471edd..d5b81e10bed 100644 --- a/index.d.ts +++ b/index.d.ts @@ -23,9 +23,7 @@ declare module '@primer/components' { interface BorderProps extends StyledSystem.BordersProps, - StyledSystem.BorderColorProps, - StyledSystem.BoxShadowProps, - StyledSystem.BorderRadiusProps {} + StyledSystem.BoxShadowProps {} interface PositionProps extends BaseProps, From 0d4f730d16170407beba4f41f68bfd9838b68512 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 20 Apr 2020 11:25:14 -0700 Subject: [PATCH 031/154] Remove unused union --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index d5b81e10bed..711c04bf6f9 100644 --- a/index.d.ts +++ b/index.d.ts @@ -45,7 +45,7 @@ declare module '@primer/components' { interface FlexProps extends BoxProps {} - export const Flex: React.FunctionComponent & {} + export const Flex: React.FunctionComponent export interface TextProps extends BaseProps, From f57c5f9cb7a0d1f1ca168c5c1933921f86294e79 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 20 Apr 2020 14:37:21 -0700 Subject: [PATCH 032/154] Use COMMON for Box propTypes --- src/Box.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Box.js b/src/Box.js index a94916488c9..158564c07ff 100644 --- a/src/Box.js +++ b/src/Box.js @@ -1,6 +1,5 @@ import styled from 'styled-components' import PropTypes from 'prop-types' -import systemPropTypes from '@styled-system/prop-types' import {COMMON, FLEX, LAYOUT} from './constants' import theme from './theme' @@ -13,10 +12,9 @@ const Box = styled.div` Box.defaultProps = {theme} Box.propTypes = { + ...COMMON.propTypes, ...FLEX.propTypes, ...LAYOUT.propTypes, - ...systemPropTypes.space, - ...systemPropTypes.color, theme: PropTypes.object } From 791e8284989dc492e0ea9773cb735bc98656160b Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 20 Apr 2020 14:39:12 -0700 Subject: [PATCH 033/154] Update border styles across package --- src/AvatarStack.js | 71 ++++++++++++++--------------- src/Label.js | 2 +- src/Pagination/Pagination.js | 2 +- src/SelectMenu/SelectMenuDivider.js | 2 +- src/SelectMenu/SelectMenuFilter.js | 2 +- src/SelectMenu/SelectMenuFooter.js | 2 +- src/SelectMenu/SelectMenuItem.js | 2 +- src/SelectMenu/SelectMenuList.js | 2 +- src/SelectMenu/SelectMenuModal.js | 2 +- src/SelectMenu/SelectMenuTab.js | 2 +- src/SelectMenu/SelectMenuTabs.js | 2 +- src/SideNav.js | 2 +- src/theme.js | 4 +- 13 files changed, 48 insertions(+), 49 deletions(-) diff --git a/src/AvatarStack.js b/src/AvatarStack.js index f737e2aad93..1a91360b2ae 100644 --- a/src/AvatarStack.js +++ b/src/AvatarStack.js @@ -1,41 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' +import styled, {css} from 'styled-components' import {get, COMMON} from './constants' import theme from './theme' -const alignRightStyles = theme => { - return ` - right: 0; - flex-direction: row-reverse; - - &:hover .AvatarItem { - margin-right: 0; - margin-left: 3px; - } - - .AvatarItem-more { - background: ${get('colors.gray.3')(theme)}; - - &::before { - width: 5px; - } - - &::after { - background: ${get('colors.gray.1')(theme)}; - width: 2px; - } - } - - .AvatarItem { - margin-right: 0; - margin-left: -11px; - border-right: 0; - border-left: ${get('borders.1')(theme)} ${get('colors.white')(theme)}; - } - ` -} - const transformChildren = children => { const count = children.length return React.Children.map(children, (child, index) => { @@ -85,7 +53,7 @@ const AvatarStackBody = styled.span` box-sizing: content-box; margin-right: -11px; background-color: ${get('colors.white')}; - border-right: ${get('borders.1')} ${get('colors.white')}; + border-right: ${get('borderWidths.1')} solid ${get('colors.white')}; border-radius: 2px; transition: margin 0.1s ease-in-out; @@ -122,7 +90,7 @@ const AvatarStackBody = styled.span` height: 20px; content: ''; border-radius: 2px; - outline: ${get('borders.1')} ${get('colors.white')}; + outline: ${get('borderWidths.1')} solid ${get('colors.white')}; } &::before { @@ -135,7 +103,38 @@ const AvatarStackBody = styled.span` background: ${get('colors.gray.3')}; } } - ${props => (props.alignRight ? alignRightStyles(props.theme) : '')} + + ${props => + props.alignRight && + css` + right: 0; + flex-direction: row-reverse; + + &:hover .AvatarItem { + margin-right: 0; + margin-left: 3px; + } + + .AvatarItem-more { + background: ${get('colors.gray.3')}; + + &::before { + width: 5px; + } + + &::after { + background: ${get('colors.gray.1')}; + width: 2px; + } + } + + .AvatarItem { + margin-right: 0; + margin-left: -11px; + border-right: 0; + border-left: ${get('borderWidths.1')} solid ${get('colors.white')}; + } + `} ` const AvatarStack = ({children = [], alignRight, ...rest}) => { return ( diff --git a/src/Label.js b/src/Label.js index 3e23ad361fd..628baad148a 100644 --- a/src/Label.js +++ b/src/Label.js @@ -8,7 +8,7 @@ const outlineStyles = css` margin-top: -1px; // offsets the 1px border margin-bottom: -1px; // offsets the 1px border color: ${get('colors.gray.6')}; - border: ${get('borders.1')} ${get('colors.blackfade15')}; + border: ${get('borderWidths.1')} solid ${get('colors.blackfade15')}; box-shadow: none; ${borderColor}; ${COMMON}; diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index 200f6788464..cc7b19da108 100644 --- a/src/Pagination/Pagination.js +++ b/src/Pagination/Pagination.js @@ -20,7 +20,7 @@ const Page = styled.a` cursor: pointer; user-select: none; background: ${get('pagination.colors.normal.bg')}; - border: ${get('borders.1')} ${get('pagination.colors.normal.border')}; + border: ${get('borderWidths.1')} solid ${get('pagination.colors.normal.border')}; text-decoration: none; &:first-child { diff --git a/src/SelectMenu/SelectMenuDivider.js b/src/SelectMenu/SelectMenuDivider.js index 7ecebf1c9ea..4b45477efa5 100644 --- a/src/SelectMenu/SelectMenuDivider.js +++ b/src/SelectMenu/SelectMenuDivider.js @@ -9,7 +9,7 @@ const dividerStyles = css` font-weight: ${get('fontWeights.bold')}; color: ${get('colors.text.grayLight')}; background-color: ${get('colors.bg.gray')}; - border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')}; + border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')}; ` const SelectMenuDivider = styled.div` diff --git a/src/SelectMenu/SelectMenuFilter.js b/src/SelectMenu/SelectMenuFilter.js index 085868b9127..6f2add13320 100644 --- a/src/SelectMenu/SelectMenuFilter.js +++ b/src/SelectMenu/SelectMenuFilter.js @@ -9,7 +9,7 @@ import {MenuContext} from './SelectMenuContext' const StyledForm = styled.form` padding: ${get('space.3')}; margin: 0; - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; background-color: ${get('colors.white')}; ${COMMON}; diff --git a/src/SelectMenu/SelectMenuFooter.js b/src/SelectMenu/SelectMenuFooter.js index 4e107684879..a6d70ea15e5 100644 --- a/src/SelectMenu/SelectMenuFooter.js +++ b/src/SelectMenu/SelectMenuFooter.js @@ -8,7 +8,7 @@ const footerStyles = css` font-size: ${get('fontSizes.0')}; color: ${get('colors.text.grayLight')}; text-align: center; - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; @media (min-width: ${get('breakpoints.0')}) { padding: ${get('space.1')} ${get('space.2')}; diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index cbd293bae71..2314cfee23a 100644 --- a/src/SelectMenu/SelectMenuItem.js +++ b/src/SelectMenu/SelectMenuItem.js @@ -16,7 +16,7 @@ export const listItemStyles = css` cursor: pointer; background-color: ${get('colors.white')}; border: 0; - border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')}; + border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')}; color: ${get('colors.text.gray')}; text-decoration: none; diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.js index 5e57b049e26..323be791339 100644 --- a/src/SelectMenu/SelectMenuList.js +++ b/src/SelectMenu/SelectMenuList.js @@ -10,7 +10,7 @@ const listStyles = css` overflow-x: hidden; overflow-y: auto; background-color: ${get('colors.white')}; - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling @media (hover: hover) { diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.js index fc172c2cecf..ec5b2c5ed56 100644 --- a/src/SelectMenu/SelectMenuModal.js +++ b/src/SelectMenu/SelectMenuModal.js @@ -32,7 +32,7 @@ const modalStyles = css` max-height: 350px; margin: ${get('space.1')} 0 ${get('space.3')} 0; font-size: ${get('fontSizes.0')}; - border: ${get('borders.1')} ${get('colors.border.grayDark')}; + border: ${get('borderWidths.1')} solid ${get('colors.border.grayDark')}; border-radius: ${get('radii.2')}; box-shadow: 0 1px 5px ${get('colors.blackfade15')} !default; } diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.js index f1421db24d1..5f26b168b62 100644 --- a/src/SelectMenu/SelectMenuTab.js +++ b/src/SelectMenu/SelectMenuTab.js @@ -20,7 +20,7 @@ const tabStyles = css` @media (min-width: ${get('breakpoints.0')}) { flex: none; padding: ${get('space.1')} ${get('space.3')}; - border: ${get('borders.1')} transparent; + border: ${get('borderWidths.1')} solid transparent; border-bottom-width: 0; border-top-left-radius: ${get('radii.2')}; border-top-right-radius: ${get('radii.2')}; diff --git a/src/SelectMenu/SelectMenuTabs.js b/src/SelectMenu/SelectMenuTabs.js index 72ae1007446..a65172e3de4 100644 --- a/src/SelectMenu/SelectMenuTabs.js +++ b/src/SelectMenu/SelectMenuTabs.js @@ -7,7 +7,7 @@ const tabWrapperStyles = css` display: flex; flex-shrink: 0; margin-bottom: -1px; // hide border of element below - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; -webkit-overflow-scrolling: touch; // Hide scrollbar so it doesn't cover the text diff --git a/src/SideNav.js b/src/SideNav.js index c1b222ee687..7d681d34844 100644 --- a/src/SideNav.js +++ b/src/SideNav.js @@ -71,7 +71,7 @@ SideNav.Link = styled(Link).attrs(props => { color: ${get('colors.gray.6')}; padding: ${get('space.3')}; border: 0; - border-top: ${get('borders.1')} ${get('colors.gray.2')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.gray.2')}; &:first-child { border-top: 0; diff --git a/src/theme.js b/src/theme.js index e0542dfa958..d215c3c4bad 100644 --- a/src/theme.js +++ b/src/theme.js @@ -77,7 +77,7 @@ const fontWeights = { bold: 600 } -const borders = [0, '1px solid'] +const borderWidths = [0, '1px'] const radii = ['0', '3px', '6px', '100px'] @@ -242,7 +242,7 @@ const pagination = { const theme = { // General - borders, + borderWidths, breakpoints, colors, fonts, From 241b40bf0c7f664c530a3c2e067279b1a9256566 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 20 Apr 2020 14:39:38 -0700 Subject: [PATCH 034/154] Add all border colors from Primer CSS --- package.json | 1 + src/theme.js | 18 ++++++++++++++++-- yarn.lock | 19 +++++++++++++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cf2c2ac848a..b7805907fb3 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "details-element-polyfill": "2.4.0", "jest-axe": "3.2.0", "nanoid": "2.1.4", + "polished": "3.5.2", "primer-colors": "1.0.1", "primer-typography": "1.0.1", "react": "^16.10.2", diff --git a/src/theme.js b/src/theme.js index d215c3c4bad..f381340caf6 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +1,6 @@ import {black, white, gray, blue, green, orange, purple, red, yellow} from 'primer-colors' import {lineHeights} from 'primer-typography' +import {lighten, rgba, desaturate} from 'polished' // General const colors = { @@ -28,10 +29,23 @@ const colors = { success: green[5], unknown: gray[4] }, + border: { - grayLight: '#eaecef', + blackFade: rgba(black, 0.15), + blue: blue[5], + blueLight: blue[2], + grayLight: lighten(0.03, gray[2]), gray: gray[2], - grayDark: '#d1d5da' + grayDark: gray[3], + grayDarker: gray[7], + green: green[4], + greenLight: desaturate(0.4, green[3]), + purple: purple[5], + red: red[5], + redLight: desaturate(0.6, red[3]), + white, + whiteFade: rgba(white, 0.15), + yellow: desaturate(0.6, yellow[3]) }, counter: { bg: 'rgba(27, 31, 35, 0.08)' diff --git a/yarn.lock b/yarn.lock index cec80e1527a..3e85481d5e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1706,6 +1706,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.8.7": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" + integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.4.0", "@babel/template@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" @@ -8516,6 +8523,13 @@ pn@^1.1.0: resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA== +polished@3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.2.tgz#ca132b8cd68f7ffa95ae9d423f03e7a14fda1062" + integrity sha512-vWoRDg3gY5RQBtUfcj9MRN10VCIf4EkdUikGxyXItg2Hnwk+eIVtdBiLajN0ldFeT3Vq4r/QNbjrQdhqBKrTug== + dependencies: + "@babel/runtime" "^7.8.7" + portfinder@^1.0.25: version "1.0.25" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca" @@ -9184,6 +9198,11 @@ regenerator-runtime@^0.13.2: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== +regenerator-runtime@^0.13.4: + version "0.13.5" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" + integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA== + regenerator-transform@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb" From 1e1cbc2df8fa5fbf6eb9a3c6ed28d8e60d927860 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 20 Apr 2020 14:46:08 -0700 Subject: [PATCH 035/154] Update snapshots --- src/__tests__/__snapshots__/Caret.js.snap | 24 +++++++++---------- .../__snapshots__/PointerBox.js.snap | 6 ++--- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/__tests__/__snapshots__/Caret.js.snap b/src/__tests__/__snapshots__/Caret.js.snap index 25d57110170..b52974ae190 100644 --- a/src/__tests__/__snapshots__/Caret.js.snap +++ b/src/__tests__/__snapshots__/Caret.js.snap @@ -26,7 +26,7 @@ exports[`Caret renders cardinal directions 1`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -57,7 +57,7 @@ exports[`Caret renders cardinal directions 2`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -89,7 +89,7 @@ exports[`Caret renders cardinal directions 3`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -120,7 +120,7 @@ exports[`Caret renders cardinal directions 4`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -152,7 +152,7 @@ exports[`Caret renders cardinal directions 5`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -184,7 +184,7 @@ exports[`Caret renders cardinal directions 6`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -216,7 +216,7 @@ exports[`Caret renders cardinal directions 7`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -248,7 +248,7 @@ exports[`Caret renders cardinal directions 8`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -279,7 +279,7 @@ exports[`Caret renders cardinal directions 9`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -310,7 +310,7 @@ exports[`Caret renders cardinal directions 10`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -341,7 +341,7 @@ exports[`Caret renders cardinal directions 11`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -372,7 +372,7 @@ exports[`Caret renders cardinal directions 12`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> diff --git a/src/__tests__/__snapshots__/PointerBox.js.snap b/src/__tests__/__snapshots__/PointerBox.js.snap index 6e5c11cc3d2..5f5e223ed14 100644 --- a/src/__tests__/__snapshots__/PointerBox.js.snap +++ b/src/__tests__/__snapshots__/PointerBox.js.snap @@ -44,7 +44,7 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -95,7 +95,7 @@ exports[`PointerBox passes the "borderColor" prop to both and @@ -146,7 +146,7 @@ exports[`PointerBox renders a in with relative positioning 1 d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> From bf285df62eaa35873e755857701ea0d4fdd5c787 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 21 Apr 2020 09:15:14 -0700 Subject: [PATCH 036/154] Add sx.propTypes --- src/BorderBox.js | 3 ++- src/Heading.js | 3 ++- src/sx.js | 5 +++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/BorderBox.js b/src/BorderBox.js index 0f91e6613f5..606c1679f55 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -17,7 +17,8 @@ BorderBox.defaultProps = { BorderBox.propTypes = { theme: PropTypes.object, ...Box.propTypes, - ...BORDER.propTypes + ...BORDER.propTypes, + ...sx.propTypes } export default BorderBox diff --git a/src/Heading.js b/src/Heading.js index 64bdf7b87bd..673d7bde3a0 100644 --- a/src/Heading.js +++ b/src/Heading.js @@ -17,7 +17,8 @@ Heading.defaultProps = { Heading.propTypes = { theme: PropTypes.object, ...COMMON.propTypes, - ...TYPOGRAPHY.propTypes + ...TYPOGRAPHY.propTypes, + ...sx.propTypes } export default Heading diff --git a/src/sx.js b/src/sx.js index 977938dca03..3c4ef5630ad 100644 --- a/src/sx.js +++ b/src/sx.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types' import styled from 'styled-components' import css from '@styled-system/css' @@ -23,4 +24,8 @@ const sx = { } } +sx.propTypes = { + sx: PropTypes.object +} + export default sx From 96de6cb2fb34ddf2ff91a704c443dad381265ea6 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 21 Apr 2020 15:37:34 -0700 Subject: [PATCH 037/154] Make all components sx-prop aware and convert test suites --- index.d.ts | 2 + package.json | 2 +- src/Avatar.js | 5 +- src/AvatarStack.js | 5 +- src/BorderBox.js | 10 +- src/Box.js | 3 + src/BranchName.js | 3 + src/Breadcrumbs.js | 13 +- src/Button.js | 12 +- src/ButtonBase.js | 10 +- src/ButtonDanger.js | 13 + src/ButtonGroup.js | 12 +- src/ButtonOutline.js | 13 + src/ButtonPrimary.js | 13 + src/ButtonTableList.js | 11 + src/CircleBadge.js | 16 +- src/CounterLabel.js | 6 +- src/Details.js | 5 +- src/Dialog.js | 19 +- src/Dropdown.js | 28 +- src/FilterList.js | 15 +- src/Flash.js | 5 +- src/Heading.js | 10 +- src/Label.js | 5 +- src/LabelGroup.js | 5 +- src/Link.js | 5 +- src/Pagination/Pagination.js | 5 +- src/Popover.js | 12 +- src/Position.js | 13 +- src/ProgressBar.js | 3 + src/SelectMenu/SelectMenu.js | 5 +- src/SelectMenu/SelectMenuDivider.js | 7 +- src/SelectMenu/SelectMenuFilter.js | 16 +- src/SelectMenu/SelectMenuFooter.js | 7 +- src/SelectMenu/SelectMenuHeader.js | 13 + src/SelectMenu/SelectMenuItem.js | 7 +- src/SelectMenu/SelectMenuList.js | 7 +- src/SelectMenu/SelectMenuModal.js | 7 +- src/SelectMenu/SelectMenuTab.js | 7 +- src/SelectMenu/SelectMenuTabPanel.js | 7 +- src/SelectMenu/SelectMenuTabs.js | 7 +- src/SideNav.js | 9 +- src/StateLabel.js | 5 +- src/StyledOcticon.js | 7 +- src/SubNav.js | 19 +- src/TabNav.js | 15 +- src/Text.js | 3 + src/TextInput.js | 10 +- src/Timeline.js | 29 +- src/Tooltip.js | 5 +- src/Truncate.js | 3 + src/UnderlineNav.js | 15 +- src/__tests__/Avatar.js | 13 +- src/__tests__/AvatarStack.js | 14 +- src/__tests__/BorderBox.js | 19 +- src/__tests__/Box.js | 22 +- src/__tests__/BranchName.js | 17 +- src/__tests__/BreadcrumbItem.js | 14 +- src/__tests__/Breadcrumbs.js | 10 +- src/__tests__/Button.js | 39 +- src/__tests__/CircleBadge.js | 22 +- src/__tests__/CircleOcticon.js | 13 +- src/__tests__/CounterLabel.js | 16 +- src/__tests__/Details.js | 10 +- src/__tests__/Dialog.js | 14 + src/__tests__/Dropdown.js | 75 +-- src/__tests__/FilterList.js | 12 +- src/__tests__/FilterListItem.js | 15 +- src/__tests__/Flash.js | 16 +- src/__tests__/Flex.js | 16 +- src/__tests__/Grid.js | 18 +- src/__tests__/Heading.js | 17 +- src/__tests__/Label.js | 16 +- src/__tests__/LabelGroup.js | 20 +- src/__tests__/Link.js | 28 +- src/__tests__/Pagination/Pagination.js | 14 +- .../__snapshots__/Pagination.js.snap | 2 +- src/__tests__/PointerBox.js | 13 +- src/__tests__/Popover.js | 30 +- src/__tests__/Position.js | 59 +- src/__tests__/ProgressBar.js | 14 +- src/__tests__/SelectMenu.js | 14 +- src/__tests__/SideNav.js | 25 +- src/__tests__/StateLabel.js | 14 +- src/__tests__/StyledOcticon.js | 11 +- src/__tests__/SubNav.js | 10 +- src/__tests__/SubNavLink.js | 14 +- src/__tests__/TabNav.js | 12 +- src/__tests__/Text.js | 17 +- src/__tests__/TextInput.js | 10 +- src/__tests__/Timeline.js | 43 +- src/__tests__/Tooltip.js | 14 +- src/__tests__/Truncate.js | 17 +- src/__tests__/UnderlineNav.js | 10 +- src/__tests__/UnderlineNavLink.js | 14 +- src/__tests__/__snapshots__/Avatar.js.snap | 2 +- .../__snapshots__/AvatarStack.js.snap | 2 +- src/__tests__/__snapshots__/BorderBox.js.snap | 14 + src/__tests__/__snapshots__/Box.js.snap | 12 +- .../__snapshots__/BranchName.js.snap | 17 + .../__snapshots__/BreadcrumbItem.js.snap | 5 +- .../__snapshots__/Breadcrumbs.js.snap | 29 + src/__tests__/__snapshots__/Button.js.snap | 376 ++++++++++++ .../__snapshots__/CircleBadge.js.snap | 38 +- .../__snapshots__/CircleOcticon.js.snap | 68 +++ .../__snapshots__/CounterLabel.js.snap | 22 + src/__tests__/__snapshots__/Details.js.snap | 17 + src/__tests__/__snapshots__/Dialog.js.snap | 44 ++ src/__tests__/__snapshots__/Dropdown.js.snap | 162 +---- .../__snapshots__/FilterList.js.snap | 15 + .../__snapshots__/FilterListItem.js.snap | 4 +- src/__tests__/__snapshots__/Flash.js.snap | 23 + src/__tests__/__snapshots__/Flex.js.snap | 18 + src/__tests__/__snapshots__/Grid.js.snap | 12 + src/__tests__/__snapshots__/Heading.js.snap | 13 + src/__tests__/__snapshots__/Label.js.snap | 22 + .../__snapshots__/LabelGroup.js.snap | 2 +- src/__tests__/__snapshots__/Link.js.snap | 10 +- .../__snapshots__/PointerBox.js.snap | 51 ++ src/__tests__/__snapshots__/Popover.js.snap | 283 +++++---- src/__tests__/__snapshots__/Position.js.snap | 44 ++ .../__snapshots__/ProgressBar.js.snap | 26 + src/__tests__/__snapshots__/SideNav.js.snap | 111 +--- .../__snapshots__/StateLabel.js.snap | 25 + .../__snapshots__/StyledOcticon.js.snap | 2 +- src/__tests__/__snapshots__/SubNav.js.snap | 391 ++++++++++++ .../__snapshots__/SubNavLink.js.snap | 5 +- src/__tests__/__snapshots__/TabNav.js.snap | 407 +++++++++++++ src/__tests__/__snapshots__/Text.js.snap | 7 + src/__tests__/__snapshots__/TextInput.js.snap | 69 +++ src/__tests__/__snapshots__/Timeline.js.snap | 6 +- src/__tests__/__snapshots__/Tooltip.js.snap | 573 ++++++++++++++++++ src/__tests__/__snapshots__/Truncate.js.snap | 17 + .../__snapshots__/UnderlineNav.js.snap | 406 +++++++++++++ .../__snapshots__/UnderlineNavLink.js.snap | 5 +- src/sx.js | 23 +- src/utils/test-matchers.js | 38 +- src/utils/testing.js | 58 +- yarn.lock | 8 +- 139 files changed, 3663 insertions(+), 1121 deletions(-) create mode 100644 src/__tests__/__snapshots__/BorderBox.js.snap create mode 100644 src/__tests__/__snapshots__/BranchName.js.snap create mode 100644 src/__tests__/__snapshots__/Breadcrumbs.js.snap create mode 100644 src/__tests__/__snapshots__/CircleOcticon.js.snap create mode 100644 src/__tests__/__snapshots__/CounterLabel.js.snap create mode 100644 src/__tests__/__snapshots__/Details.js.snap create mode 100644 src/__tests__/__snapshots__/Dialog.js.snap create mode 100644 src/__tests__/__snapshots__/FilterList.js.snap create mode 100644 src/__tests__/__snapshots__/Flash.js.snap create mode 100644 src/__tests__/__snapshots__/Heading.js.snap create mode 100644 src/__tests__/__snapshots__/Position.js.snap create mode 100644 src/__tests__/__snapshots__/SubNav.js.snap create mode 100644 src/__tests__/__snapshots__/TabNav.js.snap create mode 100644 src/__tests__/__snapshots__/Text.js.snap create mode 100644 src/__tests__/__snapshots__/Tooltip.js.snap create mode 100644 src/__tests__/__snapshots__/Truncate.js.snap create mode 100644 src/__tests__/__snapshots__/UnderlineNav.js.snap diff --git a/index.d.ts b/index.d.ts index 711c04bf6f9..4e77d9cd28f 100644 --- a/index.d.ts +++ b/index.d.ts @@ -8,6 +8,7 @@ declare module '@primer/components' { as?: React.ReactType className?: string css?: string + sx?: object title?: string // NOTE(@mxstbr): Necessary workaround to make work to?: History.LocationDescriptor @@ -80,6 +81,7 @@ declare module '@primer/components' { export interface ButtonProps extends BaseProps, CommonProps, + LayoutProps, StyledSystem.FontSizeProps, Omit, 'color'> { variant?: 'small' | 'medium' | 'large' diff --git a/package.json b/package.json index f32a295593c..3daafaa3821 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-react": "^9.6.0", "@reach/dialog": "0.3.0", "@styled-system/css": "5.1.5", "@styled-system/prop-types": "5.1.2", diff --git a/src/Avatar.js b/src/Avatar.js index 83db587e413..44488d78c65 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -1,5 +1,6 @@ -import PropTypes from 'prop-types' import styled from 'styled-components' +import PropTypes from 'prop-types' +import sx from './sx' import {get} from './constants' import {space} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' @@ -22,6 +23,7 @@ const Avatar = styled.img.attrs(props => ({ vertical-align: middle; ${borderRadius}; ${space}; + ${sx}; ` Avatar.defaultProps = { @@ -35,6 +37,7 @@ Avatar.propTypes = { size: PropTypes.number, src: PropTypes.string, ...systemPropTypes.space, + ...sx.propTypes, theme: PropTypes.object } diff --git a/src/AvatarStack.js b/src/AvatarStack.js index 1a91360b2ae..6371a0c3513 100644 --- a/src/AvatarStack.js +++ b/src/AvatarStack.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled, {css} from 'styled-components' +import sx from './sx' import {get, COMMON} from './constants' import theme from './theme' @@ -22,6 +23,7 @@ const AvatarStackWrapper = styled.span` min-width: ${props => (props.count === 1 ? '26px' : props.count === 2 ? '36px' : '46px')}; height: 20px; ${COMMON} + ${sx}; ` const AvatarStackBody = styled.span` @@ -152,6 +154,7 @@ AvatarStack.defaultProps = { AvatarStack.propTypes = { ...COMMON.propTypes, - alignRight: PropTypes.bool + alignRight: PropTypes.bool, + ...sx.propTypes } export default AvatarStack diff --git a/src/BorderBox.js b/src/BorderBox.js index 606c1679f55..36e46ce54fa 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -1,10 +1,14 @@ +import styled from 'styled-components' import sx from './sx' import PropTypes from 'prop-types' import Box from './Box' import theme from './theme' import {BORDER} from './constants' -const BorderBox = sx.styled(Box)(BORDER) +const BorderBox = styled(Box)` + ${BORDER}; + ${sx}; +` BorderBox.defaultProps = { theme, @@ -15,10 +19,10 @@ BorderBox.defaultProps = { } BorderBox.propTypes = { - theme: PropTypes.object, ...Box.propTypes, ...BORDER.propTypes, - ...sx.propTypes + ...sx.propTypes, + theme: PropTypes.object } export default BorderBox diff --git a/src/Box.js b/src/Box.js index 158564c07ff..124a1703dd6 100644 --- a/src/Box.js +++ b/src/Box.js @@ -1,5 +1,6 @@ import styled from 'styled-components' import PropTypes from 'prop-types' +import sx from './sx' import {COMMON, FLEX, LAYOUT} from './constants' import theme from './theme' @@ -7,6 +8,7 @@ const Box = styled.div` ${COMMON} ${FLEX} ${LAYOUT} + ${sx}; ` Box.defaultProps = {theme} @@ -15,6 +17,7 @@ Box.propTypes = { ...COMMON.propTypes, ...FLEX.propTypes, ...LAYOUT.propTypes, + ...sx.propTypes, theme: PropTypes.object } diff --git a/src/BranchName.js b/src/BranchName.js index 3041fb8e756..3c7b342de40 100644 --- a/src/BranchName.js +++ b/src/BranchName.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' import styled from 'styled-components' +import sx from './sx' import theme from './theme' import {COMMON, get} from './constants' @@ -12,6 +13,7 @@ const BranchName = styled.a` background-color: #eaf5ff; border-radius: 3px; ${COMMON}; + ${sx}; ` BranchName.defaultProps = { @@ -21,6 +23,7 @@ BranchName.defaultProps = { BranchName.propTypes = { href: PropTypes.string, ...COMMON.propTypes, + ...sx.propTypes, theme: PropTypes.object } diff --git a/src/Breadcrumbs.js b/src/Breadcrumbs.js index ab316bedacc..8c6d0263d32 100644 --- a/src/Breadcrumbs.js +++ b/src/Breadcrumbs.js @@ -2,6 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import styled from 'styled-components' +import sx from './sx' import {COMMON, FLEX, get} from './constants' import theme from './theme' import Box from './Box' @@ -46,6 +47,7 @@ const Breadcrumb = styled(BreadcrumbBase)` justify-content: space-between; ${COMMON}; ${FLEX}; + ${sx}; ` Breadcrumb.Item = styled.a.attrs(props => ({ @@ -65,6 +67,7 @@ Breadcrumb.Item = styled.a.attrs(props => ({ pointer-events: none; } ${COMMON} + ${sx}; ` Breadcrumb.defaultProps = { @@ -72,18 +75,24 @@ Breadcrumb.defaultProps = { } Breadcrumb.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +Breadcrumb.displayName = 'Breadcrumb' + Breadcrumb.Item.defaultProps = { theme } Breadcrumb.Item.propTypes = { - as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), href: PropTypes.string, selected: PropTypes.bool, + ...sx.propTypes, ...COMMON.propTypes } +Breadcrumb.Item.displayName = 'Breadcrumb.Item' + export default Breadcrumb diff --git a/src/Button.js b/src/Button.js index 36c30aa44c3..93dd2420b73 100644 --- a/src/Button.js +++ b/src/Button.js @@ -1,7 +1,6 @@ -import PropTypes from 'prop-types' import styled from 'styled-components' -import systemPropTypes from '@styled-system/prop-types' -import {COMMON, get} from './constants' +import sx from './sx' +import {get} from './constants' import theme from './theme' import ButtonBase from './ButtonBase' @@ -34,6 +33,8 @@ const Button = styled(ButtonBase)` background-color: ${get('buttons.default.bg.disabled')}; border-color: ${get('buttons.default.border.disabled')}; } + + ${sx}; ` Button.defaultProps = { @@ -41,9 +42,8 @@ Button.defaultProps = { } Button.propTypes = { - theme: PropTypes.object, - ...COMMON.propTypes, - ...systemPropTypes.layout + ...ButtonBase.propTypes, + ...sx.propTypes } export default Button diff --git a/src/ButtonBase.js b/src/ButtonBase.js index 3b90de1863e..980d7658e97 100644 --- a/src/ButtonBase.js +++ b/src/ButtonBase.js @@ -1,9 +1,9 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {COMMON} from './constants' +import {COMMON, LAYOUT} from './constants' import theme from './theme' import buttonBaseStyles from './ButtonStyles' -import {compose, variant, layout, fontSize} from 'styled-system' +import {compose, variant, fontSize} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' const variants = variant({ @@ -27,7 +27,7 @@ const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({ }))` ${buttonBaseStyles} ${variants} - ${compose(fontSize, COMMON, layout)} + ${compose(fontSize, COMMON, LAYOUT)} ` ButtonBase.defaultProps = { @@ -36,7 +36,7 @@ ButtonBase.defaultProps = { } ButtonBase.propTypes = { - as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]), + as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.elementType]), children: PropTypes.node, disabled: PropTypes.bool, fontSize: systemPropTypes.typography.fontSize, @@ -44,7 +44,7 @@ ButtonBase.propTypes = { theme: PropTypes.object, variant: PropTypes.oneOf(['small', 'medium', 'large']), ...COMMON.propTypes, - ...systemPropTypes.layout + ...LAYOUT.propTypes } export default ButtonBase diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index b8f74bb58ce..fdb72968ccb 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -1,6 +1,8 @@ import styled from 'styled-components' import ButtonBase from './ButtonBase' import {get} from './constants' +import theme from './theme' +import sx from './sx' const ButtonDanger = styled(ButtonBase)` color: ${get('buttons.danger.color.default')}; @@ -32,6 +34,17 @@ const ButtonDanger = styled(ButtonBase)` background-color: ${get('buttons.danger.bg.disabled')}; border: 1px solid ${get('buttons.danger.border.default')}; } + + ${sx}; ` +ButtonDanger.defaultProps = { + theme +} + +ButtonDanger.propTypes = { + ...ButtonBase.propTypes, + ...sx.propTypes +} + export default ButtonDanger diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js index 1ac188c8f32..6cb77d99512 100644 --- a/src/ButtonGroup.js +++ b/src/ButtonGroup.js @@ -1,6 +1,8 @@ import styled from 'styled-components' import {get} from './constants' import Box from './Box' +import theme from './theme' +import sx from './sx' const ButtonGroup = styled(Box)` vertical-align: middle; @@ -41,12 +43,18 @@ const ButtonGroup = styled(Box)` z-index: 1; } } + + ${sx}; ` + ButtonGroup.defaultProps = { - display: 'inline-block' + display: 'inline-block', + theme } + ButtonGroup.propTypes = { - ...Box.propTypes + ...Box.propTypes, + ...sx.propTypes } export default ButtonGroup diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js index abc6b9a812d..526bdb01ec6 100644 --- a/src/ButtonOutline.js +++ b/src/ButtonOutline.js @@ -1,6 +1,8 @@ import styled from 'styled-components' import ButtonBase from './ButtonBase' import {get} from './constants' +import theme from './theme' +import sx from './sx' const ButtonOutline = styled(ButtonBase)` color: ${get('buttons.outline.color.default')}; @@ -32,6 +34,17 @@ const ButtonOutline = styled(ButtonBase)` border-color: ${get('buttons.outline.border.default')}; background-color: ${get('buttons.outline.bg.disabled')}; } + + ${sx}; ` +ButtonOutline.defaultProps = { + theme +} + +ButtonOutline.propTypes = { + ...ButtonBase.propTypes, + ...sx.propTypes +} + export default ButtonOutline diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index 02388e237fe..ab27444b7d7 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -1,6 +1,8 @@ import styled from 'styled-components' import ButtonBase from './ButtonBase' import {get} from './constants' +import theme from './theme' +import sx from './sx' const ButtonPrimary = styled(ButtonBase)` color: ${get('buttons.primary.color.default')}; @@ -30,6 +32,17 @@ const ButtonPrimary = styled(ButtonBase)` background-color: ${get('buttons.primary.bg.disabled')}; border-color: ${get('buttons.primary.border.disabled')}; } + + ${sx}; ` +ButtonPrimary.defaultProps = { + theme +} + +ButtonPrimary.propTypes = { + ...ButtonBase.propTypes, + ...sx.propTypes +} + export default ButtonPrimary diff --git a/src/ButtonTableList.js b/src/ButtonTableList.js index 9a767522875..4bdbdc2bf85 100644 --- a/src/ButtonTableList.js +++ b/src/ButtonTableList.js @@ -1,6 +1,8 @@ import styled from 'styled-components' +import PropTypes from 'prop-types' import {COMMON, LAYOUT, TYPOGRAPHY, get} from './constants' import theme from './theme' +import sx from './sx' const ButtonTableList = styled.summary` display: inline-block; @@ -40,10 +42,19 @@ const ButtonTableList = styled.summary` ${COMMON} ${TYPOGRAPHY} ${LAYOUT} + ${sx}; ` ButtonTableList.defaultProps = { theme } +ButtonTableList.propTypes = { + theme: PropTypes.object, + ...sx.propTypes, + ...COMMON.propTypes, + ...TYPOGRAPHY.propTypes, + ...LAYOUT.propTypes +} + export default ButtonTableList diff --git a/src/CircleBadge.js b/src/CircleBadge.js index 7529eebf7e8..731df05129a 100644 --- a/src/CircleBadge.js +++ b/src/CircleBadge.js @@ -4,6 +4,7 @@ import Octicon from '@primer/octicons-react' import {COMMON, get} from './constants' import isNumeric from './utils/isNumeric' import theme from './theme' +import sx from './sx' const variantSizes = { small: 56, @@ -27,15 +28,16 @@ const CircleBadge = styled.div` border-radius: 50%; box-shadow: ${get('shadows.medium')}; ${COMMON} ${sizeStyles}; + ${sx}; ` -const Icon = styled(Octicon)` +CircleBadge.Icon = styled(Octicon)` max-width: 60% !important; height: auto !important; max-height: 55% !important; ${COMMON}; + ${sx}; ` -CircleBadge.Icon = Icon CircleBadge.defaultProps = { inline: false, @@ -48,16 +50,20 @@ CircleBadge.propTypes = { size: PropTypes.number, theme: PropTypes.object, variant: PropTypes.oneOf(['small', 'medium', 'large']), - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } CircleBadge.Icon.defaultProps = { theme } -CircleBadge.Icon.propsTypes = { +CircleBadge.Icon.propTypes = { theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +CircleBadge.Icon.displayName = 'CircleBadge.Icon' + export default CircleBadge diff --git a/src/CounterLabel.js b/src/CounterLabel.js index a0c7ae26f98..00164a80ae5 100644 --- a/src/CounterLabel.js +++ b/src/CounterLabel.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' const colorStyles = ({scheme, ...props}) => { return { @@ -39,6 +40,8 @@ const CounterLabel = styled.span` &:empty { visibility: hidden; } + + ${sx}; ` CounterLabel.defaultProps = { @@ -49,7 +52,8 @@ CounterLabel.propTypes = { children: PropTypes.node, scheme: PropTypes.oneOf(['gray', 'gray-light']), theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default CounterLabel diff --git a/src/Details.js b/src/Details.js index 0c097a48dbe..f7c43d2f21a 100644 --- a/src/Details.js +++ b/src/Details.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON} from './constants' import theme from './theme' +import sx from './sx' // The
element is not yet supported in Edge so we have to use a polyfill. // We have to check if window is defined before importing the polyfill @@ -21,6 +22,7 @@ const StyledDetails = styled('details')` } ${COMMON} + ${sx}; ` function getRenderer(children) { return typeof children === 'function' ? children : () => children @@ -90,7 +92,8 @@ Details.propTypes = { overlay: PropTypes.bool, render: PropTypes.func, theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default Details diff --git a/src/Dialog.js b/src/Dialog.js index b00d4c46ad1..90d74c8e703 100644 --- a/src/Dialog.js +++ b/src/Dialog.js @@ -3,12 +3,11 @@ import {Dialog as ReachDialog} from '@reach/dialog' import raw from 'raw.macro' 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 StyledOcticon from './StyledOcticon' -import {LAYOUT} from './constants' +import {COMMON, LAYOUT} from './constants' import theme from './theme' +import sx from './sx' import Text from './Text' import Flex from './Flex' @@ -36,8 +35,8 @@ export const StyledDialog = styled(ReachDialog)` } ${LAYOUT} - ${space} - ${color} + ${COMMON} + ${sx}; ` const UnstyledButton = styled(Flex).attrs({ @@ -59,6 +58,8 @@ const DialogHeaderBase = styled(Flex)` @media screen and (max-width: 750px) { border-radius: 0px; } + + ${sx}; ` function DialogHeader({theme, children, ...rest}) { @@ -94,15 +95,17 @@ const Dialog = ({children, ...props}) => { Dialog.defaultProps = {theme} Dialog.propTypes = { + ...COMMON.propTypes, ...LAYOUT.propTypes, - ...systemPropTypes.space, - ...systemPropTypes.color, children: PropTypes.node.isRequired, isOpen: PropTypes.bool.isRequired, onDismiss: PropTypes.func.isRequired, + ...sx.propTypes, theme: PropTypes.object } +Dialog.displayName = 'Dialog' + DialogHeader.defaultProps = { backgroundColor: 'gray.1', theme @@ -112,5 +115,7 @@ DialogHeader.propTypes = { ...Flex.propTypes } +DialogHeader.displayName = 'Dialog.Header' + Dialog.Header = DialogHeader export default Dialog diff --git a/src/Dropdown.js b/src/Dropdown.js index 6363b62d886..d2e539dec87 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -6,6 +6,7 @@ import Details from './Details' import {COMMON, get} from './constants' import getDirectionStyles from './DropdownStyles' import theme from './theme' +import sx from './sx' const StyledDetails = styled(Details)` position: relative; @@ -39,7 +40,8 @@ Dropdown.Caret = styled.div` height: 0; vertical-align: middle; width: 0; - ${COMMON} + ${COMMON}; + ${sx}; ` Dropdown.Menu = styled.ul` @@ -85,6 +87,7 @@ Dropdown.Menu = styled.ul` } ${props => (props.direction ? getDirectionStyles(props.theme, props.direction) : '')}; ${COMMON}; + ${sx}; ` Dropdown.Item = styled.li` @@ -120,31 +123,42 @@ Dropdown.Item = styled.li` outline: none; } ${COMMON}; + ${sx}; ` Dropdown.Menu.propTypes = { direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']), - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } Dropdown.Menu.defaultProps = { direction: 'sw', theme } +Dropdown.Menu.displayName = 'Dropdown.Menu' Dropdown.Item.defaultProps = {theme} Dropdown.Item.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +Dropdown.Item.displayName = 'Dropdown.Item' -Dropdown.Button.defaultProps = {theme} +Dropdown.Button.defaultProps = {theme, ...Button.defaultProps} +Dropdown.Button.propTypes = { + ...Button.propTypes +} +Dropdown.Button.displayName = 'Dropdown.Button' Dropdown.Caret.defaultProps = {theme} -Dropdown.Caret.propTpyes = { - ...COMMON.propTypes +Dropdown.Caret.propTypes = { + ...COMMON.propTypes, + ...sx.propTypes } +Dropdown.Caret.displayName = 'Dropdown.Caret' -Dropdown.defaultProps = {theme} +Dropdown.defaultProps = {theme, ...Details.defaultProps} Dropdown.propTypes = { ...Details.propTypes, ...COMMON.propTypes diff --git a/src/FilterList.js b/src/FilterList.js index 14ac59a555c..96a07dfc8ff 100644 --- a/src/FilterList.js +++ b/src/FilterList.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' function ItemBase({children, count, theme, ...rest}) { return ( @@ -44,7 +45,8 @@ const Item = styled(ItemBase)` float: right; font-weight: ${get('fontWeights.bold')}; } - ${COMMON}: ; + ${COMMON}; + ${sx}; ` const FilterListBase = ({children, theme, ...rest}) => { @@ -58,6 +60,7 @@ const FilterListBase = ({children, theme, ...rest}) => { const FilterList = styled(FilterListBase)` list-style-type: none; ${COMMON}; + ${sx}; ` FilterList.defaultProps = { @@ -69,7 +72,8 @@ FilterList.defaultProps = { FilterList.propTypes = { children: PropTypes.node, small: PropTypes.bool, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } FilterList.Item = Item @@ -79,13 +83,16 @@ FilterList.Item.defaultProps = { } FilterList.Item.propTypes = { - as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), children: PropTypes.node, className: PropTypes.string, count: PropTypes.string, selected: PropTypes.bool, theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +FilterList.Item.displayName = 'FilterList.Item' + export default FilterList diff --git a/src/Flash.js b/src/Flash.js index 2aace8f776c..a65d0058e4c 100644 --- a/src/Flash.js +++ b/src/Flash.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' const schemeMap = { green: {color: 'colors.green.8', bg: 'colors.green.1'}, @@ -25,6 +26,7 @@ const Flash = styled.div` margin-bottom: 0; } ${COMMON}; + ${sx}; ` Flash.defaultProps = { @@ -37,7 +39,8 @@ Flash.propTypes = { full: PropTypes.bool, scheme: PropTypes.oneOf(Object.keys(schemeMap)), theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default Flash diff --git a/src/Heading.js b/src/Heading.js index 673d7bde3a0..c8df9d34f70 100644 --- a/src/Heading.js +++ b/src/Heading.js @@ -1,13 +1,15 @@ +import styled from 'styled-components' import sx from './sx' import PropTypes from 'prop-types' import {TYPOGRAPHY, COMMON, get} from './constants' import theme from './theme' -const Heading = sx.styled.h2` +const Heading = styled.h2` font-weight: ${get('fontWeights.bold')}; font-size: ${get('fontSizes.5')}; margin: 0; ${TYPOGRAPHY} ${COMMON}; + ${sx}; ` Heading.defaultProps = { @@ -15,10 +17,10 @@ Heading.defaultProps = { } Heading.propTypes = { - theme: PropTypes.object, ...COMMON.propTypes, - ...TYPOGRAPHY.propTypes, - ...sx.propTypes + ...sx.propTypes, + theme: PropTypes.object, + ...TYPOGRAPHY.propTypes } export default Heading diff --git a/src/Label.js b/src/Label.js index 628baad148a..3abdc7582d3 100644 --- a/src/Label.js +++ b/src/Label.js @@ -3,6 +3,7 @@ import styled, {css} from 'styled-components' import {variant, borderColor} from 'styled-system' import theme from './theme' import {COMMON, get} from './constants' +import sx from './sx' const outlineStyles = css` margin-top: -1px; // offsets the 1px border @@ -52,6 +53,7 @@ const Label = styled('span')` ${sizeVariant} ${COMMON} ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}; ${props => (props.outline ? outlineStyles : '')}; // must be last to override other values + ${sx}; ` Label.defaultProps = { @@ -65,7 +67,8 @@ Label.propTypes = { outline: PropTypes.bool, theme: PropTypes.object, variant: PropTypes.oneOf(['small', 'medium', 'large', 'xl']), - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default Label diff --git a/src/LabelGroup.js b/src/LabelGroup.js index f14117d0159..d443ba7b10b 100644 --- a/src/LabelGroup.js +++ b/src/LabelGroup.js @@ -2,6 +2,7 @@ import React from 'react' import styled from 'styled-components' import theme from './theme' import {COMMON, get} from './constants' +import sx from './sx' const transformChildren = children => { return React.Children.map(children, child => { @@ -17,6 +18,7 @@ const StyledLabelGroup = styled.span` & .LabelItem:last-child { margin-right: 0; } + ${sx}; ` const LabelGroup = ({children, ...rest}) => {transformChildren(children)} @@ -26,7 +28,8 @@ LabelGroup.defaultProps = { } LabelGroup.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default LabelGroup diff --git a/src/Link.js b/src/Link.js index e0915715f73..0466251a5ea 100644 --- a/src/Link.js +++ b/src/Link.js @@ -4,6 +4,7 @@ import {system} from 'styled-system' import {COMMON, TYPOGRAPHY, get} from './constants' import theme from './theme' import elementType from './utils/elementType' +import sx from './sx' const buttonStyles = { display: 'inline-block', @@ -34,6 +35,7 @@ const Link = styled.a.attrs(props => ({ } ${props => (props.as === 'button' ? buttonStyles : '')}; ${TYPOGRAPHY} ${COMMON}; + ${sx}; ` Link.defaultProps = { @@ -47,7 +49,8 @@ Link.propTypes = { theme: PropTypes.object, underline: PropTypes.bool, ...TYPOGRAPHY.propTypes, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default Link diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index cc7b19da108..1f943796474 100644 --- a/src/Pagination/Pagination.js +++ b/src/Pagination/Pagination.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled, {css} from 'styled-components' +import sx from '../sx' import {get, COMMON} from '../constants' import theme from '../theme' import Box from '../Box' @@ -102,6 +103,7 @@ const PaginationContainer = styled.nav` margin-top: 20px; margin-bottom: 15px; text-align: center; + ${sx}; ` function Pagination({ @@ -148,7 +150,8 @@ Pagination.propTypes = { pageCount: PropTypes.number.isRequired, showPages: PropTypes.bool, surroundingPageCount: PropTypes.number, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } Pagination.defaultProps = { diff --git a/src/Popover.js b/src/Popover.js index 60baef64dd2..2fb7e6d741c 100644 --- a/src/Popover.js +++ b/src/Popover.js @@ -5,6 +5,7 @@ import {COMMON, LAYOUT, POSITION, get} from './constants' import theme from './theme' import elementType from './utils/elementType' import BorderBox from './BorderBox' +import sx from './sx' const Popover = styled.div.attrs(({className, caret}) => { return { @@ -18,6 +19,7 @@ const Popover = styled.div.attrs(({className, caret}) => { ${COMMON}; ${LAYOUT}; ${POSITION}; + ${sx}; ` Popover.Content = styled(BorderBox)` @@ -196,6 +198,8 @@ Popover.Content = styled(BorderBox)` bottom: calc(${get('space.3')} + 1px); } } + + ${sx}; ` export const CARET_POSITIONS = [ @@ -226,7 +230,8 @@ Popover.propTypes = { theme: PropTypes.object, ...COMMON.propTypes, ...LAYOUT.propTypes, - ...POSITION.propTypes + ...POSITION.propTypes, + ...sx.propTypes } Popover.Content.defaultProps = { @@ -236,7 +241,10 @@ Popover.Content.defaultProps = { Popover.Content.propTypes = { as: elementType, theme: PropTypes.object, - ...BorderBox.propTypes + ...BorderBox.propTypes, + ...sx.propTypes } +Popover.Content.displayName = 'Popover.Content' + export default Popover diff --git a/src/Position.js b/src/Position.js index 7577be7616d..2a26c5d1714 100644 --- a/src/Position.js +++ b/src/Position.js @@ -3,11 +3,13 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {COMMON, LAYOUT, POSITION} from './constants' import theme from './theme' +import sx from './sx' export const Position = styled.div` ${LAYOUT} ${COMMON} ${POSITION} + ${sx}; ` Position.defaultProps = { @@ -18,21 +20,22 @@ Position.propTypes = { ...COMMON.propTypes, ...LAYOUT.propTypes, ...POSITION.propTypes, + ...sx.propTypes, theme: PropTypes.object } function withPosition(position) { - const WithPosition = props => + const WithPosition = props => WithPosition.propTypes = Position.propTypes WithPosition.defaultProps = Position.defaultProps WithPosition.displayName = `Position.${position}` return WithPosition } -export const Absolute = withPosition('absolute') -export const Fixed = withPosition('fixed') -export const Relative = withPosition('relative') -export const Sticky = withPosition('sticky') +export const Absolute = withPosition('Absolute') +export const Fixed = withPosition('Fixed') +export const Relative = withPosition('Relative') +export const Sticky = withPosition('Sticky') Sticky.defaultProps = { theme, top: 0, diff --git a/src/ProgressBar.js b/src/ProgressBar.js index ab8e48de405..739659f4373 100644 --- a/src/ProgressBar.js +++ b/src/ProgressBar.js @@ -5,6 +5,7 @@ import {layout} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' import theme from './theme' import {COMMON, get} from './constants' +import sx from './sx' const Bar = styled.span` width: ${props => (props.progress ? `${props.progress}%` : 0)}; @@ -25,6 +26,7 @@ const ProgressContainer = styled.span` height: ${props => sizeMap[props.barSize]}; ${COMMON} ${layout.width} + ${sx}; ` const ProgressBar = ({progress, bg, theme, ...rest}) => { @@ -46,6 +48,7 @@ ProgressBar.propTypes = { barSize: PropTypes.oneOf(['small', 'default', 'large']), inline: PropTypes.bool, progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + ...sx.propTypes, theme: PropTypes.object, width: systemPropTypes.layout.width } diff --git a/src/SelectMenu/SelectMenu.js b/src/SelectMenu/SelectMenu.js index e6969f11570..102f15bcd29 100644 --- a/src/SelectMenu/SelectMenu.js +++ b/src/SelectMenu/SelectMenu.js @@ -1,6 +1,7 @@ import React, {useRef, useState} from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' +import sx from '../sx' import {COMMON} from '../constants' import theme from '../theme' import {MenuContext} from './SelectMenuContext' @@ -46,6 +47,7 @@ const wrapperStyles = ` const StyledSelectMenu = styled.details` ${wrapperStyles} ${COMMON} + ${sx}; ` // 'as' is spread out because we don't want users to be able to change the tag. @@ -95,7 +97,8 @@ SelectMenu.defaultProps = { SelectMenu.propTypes = { initialTab: PropTypes.string, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default SelectMenu diff --git a/src/SelectMenu/SelectMenuDivider.js b/src/SelectMenu/SelectMenuDivider.js index 4b45477efa5..89826ddfca8 100644 --- a/src/SelectMenu/SelectMenuDivider.js +++ b/src/SelectMenu/SelectMenuDivider.js @@ -1,6 +1,7 @@ import styled, {css} from 'styled-components' import theme from '../theme' import {COMMON, get} from '../constants' +import sx from '../sx' const dividerStyles = css` padding: ${get('space.1')} ${get('space.3')}; @@ -15,6 +16,7 @@ const dividerStyles = css` const SelectMenuDivider = styled.div` ${dividerStyles} ${COMMON} + ${sx}; ` SelectMenuDivider.defaultProps = { @@ -22,7 +24,10 @@ SelectMenuDivider.defaultProps = { } SelectMenuDivider.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuDivider.displayName = 'SelectMenu.Divider' + export default SelectMenuDivider diff --git a/src/SelectMenu/SelectMenuFilter.js b/src/SelectMenu/SelectMenuFilter.js index 6f2add13320..9fc16198ab5 100644 --- a/src/SelectMenu/SelectMenuFilter.js +++ b/src/SelectMenu/SelectMenuFilter.js @@ -5,6 +5,7 @@ import {COMMON, get} from '../constants' import theme from '../theme' import TextInput from '../TextInput' import {MenuContext} from './SelectMenuContext' +import sx from '../sx' const StyledForm = styled.form` padding: ${get('space.3')}; @@ -16,9 +17,11 @@ const StyledForm = styled.form` @media (min-width: ${get('breakpoints.0')}) { padding: ${get('space.2')}; } + + ${sx}; ` -function SelectMenuFilter({theme, value, ...rest}) { +function SelectMenuFilter({theme, value, sx, ...rest}) { const inputRef = useRef(null) const {open} = useContext(MenuContext) @@ -28,8 +31,14 @@ function SelectMenuFilter({theme, value, ...rest}) { inputRef.current.focus() } }, [open]) + + let sxProps = {} + if (sx) { + sxProps = {sx} + } + return ( - + ) @@ -41,7 +50,10 @@ SelectMenuFilter.defaultProps = { SelectMenuFilter.propTypes = { ...COMMON.propTypes, + ...sx.propTypes, value: PropTypes.string } +SelectMenuFilter.displayName = 'SelectMenu.Filter' + export default SelectMenuFilter diff --git a/src/SelectMenu/SelectMenuFooter.js b/src/SelectMenu/SelectMenuFooter.js index a6d70ea15e5..a3313ebce2b 100644 --- a/src/SelectMenu/SelectMenuFooter.js +++ b/src/SelectMenu/SelectMenuFooter.js @@ -1,6 +1,7 @@ import styled, {css} from 'styled-components' import {COMMON, get} from '../constants' import theme from '../theme' +import sx from '../sx' const footerStyles = css` margin-top: -1px; @@ -18,6 +19,7 @@ const footerStyles = css` const SelectMenuFooter = styled.footer` ${footerStyles} ${COMMON} + ${sx}; ` SelectMenuFooter.defaultProps = { @@ -25,7 +27,10 @@ SelectMenuFooter.defaultProps = { } SelectMenuFooter.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuFooter.displayName = 'SelectMenu.Footer' + export default SelectMenuFooter diff --git a/src/SelectMenu/SelectMenuHeader.js b/src/SelectMenu/SelectMenuHeader.js index 35b42838526..58c6e7f98cb 100644 --- a/src/SelectMenu/SelectMenuHeader.js +++ b/src/SelectMenu/SelectMenuHeader.js @@ -1,7 +1,9 @@ import React from 'react' import styled from 'styled-components' +import PropTypes from 'prop-types' import {get, COMMON, TYPOGRAPHY} from '../constants' import theme from '../theme' +import sx from '../sx' // SelectMenu.Header is intentionally not exported, it's an internal component used in // SelectMenu.Modal @@ -28,6 +30,8 @@ const StyledHeader = styled.header` padding-top: ${get('space.2')}; padding-bottom: ${get('space.2')}; } + + ${sx}; ` const SelectMenuHeader = ({children, theme, ...rest}) => { return ( @@ -41,4 +45,13 @@ SelectMenuHeader.defaultProps = { theme } +SelectMenuHeader.propTypes = { + theme: PropTypes.object, + ...COMMON.propTypes, + ...TYPOGRAPHY.propTypes, + ...sx.propTypes +} + +SelectMenuHeader.displayName = 'SelectMenu.Header' + export default SelectMenuHeader diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index 2314cfee23a..bc5214f37be 100644 --- a/src/SelectMenu/SelectMenuItem.js +++ b/src/SelectMenu/SelectMenuItem.js @@ -6,6 +6,7 @@ import {MenuContext} from './SelectMenuContext' import {COMMON, get} from '../constants' import StyledOcticon from '../StyledOcticon' import theme from '../theme' +import sx from '../sx' export const listItemStyles = css` display: flex; @@ -93,6 +94,7 @@ const StyledItem = styled.a.attrs(() => ({ }))` ${listItemStyles} ${COMMON} + ${sx}; ` // 'as' is spread out because we don't want users to be able to change the tag. using something @@ -124,7 +126,10 @@ SelectMenuItem.defaultProps = { SelectMenuItem.propTypes = { selected: PropTypes.bool, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuItem.displayName = 'SelectMenu.Item' + export default SelectMenuItem diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.js index 323be791339..ac4228562e3 100644 --- a/src/SelectMenu/SelectMenuList.js +++ b/src/SelectMenu/SelectMenuList.js @@ -1,6 +1,7 @@ import styled, {css} from 'styled-components' import theme from '../theme' import {COMMON, get} from '../constants' +import sx from '../sx' const listStyles = css` position: relative; @@ -33,13 +34,17 @@ const listStyles = css` const SelectMenuList = styled.div` ${listStyles} ${COMMON} + ${sx}; ` SelectMenuList.defaultProps = { theme } SelectMenuList.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuList.displayName = 'SelectMenu.List' + export default SelectMenuList diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.js index ec5b2c5ed56..fa8f937d47c 100644 --- a/src/SelectMenu/SelectMenuModal.js +++ b/src/SelectMenu/SelectMenuModal.js @@ -2,6 +2,7 @@ import React from 'react' import styled, {keyframes, css} from 'styled-components' import {COMMON, get} from '../constants' import theme from '../theme' +import sx from '../sx' const animateModal = keyframes` 0% { @@ -82,6 +83,7 @@ const Modal = styled.div` const ModalWrapper = styled.div` ${modalWrapperStyles} ${COMMON} + ${sx}; ` const SelectMenuModal = ({children, theme, ...rest}) => { @@ -97,7 +99,10 @@ SelectMenuModal.defaultProps = { } SelectMenuModal.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuModal.displayName = 'SelectMenu.Modal' + export default SelectMenuModal diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.js index 5f26b168b62..057d2d8b585 100644 --- a/src/SelectMenu/SelectMenuTab.js +++ b/src/SelectMenu/SelectMenuTab.js @@ -5,6 +5,7 @@ import styled, {css} from 'styled-components' import {MenuContext} from './SelectMenuContext' import {get, COMMON} from '../constants' import theme from '../theme' +import sx from '../sx' const tabStyles = css` flex: 1; @@ -46,6 +47,7 @@ const tabStyles = css` const StyledTab = styled.button` ${tabStyles} ${COMMON} + ${sx}; ` const SelectMenuTab = ({tabName, index, className, onClick, ...rest}) => { @@ -88,7 +90,10 @@ SelectMenuTab.propTypes = { index: PropTypes.number, onClick: PropTypes.func, tabName: PropTypes.string, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuTab.displayName = 'SelectMenu.Tab' + export default SelectMenuTab diff --git a/src/SelectMenu/SelectMenuTabPanel.js b/src/SelectMenu/SelectMenuTabPanel.js index 338598c9645..164ab123040 100644 --- a/src/SelectMenu/SelectMenuTabPanel.js +++ b/src/SelectMenu/SelectMenuTabPanel.js @@ -5,6 +5,7 @@ import {MenuContext} from './SelectMenuContext' import SelectMenuList from './SelectMenuList' import theme from '../theme' import {COMMON} from '../constants' +import sx from '../sx' const TabPanelBase = ({tabName, className, children, ...rest}) => { const menuContext = useContext(MenuContext) @@ -17,6 +18,7 @@ const TabPanelBase = ({tabName, className, children, ...rest}) => { const TabPanel = styled(TabPanelBase)` ${COMMON} + ${sx}; ` TabPanel.defaultProps = { @@ -25,7 +27,10 @@ TabPanel.defaultProps = { TabPanel.propTypes = { tabName: PropTypes.string, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +TabPanel.displayName = 'SelectMenu.TabPanel' + export default TabPanel diff --git a/src/SelectMenu/SelectMenuTabs.js b/src/SelectMenu/SelectMenuTabs.js index a65172e3de4..85e7a4e51da 100644 --- a/src/SelectMenu/SelectMenuTabs.js +++ b/src/SelectMenu/SelectMenuTabs.js @@ -2,6 +2,7 @@ import React from 'react' import styled, {css} from 'styled-components' import {COMMON, get} from '../constants' import theme from '../theme' +import sx from '../sx' const tabWrapperStyles = css` display: flex; @@ -32,6 +33,7 @@ const Tabs = ({children, ...rest}) => { const SelectMenuTabs = styled(Tabs)` ${tabWrapperStyles} ${COMMON} + ${sx}; ` SelectMenuTabs.defaultProps = { @@ -39,7 +41,10 @@ SelectMenuTabs.defaultProps = { } SelectMenuTabs.propTypes = { - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SelectMenuTabs.displayName = 'SelectMenu.Tabs' + export default SelectMenuTabs diff --git a/src/SideNav.js b/src/SideNav.js index 7d681d34844..ce2b87c350c 100644 --- a/src/SideNav.js +++ b/src/SideNav.js @@ -7,6 +7,7 @@ import theme from './theme' import elementType from './utils/elementType' import Link from './Link' import BorderBox from './BorderBox' +import sx from './sx' function SideNavBase({variant, className, bordered, children, ...props}) { const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal' @@ -38,6 +39,7 @@ const SideNav = styled(SideNavBase)` `} ${COMMON}; + ${sx}; ` SideNav.Link = styled(Link).attrs(props => { @@ -136,6 +138,8 @@ SideNav.Link = styled(Link).attrs(props => { font-weight: ${get('fontWeights.semibold')}; } } + + ${sx}; ` SideNav.defaultProps = { @@ -149,8 +153,7 @@ SideNav.propTypes = { children: PropTypes.node, theme: PropTypes.object, variant: PropTypes.oneOf(['normal', 'lightweight']), - ...BorderBox.propTypes, - ...COMMON.propTypes + ...BorderBox.propTypes } SideNav.Link.defaultProps = { @@ -166,4 +169,6 @@ SideNav.Link.propTypes = { ...Link.propTypes } +SideNav.Link.displayName = 'SideNav.Link' + export default SideNav diff --git a/src/StateLabel.js b/src/StateLabel.js index bd0bda8baae..84c996f0cd4 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -5,6 +5,7 @@ import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octico import theme, {colors} from './theme' import {COMMON, get} from './constants' import StyledOcticon from './StyledOcticon' +import sx from './sx' const statusMap = { issueClosed: colors.red[6], @@ -48,6 +49,7 @@ const StateLabel = styled(StateLabelBase)` background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)}; border-radius: ${get('radii.3')}; ${COMMON}; + ${sx}; ` StateLabel.defaultProps = { @@ -58,7 +60,8 @@ StateLabel.propTypes = { small: PropTypes.bool, status: PropTypes.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged']), theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default StateLabel diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js index a07450ceeb9..4b3052bc983 100644 --- a/src/StyledOcticon.js +++ b/src/StyledOcticon.js @@ -3,8 +3,12 @@ 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) +const StyledOcticon = styled(Octicon)` + ${COMMON}; + ${sx}; +` StyledOcticon.defaultProps = { theme @@ -12,6 +16,7 @@ StyledOcticon.defaultProps = { StyledOcticon.propTypes = { ...COMMON.propTypes, + ...sx.propTypes, theme: PropTypes.object } diff --git a/src/SubNav.js b/src/SubNav.js index 6b4ab9f16bd..7ee5b05724c 100644 --- a/src/SubNav.js +++ b/src/SubNav.js @@ -5,6 +5,7 @@ import styled from 'styled-components' import {COMMON, FLEX, get} from './constants' import theme from './theme' import Flex from './Flex' +import sx from './sx' const ITEM_CLASS = 'SubNav-item' const SELECTED_CLASS = 'selected' @@ -41,8 +42,8 @@ const SubNav = styled(SubNavBase)` } ${COMMON}; - ${FLEX}; + ${sx}; ` SubNav.Links = Flex @@ -96,6 +97,9 @@ SubNav.Link = styled.a.attrs(props => ({ color: ${get('colors.gray.5')}; } } + + ${COMMON}; + ${sx}; ` SubNav.defaultProps = { @@ -109,7 +113,8 @@ SubNav.propTypes = { full: PropTypes.bool, label: PropTypes.string, theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } SubNav.Link.defaultProps = { @@ -117,13 +122,17 @@ SubNav.Link.defaultProps = { } SubNav.Link.propTypes = { - as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), href: PropTypes.string, selected: PropTypes.bool, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +SubNav.Link.displayName = 'SubNav.Link' + SubNav.Links.propTypes = { - ...COMMON.propTypes + ...Flex.propTypes } +SubNav.Links.displayName = 'SubNav.Links' export default SubNav diff --git a/src/TabNav.js b/src/TabNav.js index 6f9af5875cd..7ecf50e9992 100644 --- a/src/TabNav.js +++ b/src/TabNav.js @@ -4,6 +4,7 @@ import classnames from 'classnames' import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' const ITEM_CLASS = 'TabNav-item' const SELECTED_CLASS = 'selected' @@ -27,6 +28,7 @@ const TabNav = styled(TabNavBase)` } ${COMMON}; + ${sx}; ` TabNav.Link = styled.a.attrs(props => ({ @@ -55,6 +57,9 @@ TabNav.Link = styled.a.attrs(props => ({ border-top-left-radius: ${get('radii.2')}; background-color: ${get('colors.white')}; } + + ${COMMON}; + ${sx}; ` TabNav.defaultProps = { @@ -64,7 +69,8 @@ TabNav.defaultProps = { TabNav.propTypes = { children: PropTypes.node, theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } TabNav.Link.defaultProps = { @@ -72,10 +78,13 @@ TabNav.Link.defaultProps = { } TabNav.Link.propTypes = { - as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), href: PropTypes.string, selected: PropTypes.bool, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +TabNav.Link.displayName = 'TabNav.Link' + export default TabNav diff --git a/src/Text.js b/src/Text.js index 39a6a027b55..60e121612d8 100644 --- a/src/Text.js +++ b/src/Text.js @@ -2,10 +2,12 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import theme from './theme' import {TYPOGRAPHY, COMMON} from './constants' +import sx from './sx' const Text = styled.span` ${TYPOGRAPHY}; ${COMMON}; + ${sx}; ` Text.defaultProps = { @@ -15,6 +17,7 @@ Text.defaultProps = { Text.propTypes = { ...TYPOGRAPHY.propTypes, ...COMMON.propTypes, + ...sx.propTypes, theme: PropTypes.object } diff --git a/src/TextInput.js b/src/TextInput.js index d1742652519..50bf4afac6d 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -8,6 +8,7 @@ import Octicon from './StyledOcticon' import {variant, width, minWidth, maxWidth} from 'styled-system' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' const sizeVariants = variant({ variants: { @@ -27,7 +28,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, 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) @@ -39,6 +40,7 @@ const TextInput = React.forwardRef(({icon, className, block, disabled, ...rest}, block={block} theme={theme} disabled={disabled} + sx={sx} {...wrapperProps} > {icon && } @@ -111,7 +113,7 @@ const Wrapper = styled.span` css` display: block; width: 100%; - `} + `} // Ensures inputs don't zoom on mobile but are body-font size on desktop @media (min-width: ${get('breakpoints.1')}) { @@ -122,6 +124,7 @@ const Wrapper = styled.span` ${minWidth} ${maxWidth} ${sizeVariants} + ${sx}; ` TextInput.defaultProps = { @@ -135,7 +138,10 @@ TextInput.propTypes = { minWidth: systemPropTypes.layout.minWidth, variant: PropTypes.oneOf(['small', 'large']), ...COMMON.propTypes, + ...sx.propTypes, width: systemPropTypes.layout.width } +TextInput.displayName = 'TextInput' + export default TextInput diff --git a/src/Timeline.js b/src/Timeline.js index 30c7bf2f434..17f5b3e0669 100644 --- a/src/Timeline.js +++ b/src/Timeline.js @@ -8,6 +8,7 @@ import React from 'react' import {Relative} from './Position' import classnames from 'classnames' import theme from './theme' +import sx from './sx' const Timeline = styled(Flex)` flex-direction: column; @@ -22,6 +23,8 @@ const Timeline = styled(Flex)` padding-bottom: 0; } `} + + ${sx}; ` Timeline.Item = styled(Flex).attrs(props => ({ @@ -61,6 +64,7 @@ Timeline.Item = styled(Flex).attrs(props => ({ `} ${COMMON}; + ${sx}; ` Timeline.Badge = props => { @@ -97,6 +101,7 @@ Timeline.Body = styled(Box)` color: ${get('colors.gray.7')}; flex: auto; font-size: ${get('fontSizes.1')}; + ${sx}; ` Timeline.Break = styled(Relative)` @@ -108,6 +113,7 @@ Timeline.Break = styled(Relative)` background-color: ${get('colors.white')}; border: 0; border-top: ${get('space.1')} solid ${get('colors.gray.2')}; + ${sx}; ` Timeline.defaultProps = { @@ -118,7 +124,8 @@ Timeline.propTypes = { children: PropTypes.node, clipSidebar: PropTypes.bool, theme: PropTypes.object, - ...Flex.propTypes + ...Flex.propTypes, + ...sx.propTypes } Timeline.Item.defaultProps = { @@ -129,9 +136,12 @@ Timeline.Item.propTypes = { children: PropTypes.node, condensed: PropTypes.bool, theme: PropTypes.object, - ...Flex.propTypes + ...Flex.propTypes, + ...sx.propTypes } +Timeline.Item.displayName = 'Timeline.Item' + Timeline.Badge.defaultProps = { theme } @@ -139,9 +149,12 @@ Timeline.Badge.defaultProps = { Timeline.Badge.propTypes = { children: PropTypes.node, theme: PropTypes.object, - ...Flex.propTypes + ...Flex.propTypes, + ...sx.propTypes } +Timeline.Badge.displayName = 'Timeline.Badge' + Timeline.Body.defaultProps = { theme } @@ -149,9 +162,12 @@ Timeline.Body.defaultProps = { Timeline.Body.propTypes = { children: PropTypes.node, theme: PropTypes.object, - ...Box.propTypes + ...Box.propTypes, + ...sx.propTypes } +Timeline.Body.displayName = 'Timeline.Body' + Timeline.Break.defaultProps = { theme } @@ -159,7 +175,10 @@ Timeline.Break.defaultProps = { Timeline.Break.propTypes = { children: PropTypes.node, theme: PropTypes.object, - ...Box.propTypes + ...Box.propTypes, + ...sx.propTypes } +Timeline.Break.displayName = 'Timeline.Break' + export default Timeline diff --git a/src/Tooltip.js b/src/Tooltip.js index 3328ef57f9e..a15a426e443 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -4,6 +4,7 @@ import classnames from 'classnames' import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' function TooltipBase({direction, children, className, text, noDelay, align, wrap, ...rest}) { const classes = classnames( @@ -245,6 +246,7 @@ const Tooltip = styled(TooltipBase)` left: 10px; } ${COMMON}; + ${sx}; ` Tooltip.alignments = ['left', 'right'] @@ -264,7 +266,8 @@ Tooltip.propTypes = { text: PropTypes.string, theme: PropTypes.object, wrap: PropTypes.bool, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } export default Tooltip diff --git a/src/Truncate.js b/src/Truncate.js index 505f96f9c6b..f817301a106 100644 --- a/src/Truncate.js +++ b/src/Truncate.js @@ -3,6 +3,7 @@ import {maxWidth} from 'styled-system' import PropTypes from 'prop-types' import {TYPOGRAPHY, COMMON} from './constants' import theme from './theme' +import sx from './sx' const Truncate = styled('div')` ${TYPOGRAPHY} @@ -14,6 +15,7 @@ const Truncate = styled('div')` white-space: nowrap; ${maxWidth} ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')} + ${sx}; ` Truncate.defaultProps = { @@ -29,6 +31,7 @@ Truncate.propTypes = { ...COMMON.propTypes, expandable: PropTypes.bool, inline: PropTypes.bool, + ...sx.propTypes, maxWidth: PropTypes.number, theme: PropTypes.object, title: PropTypes.string.isRequired diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js index cb68b215da9..1febabe5f5c 100644 --- a/src/UnderlineNav.js +++ b/src/UnderlineNav.js @@ -4,6 +4,7 @@ import classnames from 'classnames' import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' +import sx from './sx' const ITEM_CLASS = 'UnderlineNav-item' const SELECTED_CLASS = 'selected' @@ -48,6 +49,7 @@ const UnderlineNav = styled(UnderlineNavBase)` } ${COMMON}; + ${sx}; ` UnderlineNav.Link = styled.a.attrs(props => ({ @@ -83,6 +85,9 @@ UnderlineNav.Link = styled.a.attrs(props => ({ color: ${get('colors.gray.5')}; } } + + ${COMMON}; + ${sx}; ` UnderlineNav.defaultProps = { @@ -96,7 +101,8 @@ UnderlineNav.propTypes = { full: PropTypes.bool, label: PropTypes.string, theme: PropTypes.object, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } UnderlineNav.Link.defaultProps = { @@ -104,10 +110,13 @@ UnderlineNav.Link.defaultProps = { } UnderlineNav.Link.propTypes = { - as: PropTypes.node, + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), href: PropTypes.string, selected: PropTypes.bool, - ...COMMON.propTypes + ...COMMON.propTypes, + ...sx.propTypes } +UnderlineNav.Link.displayName = 'UnderlineNav.Link' + export default UnderlineNav diff --git a/src/__tests__/Avatar.js b/src/__tests__/Avatar.js index 7537d04367f..aff7a6a1a79 100644 --- a/src/__tests__/Avatar.js +++ b/src/__tests__/Avatar.js @@ -1,13 +1,16 @@ import React from 'react' import Avatar from '../Avatar' import theme from '../theme' -import {px, render} from '../utils/testing' +import {px, render, behavesAsComponent} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' +import systemPropTypes from '@styled-system/prop-types' expect.extend(toHaveNoViolations) describe('Avatar', () => { + behavesAsComponent(Avatar, [{propTypes: systemPropTypes.space}]) + it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe(container) @@ -15,14 +18,6 @@ describe('Avatar', () => { cleanup() }) - it('renders default props', () => { - expect(render()).toMatchSnapshot() - }) - - it('has default theme', () => { - expect(Avatar).toSetDefaultTheme() - }) - it('renders small by default', () => { const size = 20 const result = render() diff --git a/src/__tests__/AvatarStack.js b/src/__tests__/AvatarStack.js index 4285fc04d81..2d5ada9ac34 100644 --- a/src/__tests__/AvatarStack.js +++ b/src/__tests__/AvatarStack.js @@ -1,6 +1,6 @@ import React from 'react' import AvatarStack from '../AvatarStack' -import {render} from '../utils/testing' +import {render, behavesAsComponent} from '../utils/testing' import {COMMON} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' @@ -26,9 +26,7 @@ const rightAvatarComp = ( ) describe('Avatar', () => { - it('implements common system props', () => { - expect(AvatarStack).toImplementSystemProps(COMMON) - }) + behavesAsComponent(AvatarStack, [COMMON], () => avatarComp) it('should have no axe violations', async () => { const {container} = HTMLRender(avatarComp) @@ -37,14 +35,6 @@ describe('Avatar', () => { cleanup() }) - it('has default theme', () => { - expect(AvatarStack).toSetDefaultTheme() - }) - - it('matches snapshot', () => { - expect(render(avatarComp)).toMatchSnapshot() - }) - it('respects alignRight props', () => { expect(render(rightAvatarComp)).toMatchSnapshot() }) diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js index 92daeb9ec1d..0ec0a016d96 100644 --- a/src/__tests__/BorderBox.js +++ b/src/__tests__/BorderBox.js @@ -1,7 +1,7 @@ import React from 'react' import theme, {colors} from '../theme' import BorderBox from '../BorderBox' -import {render} from '../utils/testing' +import {render, behavesAsComponent} from '../utils/testing' import {LAYOUT, COMMON, BORDER, FLEX} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' @@ -9,6 +9,8 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('BorderBox', () => { + behavesAsComponent(BorderBox, [LAYOUT, COMMON, BORDER, FLEX]) + it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe(container) @@ -16,21 +18,6 @@ describe('BorderBox', () => { cleanup() }) - it('implements layout system props', () => { - expect(BorderBox).toImplementSystemProps(LAYOUT) - expect(BorderBox).toImplementSystemProps(COMMON) - expect(BorderBox).toImplementSystemProps(BORDER) - expect(BorderBox).toImplementSystemProps(FLEX) - }) - - it('has default theme', () => { - expect(BorderBox).toSetDefaultTheme() - }) - - it('respects the "as" prop', () => { - expect(render().type).toEqual('span') - }) - it('renders borders', () => { expect(render()).toHaveStyleRule('border-color', colors.green[5]) expect(render()).toHaveStyleRule('border-bottom', '0') diff --git a/src/__tests__/Box.js b/src/__tests__/Box.js index 2f1d48f7553..69c700b0d26 100644 --- a/src/__tests__/Box.js +++ b/src/__tests__/Box.js @@ -1,7 +1,7 @@ import React from 'react' import Box from '../Box' import theme from '../theme' -import {render} from '../utils/testing' +import {render, behavesAsComponent} from '../utils/testing' import {LAYOUT, COMMON, FLEX} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' @@ -9,6 +9,8 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('Box', () => { + behavesAsComponent(Box, [COMMON, LAYOUT, FLEX]) + it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe(container) @@ -16,24 +18,6 @@ describe('Box', () => { cleanup() }) - it('implements system props', () => { - expect(Box).toImplementSystemProps(COMMON) - expect(Box).toImplementSystemProps(LAYOUT) - expect(Box).toImplementSystemProps(FLEX) - }) - - it('respects the "as" prop', () => { - expect(render().type).toEqual('span') - }) - - it('renders without any props', () => { - expect(render()).toMatchSnapshot() - }) - - it('has default theme', () => { - expect(Box).toSetDefaultTheme() - }) - it('renders margin', () => { expect(render()).toMatchSnapshot() expect(render()).toMatchSnapshot() diff --git a/src/__tests__/BranchName.js b/src/__tests__/BranchName.js index e3be69cb16f..7d848227d8c 100644 --- a/src/__tests__/BranchName.js +++ b/src/__tests__/BranchName.js @@ -1,6 +1,6 @@ import React from 'react' import BranchName from '../BranchName' -import {render} from '../utils/testing' +import {render, behavesAsComponent} from '../utils/testing' import {COMMON} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' @@ -8,25 +8,16 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('BranchName', () => { + behavesAsComponent(BranchName, [COMMON]) + it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe(container) expect(results).toHaveNoViolations() cleanup() }) + it('renders an by default', () => { expect(render().type).toEqual('a') }) - - it('has default theme', () => { - expect(BranchName).toSetDefaultTheme() - }) - - it('respects the "as" prop', () => { - expect(render().type).toEqual('span') - }) - - it('implements common system props', () => { - expect(BranchName).toImplementSystemProps(COMMON) - }) }) diff --git a/src/__tests__/BreadcrumbItem.js b/src/__tests__/BreadcrumbItem.js index 4b1e25c573c..19f58d575c4 100644 --- a/src/__tests__/BreadcrumbItem.js +++ b/src/__tests__/BreadcrumbItem.js @@ -1,20 +1,19 @@ import React from 'react' import Breadcrumb from '../Breadcrumbs' -import {render} from '../utils/testing' +import {render, behavesAsComponent} 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('Breadcrumb.Item', () => { + behavesAsComponent(Breadcrumb.Item, [COMMON]) + it('renders an by default', () => { expect(render().type).toEqual('a') }) - it('has default theme', () => { - expect(Breadcrumb.Item).toSetDefaultTheme() - }) - it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe(container) @@ -22,11 +21,6 @@ describe('Breadcrumb.Item', () => { cleanup() }) - it('renders the given "as" prop', () => { - const Type = ({theme, ...props}) => - expect(render()).toMatchSnapshot() - }) - it('respects the "selected" prop', () => { expect(render()).toMatchSnapshot() }) diff --git a/src/__tests__/Breadcrumbs.js b/src/__tests__/Breadcrumbs.js index 3e08c5add71..848fe1871b7 100644 --- a/src/__tests__/Breadcrumbs.js +++ b/src/__tests__/Breadcrumbs.js @@ -1,6 +1,6 @@ import React from 'react' import Breadcrumb from '../Breadcrumbs' -import {mount, render, rendersClass} from '../utils/testing' +import {mount, render, rendersClass, behavesAsComponent} from '../utils/testing' import {COMMON} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' @@ -8,13 +8,7 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('Breadcrumb', () => { - it('implements system props', () => { - expect(Breadcrumb).toImplementSystemProps(COMMON) - }) - - it('has default theme', () => { - expect(Breadcrumb).toSetDefaultTheme() - }) + behavesAsComponent(Breadcrumb, [COMMON]) it('should have no axe violations', async () => { const {container} = HTMLRender() diff --git a/src/__tests__/Button.js b/src/__tests__/Button.js index f5437413b86..d517ba65351 100644 --- a/src/__tests__/Button.js +++ b/src/__tests__/Button.js @@ -1,8 +1,7 @@ import React from 'react' -import {layout} from 'styled-system' -import {Button, ButtonPrimary, ButtonDanger, ButtonOutline, ButtonGroup} from '..' -import {render} from '../utils/testing' -import {COMMON} from '../constants' +import {Button, ButtonPrimary, ButtonDanger, ButtonOutline, ButtonGroup, ButtonTableList} from '..' +import {render, behavesAsComponent} from '../utils/testing' +import {COMMON, FLEX, LAYOUT, TYPOGRAPHY} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' @@ -11,6 +10,8 @@ expect.extend(toHaveNoViolations) function noop() {} describe('Button', () => { + behavesAsComponent(Button, [COMMON, LAYOUT]) + it('renders a + + Projects + + Primer Components bugs + Primer Components roadmap + Project 3 + Project 4 + + + + +``` + ### System Props SelectMenu.Modal components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props -SelectMenu.Modal components do not get any additional props besides system props. + +| Prop name | Type | Description | +| :-------- | :----- | :------------------------------------------------ | +| align | String | Use `right` to align the select menu to the right | ## SelectMenu.List diff --git a/index.d.ts b/index.d.ts index 309e1b315b7..225b320670b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -298,7 +298,9 @@ declare module '@primer/components' { initialTab?: string } - export interface SelectMenuModalProps extends CommonProps, Omit, 'color'> {} + export interface SelectMenuModalProps extends CommonProps, Omit, 'color'> { + align?: 'left' | 'right' + } export interface SelectMenuListProps extends CommonProps, Omit, 'color'> {} diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.js index fc172c2cecf..ecd17d45558 100644 --- a/src/SelectMenu/SelectMenuModal.js +++ b/src/SelectMenu/SelectMenuModal.js @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styled, {keyframes, css} from 'styled-components' import {COMMON, get} from '../constants' import theme from '../theme' @@ -68,7 +69,7 @@ const modalWrapperStyles = css` @media (min-width: ${get('breakpoints.0')}) { position: absolute; top: auto; - right: auto; + right: ${props => (props.align === 'right' ? '0' : 'auto')}; bottom: auto; left: auto; padding: 0; @@ -93,6 +94,7 @@ const SelectMenuModal = ({children, theme, ...rest}) => { } SelectMenuModal.defaultProps = { + align: PropTypes.oneOf(['left', 'right']), theme } From 63b648abc7e811662f7368b5f39024e41dd619f7 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Tue, 5 May 2020 14:15:25 -0700 Subject: [PATCH 120/154] remove old test --- src/__tests__/SelectMenu.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/__tests__/SelectMenu.js b/src/__tests__/SelectMenu.js index 250d0084e56..b61011509c6 100644 --- a/src/__tests__/SelectMenu.js +++ b/src/__tests__/SelectMenu.js @@ -74,16 +74,6 @@ describe('SelectMenu', () => { expect(component.find('details').length).toEqual(1) }) - it('does not allow the "as" prop on SelectMenu.Item', () => { - const component = mount() - expect( - component - .find("[data-test='menu-item']") - .first() - .getDOMNode().tagName - ).toEqual('A') - }) - it('shows correct initial tab', () => { const testInstance = renderRoot() expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization') From 8483173fa3d0d1c669d0061536b9c850073bedf6 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 5 May 2020 14:35:25 -0700 Subject: [PATCH 121/154] Refactor StateLabel and update tests --- docs/content/StateLabel.md | 2 +- src/StateLabel.js | 33 ++--- src/StyledOcticon.js | 6 + src/__tests__/StateLabel.js | 24 ++-- .../__snapshots__/StateLabel.js.snap | 127 ++++++++++++++++-- src/theme-preval.js | 2 +- src/utils/test-matchers.js | 2 +- src/utils/testing.js | 16 ++- 8 files changed, 159 insertions(+), 53 deletions(-) diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md index 199f23f210a..a398852bd9d 100644 --- a/docs/content/StateLabel.md +++ b/docs/content/StateLabel.md @@ -18,4 +18,4 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system | Name | Type | Default | Description | | :- | :- | :-: | :- | | variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. | -| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed` or `pullMerged`. +| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. diff --git a/src/StateLabel.js b/src/StateLabel.js index f555a5d5c48..918f58d8e76 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {GitMerge, GitPullRequest, IssueClosed, IssueOpened, Question} from '@primer/octicons-react' import {variant} from 'styled-system' -import theme, {colors} from './theme' +import theme from './theme' import {COMMON, get} from './constants' import StyledOcticon from './StyledOcticon' import sx from './sx' @@ -13,7 +13,8 @@ const octiconMap = { pullOpened: GitPullRequest, issueClosed: IssueClosed, pullClosed: GitPullRequest, - pullMerged: GitMerge + pullMerged: GitMerge, + draft: GitPullRequest } const colorVariants = variant({ @@ -34,24 +35,13 @@ const sizeVariants = variant({ } }) -function StateLabelBase({className, status, variant = 'large', children}) { - const octiconProps = variant === 'small' ? {width: '1em'} : {} - return ( - - {status && } - {children} - - ) -} - -const StateLabel = styled(StateLabelBase)` +const StateLabelBase = styled.span` display: inline-flex; align-items: center; font-weight: 600; line-height: 16px; - color: ${colors.white}; + color: ${get('colors.white')}; text-align: center; - background-color: ${get('stateLabels.colors.unknown')}; border-radius: ${get('radii.3')}; ${colorVariants}; ${sizeVariants}; @@ -59,13 +49,24 @@ const StateLabel = styled(StateLabelBase)` ${sx}; ` +function StateLabel({children, ...rest}) { + const {status, variant} = rest + const octiconProps = variant === 'small' ? {width: '1em'} : {} + return ( + + {status && } + {children} + + ) +} + StateLabel.defaultProps = { theme, variant: 'normal' } StateLabel.propTypes = { - status: PropTypes.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged']).isRequired, + status: PropTypes.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged', 'draft']).isRequired, theme: PropTypes.object, variant: PropTypes.oneOf(['small', 'normal']), ...COMMON.propTypes, diff --git a/src/StyledOcticon.js b/src/StyledOcticon.js index 4b3052bc983..2a6ae50ae36 100644 --- a/src/StyledOcticon.js +++ b/src/StyledOcticon.js @@ -5,6 +5,12 @@ import {COMMON} from './constants' import theme from './theme' import sx from './sx' +// ??? +// Octicon.propTypes = { +// ...Octicon.propTypes, +// width: PropTypes.oneOfType([Octicon.propTypes.width, PropTypes.string]) +// } + const StyledOcticon = styled(Octicon)` ${COMMON}; ${sx}; diff --git a/src/__tests__/StateLabel.js b/src/__tests__/StateLabel.js index 111b828641c..a5428abbea6 100644 --- a/src/__tests__/StateLabel.js +++ b/src/__tests__/StateLabel.js @@ -8,7 +8,13 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('StateLabel', () => { - behavesAsComponent(StateLabel, [COMMON]) + 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 + }) checkExports('StateLabel', { default: StateLabel @@ -27,22 +33,12 @@ describe('StateLabel', () => { expect(render()).toMatchSnapshot() }) - it('has default theme', () => { - expect(StateLabel).toSetDefaultTheme() - }) - it('respects the variant prop', () => { - expect(render()).toMatchSnapshot() - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('renders children', () => { - expect(render(hi)).toMatchSnapshot() - }) - - it('does not pass on arbitrary attributes', () => { - const defaultOutput = render() - expect(render()).toEqual(defaultOutput) - expect(render( + , + "container": , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; From 5da82014acee3265ac7dcb9a546f6aa4d0ca5c21 Mon Sep 17 00:00:00 2001 From: Derrick Marcey Date: Wed, 6 May 2020 10:26:20 -0400 Subject: [PATCH 129/154] Updated snapshot for right-align menu --- .../__snapshots__/SelectMenu.js.snap | 577 +++++++----------- 1 file changed, 216 insertions(+), 361 deletions(-) diff --git a/src/__tests__/__snapshots__/SelectMenu.js.snap b/src/__tests__/__snapshots__/SelectMenu.js.snap index 4bc61e7675a..800bcbfa294 100644 --- a/src/__tests__/__snapshots__/SelectMenu.js.snap +++ b/src/__tests__/__snapshots__/SelectMenu.js.snap @@ -1,73 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` -Object { - "asFragment": [Function], - "baseElement": .c1 { - position: relative; - display: inline-block; - padding: 6px 16px; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 14px; - color: #24292e; - background-color: #fafbfc; - border: 1px solid rgba(27,31,35,0.12); - box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25); -} - -.c1:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c1:focus { - outline: none; -} - -.c1:disabled { - cursor: default; -} - -.c1:disabled svg { - opacity: 0.6; -} - -.c1:hover { - background-color: #F3F4F6; - box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1); -} - -.c1:focus { - border-color: transparent; - box-shadow: 0 0 0 3px rgba(3,102,214,0.3); -} - -.c1:active { - background-color: #edeff2; - box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); - border-color: #d1d5da; -} - -.c1:disabled { - color: #959da5; - background-color: #fafbfc; - border-color: #eaecef; -} - .c6 { padding: 4px 16px; margin: 0; @@ -106,6 +39,8 @@ Object { color: #586069; -webkit-text-decoration: none; text-decoration: none; + font-size: 12px; + width: 100%; } .c5:hover { @@ -242,6 +177,72 @@ Object { display: none; } +.c1 { + position: relative; + display: inline-block; + padding: 6px 16px; + font-weight: 600; + line-height: 20px; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-radius: 6px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + text-align: center; + font-size: 14px; + color: #24292e; + background-color: #fafbfc; + border: 1px solid rgba(27,31,35,0.12); + box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25); +} + +.c1:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1:focus { + outline: none; +} + +.c1:disabled { + cursor: default; +} + +.c1:disabled svg { + opacity: 0.6; +} + +.c1:hover { + background-color: #F3F4F6; + box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1); +} + +.c1:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(3,102,214,0.3); +} + +.c1:active { + background-color: #edeff2; + box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); + border-color: #d1d5da; +} + +.c1:disabled { + color: #959da5; + background-color: #fafbfc; + border-color: #eaecef; +} + @media (min-width:544px) { .c7 { padding: 4px 8px; @@ -321,306 +322,160 @@ Object { } } - -
-
+ + Projects + +
+
+
- - Projects - - -
-
- , - "container":
-
- - Projects - - -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} +
+
+ `; From 9bde038f67477b21e77512fae352811666fba084 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 6 May 2020 16:51:59 -0700 Subject: [PATCH 130/154] Add cross-env for portable environment variables during builds --- docs/package.json | 5 +++-- docs/yarn.lock | 16 ++++++++++++++++ package.json | 3 ++- yarn.lock | 16 ++++++++++++++++ 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/package.json b/docs/package.json index 6f2f4a92ec6..fb214875db8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -5,7 +5,7 @@ "scripts": { "clean": "gatsby clean", "develop": "gatsby develop", - "build": "cd .. && yarn && cd docs && NODE_ENV=production gatsby build --prefix-paths" + "build": "cd .. && yarn && cd docs && cross-env NODE_ENV=production gatsby build --prefix-paths" }, "engines": { "node": ">= 10.x" @@ -23,6 +23,7 @@ "styled-system": "^5.1.0" }, "devDependencies": { + "cross-env": "7.0.2", "minipass": "^2.9.0" } -} \ No newline at end of file +} diff --git a/docs/yarn.lock b/docs/yarn.lock index b512000106d..01a355bbb35 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -3906,6 +3906,13 @@ create-react-context@^0.2.1: fbjs "^0.8.0" gud "^1.0.0" +cross-env@7.0.2: + version "7.0.2" + resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9" + integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw== + dependencies: + cross-spawn "^7.0.1" + cross-fetch@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.2.tgz#a47ff4f7fc712daba8f6a695a11c948440d45723" @@ -3943,6 +3950,15 @@ cross-spawn@^7.0.0: shebang-command "^2.0.0" which "^2.0.1" +cross-spawn@^7.0.1: + version "7.0.2" + resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6" + integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw== + dependencies: + path-key "^3.1.0" + shebang-command "^2.0.0" + which "^2.0.1" + crypt@~0.0.1: version "0.0.2" resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b" diff --git a/package.json b/package.json index 4da780bc143..98df90facd9 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "start": "cd docs && yarn run develop", "predist": "rm -rf dist", "dist": "yarn dist:rollup && yarn dist:transpile", - "dist:rollup": "NODE_ENV=production rollup -c", + "dist:rollup": "cross-env NODE_ENV=production rollup -c", "dist:transpile": "rm -rf lib && babel src --out-dir lib", "prepublishOnly": "yarn run dist", "lint": "eslint src docs/components", @@ -73,6 +73,7 @@ "babel-plugin-preval": "5.0.0", "babel-plugin-styled-components": "1.10.7", "babel-plugin-transform-replace-expressions": "0.2.0", + "cross-env": "7.0.2", "enzyme": "3.10.0", "enzyme-adapter-react-16": "1.15.1", "eslint": "6.5.1", diff --git a/yarn.lock b/yarn.lock index efd11eef852..fd290d40410 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4319,6 +4319,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +cross-env@7.0.2: + version "7.0.2" + resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9" + integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw== + dependencies: + cross-spawn "^7.0.1" + cross-fetch@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.2.tgz#a47ff4f7fc712daba8f6a695a11c948440d45723" @@ -4356,6 +4363,15 @@ cross-spawn@^7.0.0: shebang-command "^2.0.0" which "^2.0.1" +cross-spawn@^7.0.1: + version "7.0.2" + resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6" + integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw== + dependencies: + path-key "^3.1.0" + shebang-command "^2.0.0" + which "^2.0.1" + crypto-browserify@^3.11.0: version "3.12.0" resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec" From c72014fe05862e01fd82a87759b4854643922ae6 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 6 May 2020 17:01:06 -0700 Subject: [PATCH 131/154] Fix rollup's handling of the preval'd theme --- src/theme.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index f0aaeca78da..d72e3b28524 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,4 +1,5 @@ -const {theme, colors} = require('./theme-preval') +import {default as themeExport} from './theme-preval' +const {theme, colors} = themeExport export default theme export {colors} From e3b738993f4c9f3db48665a37962940c69ab3404 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 6 May 2020 17:17:04 -0700 Subject: [PATCH 132/154] Update src/theme-preval.js Co-authored-by: Emily --- src/theme-preval.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/theme-preval.js b/src/theme-preval.js index e125ebf332c..2075e8b3890 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -308,35 +308,33 @@ const pagination = { const stateLabels = { sizes: { small: { - py: 1, - px: 2, - fontSize: 0 + padding: `${space[1]} ${space[2]}`, + fontSize: fontSizes[0] }, normal: { - py: 2, - px: '12px', - fontSize: 1 + padding: `${space[2]} 12px`, + fontSize: fontSizes[1] } }, status: { issueClosed: { - backgroundColor: 'red.6' + backgroundColor: red[5] }, pullClosed: { - backgroundColor: 'red.5' + backgroundColor: red[5] }, pullMerged: { - backgroundColor: 'purple.5' + backgroundColor: purple[5] }, issueOpened: { backgroundColor: '#159739' // custom green }, pullOpened: { - backgroundColor: '#2cbe4e' // This was generated by a sass function in Primer, so using a hex here + backgroundColor: '#159739' // custom green }, draft: { - backgroundColor: 'gray.5' + backgroundColor: gray[5] } } } From 3c73e9632a7cadfde28836abd2add0fb92d45e2e Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 6 May 2020 17:17:17 -0700 Subject: [PATCH 133/154] Update src/StateLabel.js Co-authored-by: Emily --- src/StateLabel.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/StateLabel.js b/src/StateLabel.js index 8cff9ecd0a1..e8669461127 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -21,19 +21,11 @@ const octiconMap = { const colorVariants = variant({ prop: 'status', scale: 'stateLabels.status', - // https://styled-system.com/variants/#migrating-from-legacy-api - variants: { - ...theme.stateLabels.status - } }) const sizeVariants = variant({ prop: 'variant', - scale: 'stateLabels.sizes', - // https://styled-system.com/variants/#migrating-from-legacy-api - variants: { - ...theme.stateLabels.sizes - } + scale: 'stateLabels.sizes' }) const StateLabelBase = styled.span` From e96bf9b8c933f86d070c0fdb8e80bd69d2eced9c Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 6 May 2020 17:20:43 -0700 Subject: [PATCH 134/154] Update snapshots from suggested changes --- .../__snapshots__/StateLabel.js.snap | 37 ++++--------------- 1 file changed, 8 insertions(+), 29 deletions(-) diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.js.snap index 54c617cc470..4ea9f62575e 100644 --- a/src/__tests__/__snapshots__/StateLabel.js.snap +++ b/src/__tests__/__snapshots__/StateLabel.js.snap @@ -20,10 +20,7 @@ exports[`StateLabel renders children 1`] = ` text-align: center; border-radius: 100px; background-color: #159739; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; + padding: 8px 12px; font-size: 14px; } @@ -75,10 +72,7 @@ exports[`StateLabel renders consistently 1`] = ` text-align: center; border-radius: 100px; background-color: #159739; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; + padding: 8px 12px; font-size: 14px; } @@ -130,10 +124,7 @@ exports[`StateLabel respects the status prop 1`] = ` text-align: center; border-radius: 100px; background-color: #159739; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; + padding: 8px 12px; font-size: 14px; } @@ -183,11 +174,8 @@ exports[`StateLabel respects the status prop 2`] = ` color: #fff; text-align: center; border-radius: 100px; - background-color: #cb2431; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; + background-color: #d73a49; + padding: 8px 12px; font-size: 14px; } @@ -238,10 +226,7 @@ exports[`StateLabel respects the status prop 3`] = ` text-align: center; border-radius: 100px; background-color: #6f42c1; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; + padding: 8px 12px; font-size: 14px; } @@ -292,10 +277,7 @@ exports[`StateLabel respects the variant prop 1`] = ` text-align: center; border-radius: 100px; background-color: #159739; - padding-top: 4px; - padding-bottom: 4px; - padding-left: 8px; - padding-right: 8px; + padding: 4px 8px; font-size: 12px; } @@ -346,10 +328,7 @@ exports[`StateLabel respects the variant prop 2`] = ` text-align: center; border-radius: 100px; background-color: #159739; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; + padding: 8px 12px; font-size: 14px; } From cdd348b8206d4ca28337556da0eed2c9cc09ceed Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 6 May 2020 17:24:56 -0700 Subject: [PATCH 135/154] :shirt: Remove some lint --- src/StateLabel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/StateLabel.js b/src/StateLabel.js index e8669461127..c756390ee29 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -20,7 +20,7 @@ const octiconMap = { const colorVariants = variant({ prop: 'status', - scale: 'stateLabels.status', + scale: 'stateLabels.status' }) const sizeVariants = variant({ From 2692a87dab97a5ef843e042acba7e0216a6ee19a Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 09:44:55 -0700 Subject: [PATCH 136/154] Don't transpile to CJS in dev --- babel.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/babel.config.js b/babel.config.js index 8085b12f677..0c600066838 100644 --- a/babel.config.js +++ b/babel.config.js @@ -24,7 +24,7 @@ function makePresets(moduleValue) { module.exports = { env: { development: { - presets: makePresets('commonjs'), + presets: makePresets(false), plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('development')] }, production: { From 999f12afcb105169f1df3dde713c2278b372cfa1 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 09:55:24 -0700 Subject: [PATCH 137/154] Transpile to CJS, but use dist/browser.esm for module field --- babel.config.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/babel.config.js b/babel.config.js index 0c600066838..8085b12f677 100644 --- a/babel.config.js +++ b/babel.config.js @@ -24,7 +24,7 @@ function makePresets(moduleValue) { module.exports = { env: { development: { - presets: makePresets(false), + presets: makePresets('commonjs'), plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('development')] }, production: { diff --git a/package.json b/package.json index 98df90facd9..d401f6f17cc 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "19.0.0", "description": "Primer react components", "main": "lib/index.js", - "module": "lib/index.js", + "module": "dist/browser.esm.js", "typings": "index.d.ts", "scripts": { "start": "cd docs && yarn run develop", From 2f1d9d377db89576e05d8d3a468b0c613527ba14 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 10:03:52 -0700 Subject: [PATCH 138/154] Fixup SelectMenuModal propTypes --- src/SelectMenu/SelectMenuModal.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.js index c351876d230..1767e6bf9a0 100644 --- a/src/SelectMenu/SelectMenuModal.js +++ b/src/SelectMenu/SelectMenuModal.js @@ -95,16 +95,13 @@ const SelectMenuModal = ({children, theme, ...rest}) => { ) } -SelectMenuModal.propTypes = { - align: PropTypes.oneOf(['left', 'right']), - theme: PropTypes.object -} - SelectMenuModal.defaultProps = { align: 'left', theme } SelectMenuModal.propTypes = { + align: PropTypes.oneOf(['left', 'right']), + theme: PropTypes.object, ...COMMON.propTypes, ...sx.propTypes } From f9696811c470adb51599401846441c9d5888c2ae Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 10:37:43 -0700 Subject: [PATCH 139/154] Create dev and prod bundles --- babel.config.js | 4 ++-- package.json | 9 +++++---- rollup.config.js | 27 ++++++++++++++++++--------- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/babel.config.js b/babel.config.js index 8085b12f677..75825ed62f9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -24,12 +24,12 @@ function makePresets(moduleValue) { module.exports = { env: { development: { - presets: makePresets('commonjs'), + presets: makePresets(false), plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('development')] }, production: { presets: makePresets(false), - plugins: [...sharedPlugins, replacementPlugin('production')] + plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('production')] }, test: { presets: makePresets('commonjs'), diff --git a/package.json b/package.json index d401f6f17cc..fc64aaf2bb2 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,14 @@ "version": "19.0.0", "description": "Primer react components", "main": "lib/index.js", - "module": "dist/browser.esm.js", + "module": "dist/browser.esm.dev.js", "typings": "index.d.ts", "scripts": { "start": "cd docs && yarn run develop", - "predist": "rm -rf dist", - "dist": "yarn dist:rollup && yarn dist:transpile", - "dist:rollup": "cross-env NODE_ENV=production rollup -c", + "predist": "rm -rf dist lib", + "dist": "yarn dist:rollup:dev && yarn dist:rollup:prod && yarn dist:transpile", + "dist:rollup:dev": "cross-env NODE_ENV=development rollup -c", + "dist:rollup:prod": "cross-env NODE_ENV=production rollup -c", "dist:transpile": "rm -rf lib && babel src --out-dir lib", "prepublishOnly": "yarn run dist", "lint": "eslint src docs/components", diff --git a/rollup.config.js b/rollup.config.js index e262bd16fd9..f5dba25d800 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -12,21 +12,30 @@ const namedExports = { } const formats = ['esm', 'umd'] // 'cjs' ? -const plugins = [ - babel({exclude: 'node_modules/**'}), - resolve(), - commonjs({namedExports}), - terser(), - visualizer({sourcemap: true}) -] +function plugins({minify = false}) { + const allPlugins = [ + babel({exclude: 'node_modules/**', runtimeHelpers: true}), + resolve(), + commonjs({namedExports}), + visualizer({sourcemap: true}) + ] + + if (minify) { + allPlugins.push(terser()) + } + + return allPlugins +} + +const prod = process.env.NODE_ENV === 'production' export default [ { input: 'src/index.js', - plugins, + plugins: plugins({minify: prod}), external: ['styled-components', 'react', 'react-dom'], output: formats.map(format => ({ - file: `dist/browser.${format}.js`, + file: `dist/browser.${format}.${prod ? 'min' : 'dev'}.js`, format, sourcemap: true, name: 'primer', From cef96b0c7fef9b73e4d881273b844bc2e6992861 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 10:53:31 -0700 Subject: [PATCH 140/154] Fixup bundlecheck keys --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fc64aaf2bb2..d4fcbe7d263 100644 --- a/package.json +++ b/package.json @@ -106,11 +106,11 @@ "build": "yarn && yarn dist:rollup", "files": [ { - "path": "dist/browser.esm.js", + "path": "dist/browser.esm.min.js", "name": "ESM Build" }, { - "path": "dist/browser.umd.js", + "path": "dist/browser.umd.min.js", "name": "UMD Build" } ] From 632292e68ba0e323c6d793141bb8b34329687677 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 11:12:21 -0700 Subject: [PATCH 141/154] *ACTUALLY* fix bundlesize keys --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d4fcbe7d263..3d3239cbdec 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "styled-components": "4.x || 5.x" }, "actionBundlesize": { - "build": "yarn && yarn dist:rollup", + "build": "yarn && yarn dist:rollup:prod", "files": [ { "path": "dist/browser.esm.min.js", From a224c9524ce5c3884ab3fb11829de51f939efcb6 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 11:24:54 -0700 Subject: [PATCH 142/154] Update docs --- docs/content/SelectMenu.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index 302019fcf8b..f315a4d20e5 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -86,7 +86,10 @@ Used to wrap the content in a `SelectMenu`. ``` -### Right-aligned Example +### Right-aligned modal + +Use the `align='right'` prop to align the modal to the right. Note that this only aligns the modal contents, and not the SelectMenu itself. + ```jsx live From 67c6200c4d9eeb02a0a322f720e6ff3212a0cdb1 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 11:30:17 -0700 Subject: [PATCH 143/154] One more doc tweak --- docs/content/SelectMenu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index f315a4d20e5..f712c390ce0 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -88,7 +88,7 @@ Used to wrap the content in a `SelectMenu`. ### Right-aligned modal -Use the `align='right'` prop to align the modal to the right. Note that this only aligns the modal contents, and not the SelectMenu itself. +Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. ```jsx live From 9a6b35cf573abdaf6bfdce6c497353d42b012079 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 11:46:23 -0700 Subject: [PATCH 144/154] Update docs for bundle usage --- docs/content/getting-started.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 704cdf01a9e..22cd102cea8 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -27,7 +27,9 @@ import Box from '@primer/components/lib/Box' import Flex from '@primer/components/lib/Flex' ``` -Importing components individually can reduce bundle sizes if you don't have tree-shaking set up in your app. +Note that the files in the `lib` folder are CommonJS-style modules; if you're using ECMAScript modules (ESM) and a compatible module bundler, importing files from `lib` provides no benefit, as unused modules from the ESM build will be removed via tree-shaking. Primer Components has an ESM build specified in its `package.json`, so when using ESM you should always import components from the main entry point (as in the first example, above). + +If you're *not* using ESM, importing components individually from the `lib` folder may drastically decrease your final bundle size, since your module bundler will not have to include the entirety of Primer Components in your bundle. ### Peer dependencies From 98c867078bb7641e855516e9102221834a8432e8 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 13:44:36 -0700 Subject: [PATCH 145/154] Transpile separate CJS and ESM libs --- .gitignore | 1 + babel.config.js | 8 ++++---- package.json | 22 ++++++++++++---------- rollup.config.js | 27 +++++++++------------------ 4 files changed, 26 insertions(+), 32 deletions(-) diff --git a/.gitignore b/.gitignore index c5e5291b99b..5d4a9095213 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,6 @@ node_modules coverage/ dist/ lib/ +lib-esm/ public/ stats.html diff --git a/babel.config.js b/babel.config.js index 75825ed62f9..0643f28d328 100644 --- a/babel.config.js +++ b/babel.config.js @@ -12,7 +12,7 @@ const sharedPlugins = [ '@babel/plugin-proposal-object-rest-spread' ] -const devPlugins = [['@babel/plugin-transform-runtime', {version: '7.9.2', helpers: true}]] +const runtimePlugins = [['@babel/plugin-transform-runtime', {version: '7.9.2', helpers: true}]] function makePresets(moduleValue) { return [ @@ -24,12 +24,12 @@ function makePresets(moduleValue) { module.exports = { env: { development: { - presets: makePresets(false), - plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('development')] + presets: makePresets(process.env.BABEL_MODULE || false), + plugins: [...sharedPlugins, ...runtimePlugins, replacementPlugin('development')] }, production: { presets: makePresets(false), - plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('production')] + plugins: [...sharedPlugins, ...runtimePlugins, replacementPlugin('production')] }, test: { presets: makePresets('commonjs'), diff --git a/package.json b/package.json index 3d3239cbdec..c2b4ab6dbb8 100644 --- a/package.json +++ b/package.json @@ -3,15 +3,15 @@ "version": "19.0.0", "description": "Primer react components", "main": "lib/index.js", - "module": "dist/browser.esm.dev.js", + "module": "lib-esm/index.js", "typings": "index.d.ts", "scripts": { "start": "cd docs && yarn run develop", - "predist": "rm -rf dist lib", - "dist": "yarn dist:rollup:dev && yarn dist:rollup:prod && yarn dist:transpile", - "dist:rollup:dev": "cross-env NODE_ENV=development rollup -c", - "dist:rollup:prod": "cross-env NODE_ENV=production rollup -c", - "dist:transpile": "rm -rf lib && babel src --out-dir lib", + "predist": "rm -rf dist", + "dist": "yarn dist:rollup && yarn dist:transpile:cjs && yarn dist:transpile:esm", + "dist:rollup": "cross-env NODE_ENV=production rollup -c", + "dist:transpile:cjs": "rm -rf lib && cross-env BABEL_MODULE=commonjs babel src --out-dir lib", + "dist:transpile:esm": "rm -rf lib-esm && babel src --out-dir lib-esm", "prepublishOnly": "yarn run dist", "lint": "eslint src docs/components", "test": "jest -- src", @@ -32,8 +32,10 @@ "codemods", "dist", "lib", + "lib-esm", "index.d.ts", - "!lib/__tests__" + "!lib/__tests__", + "!lib-esm/__tests__" ], "author": "GitHub, Inc.", "license": "MIT", @@ -103,14 +105,14 @@ "styled-components": "4.x || 5.x" }, "actionBundlesize": { - "build": "yarn && yarn dist:rollup:prod", + "build": "yarn && yarn dist:rollup", "files": [ { - "path": "dist/browser.esm.min.js", + "path": "dist/browser.esm.js", "name": "ESM Build" }, { - "path": "dist/browser.umd.min.js", + "path": "dist/browser.umd.js", "name": "UMD Build" } ] diff --git a/rollup.config.js b/rollup.config.js index f5dba25d800..ba1d3c88874 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -12,30 +12,21 @@ const namedExports = { } const formats = ['esm', 'umd'] // 'cjs' ? -function plugins({minify = false}) { - const allPlugins = [ - babel({exclude: 'node_modules/**', runtimeHelpers: true}), - resolve(), - commonjs({namedExports}), - visualizer({sourcemap: true}) - ] - - if (minify) { - allPlugins.push(terser()) - } - - return allPlugins -} - -const prod = process.env.NODE_ENV === 'production' +const plugins = [ + babel({exclude: 'node_modules/**', runtimeHelpers: true}), + resolve(), + commonjs({namedExports}), + terser(), + visualizer({sourcemap: true}) +] export default [ { input: 'src/index.js', - plugins: plugins({minify: prod}), external: ['styled-components', 'react', 'react-dom'], + plugins, output: formats.map(format => ({ - file: `dist/browser.${format}.${prod ? 'min' : 'dev'}.js`, + file: `dist/browser.${format}.js`, format, sourcemap: true, name: 'primer', From a9b8031f550cd1ce1c91f510bd1f871cde2e554d Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 14:00:44 -0700 Subject: [PATCH 146/154] Some more docs changes --- docs/content/getting-started.md | 11 ++++++++++- rollup.config.js | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 22cd102cea8..48d8a35c374 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -17,17 +17,26 @@ yarn add @primer/components react react-dom styled-components You can now import Primer Components from the main package module: ```javascript +// using import syntax import {Box, Flex} from '@primer/components' + +// using require syntax +const {Box, Flex} = require('@primer/components') ``` Alternatively, you can import individual components from the `lib` subfolder: ```javascript +// using import syntax import Box from '@primer/components/lib/Box' import Flex from '@primer/components/lib/Flex' + +// using require syntax +const Box = require('@primer/components/lib/Box') +const Flex = require('@primer/components/lib/Flex') ``` -Note that the files in the `lib` folder are CommonJS-style modules; if you're using ECMAScript modules (ESM) and a compatible module bundler, importing files from `lib` provides no benefit, as unused modules from the ESM build will be removed via tree-shaking. Primer Components has an ESM build specified in its `package.json`, so when using ESM you should always import components from the main entry point (as in the first example, above). +Note that the files in the `lib` folder are CommonJS-style modules; if you're using ECMAScript modules (ESM) and a compatible module bundler, importing files individually from `lib` provides no benefit, as unused modules from the ESM build will be removed via tree-shaking. Primer Components has an ESM build specified in its `package.json`, so when using ESM you should always import components from the main entry point (as in the first example, above). If you're *not* using ESM, importing components individually from the `lib` folder may drastically decrease your final bundle size, since your module bundler will not have to include the entirety of Primer Components in your bundle. diff --git a/rollup.config.js b/rollup.config.js index ba1d3c88874..4c6d5028bf6 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -11,7 +11,7 @@ const namedExports = { 'react-is': ['isValidElementType'] } -const formats = ['esm', 'umd'] // 'cjs' ? +const formats = ['esm', 'umd'] const plugins = [ babel({exclude: 'node_modules/**', runtimeHelpers: true}), resolve(), From b435b3d3365b41711d3a67d61d9f938bea6c14e7 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 14:20:09 -0700 Subject: [PATCH 147/154] Bump sha From 17f08f5d503a36bb1390b3a72a41a1cf6d2b713a Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 7 May 2020 15:49:27 -0700 Subject: [PATCH 148/154] make as prop optional --- index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 9a163f33134..a5c55502555 100644 --- a/index.d.ts +++ b/index.d.ts @@ -297,10 +297,10 @@ declare module '@primer/components' { selected?: boolean; } interface SelectMenuItemAsButtonProps extends SelectMenuItemCommonProps, Omit, 'color'> { - as: "button" + as?: "button" } interface SelectMenuItemAsAnchorProps extends SelectMenuItemCommonProps, Omit, 'color'> { - as: "a" + as?: "a" } export type SelectMenuItemProps = SelectMenuItemAsButtonProps | SelectMenuItemAsAnchorProps; From 1393faadaf42c6cb909e5015b24807063aaaa815 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 7 May 2020 16:04:38 -0700 Subject: [PATCH 149/154] Export from transpiled lib/ instead of src/ --- index.d.ts | 94 +++++++++++++++++++++++++++--------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/index.d.ts b/index.d.ts index 9a163f33134..892f5ccea65 100644 --- a/index.d.ts +++ b/index.d.ts @@ -509,216 +509,216 @@ declare module '@primer/components' { export const ProgressBar: React.FunctionComponent } -declare module '@primer/components/src/Box' { +declare module '@primer/components/lib/Box' { import {Box} from '@primer/components' export default Box } -declare module '@primer/components/src/Text' { +declare module '@primer/components/lib/Text' { import {Text} from '@primer/components' export default Text } -declare module '@primer/components/src/Heading' { +declare module '@primer/components/lib/Heading' { import {Heading} from '@primer/components' export default Heading } -declare module '@primer/components/src/ButtonDanger' { +declare module '@primer/components/lib/ButtonDanger' { import {ButtonDanger} from '@primer/components' export default ButtonDanger } -declare module '@primer/components/src/ButtonPrimary' { +declare module '@primer/components/lib/ButtonPrimary' { import {ButtonPrimary} from '@primer/components' export default ButtonPrimary } -declare module '@primer/components/src/ButtonOutline' { +declare module '@primer/components/lib/ButtonOutline' { import {ButtonOutline} from '@primer/components' export default ButtonOutline } -declare module '@primer/components/src/ButtonTableList' { +declare module '@primer/components/lib/ButtonTableList' { import {ButtonTableList} from '@primer/components' export default ButtonTableList } -declare module '@primer/components/src/ButtonGroup' { +declare module '@primer/components/lib/ButtonGroup' { import {ButtonGroup} from '@primer/components' export default ButtonGroup } -declare module '@primer/components/src/Button' { +declare module '@primer/components/lib/Button' { import {Button} from '@primer/components' export default Button } -declare module '@primer/components/src/Flex' { +declare module '@primer/components/lib/Flex' { import {Flex} from '@primer/components' export default Flex } -declare module '@primer/components/src/Avatar' { +declare module '@primer/components/lib/Avatar' { import {Avatar} from '@primer/components' export default Avatar } -declare module '@primer/components/src/Details' { +declare module '@primer/components/lib/Details' { import {Details} from '@primer/components' export default Details } -declare module '@primer/components/src/BaseStyles' { +declare module '@primer/components/lib/BaseStyles' { import {BaseStyles} from '@primer/components' export default BaseStyles } -declare module '@primer/components/src/BorderBox' { +declare module '@primer/components/lib/BorderBox' { import {BorderBox} from '@primer/components' export default BorderBox } -declare module '@primer/components/src/BranchName' { +declare module '@primer/components/lib/BranchName' { import {BranchName} from '@primer/components' export default BranchName } -declare module '@primer/components/src/CircleBadge' { +declare module '@primer/components/lib/CircleBadge' { import {CircleBadge} from '@primer/components' export default CircleBadge } -declare module '@primer/components/src/CircleOcticon' { +declare module '@primer/components/lib/CircleOcticon' { import {CircleOcticon} from '@primer/components' export default CircleOcticon } -declare module '@primer/components/src/StyledOcticon' { +declare module '@primer/components/lib/StyledOcticon' { import {StyledOcticon} from '@primer/components' export default StyledOcticon } -declare module '@primer/components/src/Dropdown' { +declare module '@primer/components/lib/Dropdown' { import {Dropdown} from '@primer/components' export default Dropdown } -declare module '@primer/components/src/FilterList' { +declare module '@primer/components/lib/FilterList' { import {FilterList} from '@primer/components' export default FilterList } -declare module '@primer/components/src/Flash' { +declare module '@primer/components/lib/Flash' { import {Flash} from '@primer/components' export default Flash } -declare module '@primer/components/src/Grid' { +declare module '@primer/components/lib/Grid' { import {Grid} from '@primer/components' export default Grid } -declare module '@primer/components/src/CounterLabel' { +declare module '@primer/components/lib/CounterLabel' { import {CounterLabel} from '@primer/components' export default CounterLabel } -declare module '@primer/components/src/Label' { +declare module '@primer/components/lib/Label' { import {Label} from '@primer/components' export default Label } -declare module '@primer/components/src/Link' { +declare module '@primer/components/lib/Link' { import {Link} from '@primer/components' export default Link } -declare module '@primer/components/src/Pagination' { +declare module '@primer/components/lib/Pagination' { import {Pagination} from '@primer/components' export default Pagination } -declare module '@primer/components/src/PointerBox' { +declare module '@primer/components/lib/PointerBox' { import {PointerBox} from '@primer/components' export default PointerBox } -declare module '@primer/components/src/Popover' { +declare module '@primer/components/lib/Popover' { import {Popover} from '@primer/components' export default Popover } -declare module '@primer/components/src/Relative' { +declare module '@primer/components/lib/Relative' { import {Relative} from '@primer/components' export default Relative } -declare module '@primer/components/src/Absolute' { +declare module '@primer/components/lib/Absolute' { import {Absolute} from '@primer/components' export default Absolute } -declare module '@primer/components/src/Sticky' { +declare module '@primer/components/lib/Sticky' { import {Sticky} from '@primer/components' export default Sticky } -declare module '@primer/components/src/Fixed' { +declare module '@primer/components/lib/Fixed' { import {Fixed} from '@primer/components' export default Fixed } -declare module '@primer/components/src/SelectMenu' { +declare module '@primer/components/lib/SelectMenu' { import {SelectMenu} from '@primer/components' export default SelectMenu } -declare module '@primer/components/src/StateLabel' { +declare module '@primer/components/lib/StateLabel' { import {StateLabel} from '@primer/components' export default StateLabel } -declare module '@primer/components/src/TabNav' { +declare module '@primer/components/lib/TabNav' { import {TabNav} from '@primer/components' export default TabNav } -declare module '@primer/components/src/TextInput' { +declare module '@primer/components/lib/TextInput' { import {TextInput} from '@primer/components' export default TextInput } -declare module '@primer/components/src/Timeline' { +declare module '@primer/components/lib/Timeline' { import {Timeline} from '@primer/components' export default Timeline } -declare module '@primer/components/src/Tooltip' { +declare module '@primer/components/lib/Tooltip' { import {Tooltip} from '@primer/components' export default Tooltip } -declare module '@primer/components/src/UnderlineNav' { +declare module '@primer/components/lib/UnderlineNav' { import {UnderlineNav} from '@primer/components' export default UnderlineNav } -declare module '@primer/components/src/SideNav' { +declare module '@primer/components/lib/SideNav' { import {SideNav} from '@primer/components' export default SideNav } -declare module '@primer/components/src/SubNav' { +declare module '@primer/components/lib/SubNav' { import {SubNav} from '@primer/components' export default SubNav } -declare module '@primer/components/src/theme' { +declare module '@primer/components/lib/theme' { import {theme} from '@primer/components' export default theme } -declare module '@primer/components/src/Dialog' { +declare module '@primer/components/lib/Dialog' { import {Dialog} from '@primer/components' export default Dialog } -declare module '@primer/components/src/LabelGroup' { +declare module '@primer/components/lib/LabelGroup' { import {LabelGroup} from '@primer/components' export default LabelGroup } -declare module '@primer/components/src/ProgressBar' { +declare module '@primer/components/lib/ProgressBar' { import {ProgressBar} from '@primer/components' export default ProgressBar } -declare module '@primer/components/src/AvatarStack' { +declare module '@primer/components/lib/AvatarStack' { import {AvatarStack} from '@primer/components' export default AvatarStack } -declare module '@primer/components/src/Breadcrumbs' { +declare module '@primer/components/lib/Breadcrumbs' { import {Breadcrumb} from '@primer/components' export default Breadcrumb } From 06a6607c3ac65da333956fdd8eec1c0ad16c5adf Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 7 May 2020 16:08:47 -0700 Subject: [PATCH 150/154] give Position components flex props by extending Box --- docs/content/SelectMenu.md | 6 +++--- src/Position.js | 16 +++++++--------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index f712c390ce0..8f0abe3db7f 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -88,10 +88,10 @@ Used to wrap the content in a `SelectMenu`. ### Right-aligned modal -Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. +Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly. ```jsx live - + @@ -104,7 +104,7 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl - + ``` ### System Props diff --git a/src/Position.js b/src/Position.js index 3a6ce440b21..0299e15f1ee 100644 --- a/src/Position.js +++ b/src/Position.js @@ -1,14 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {COMMON, LAYOUT, POSITION} from './constants' +import {POSITION,} from './constants' +import Box from './Box' import theme from './theme' import sx from './sx' -const Position = styled.div` - ${LAYOUT} - ${COMMON} - ${POSITION} +const Position = styled(Box)` + ${POSITION}; ${sx}; ` @@ -17,11 +16,10 @@ Position.defaultProps = { } Position.propTypes = { - ...COMMON.propTypes, - ...LAYOUT.propTypes, + ...Box.propTypes, ...POSITION.propTypes, - ...sx.propTypes, - theme: PropTypes.object + theme: PropTypes.object, + ...sx.propTypes } function withPosition(position) { From 206e4502e1a2d011e969ec28cfa4aa6feab76e31 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 7 May 2020 16:40:44 -0700 Subject: [PATCH 151/154] update types --- index.d.ts | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/index.d.ts b/index.d.ts index a5c55502555..48f102fbebe 100644 --- a/index.d.ts +++ b/index.d.ts @@ -27,14 +27,7 @@ declare module '@primer/components' { extends StyledSystem.BordersProps, StyledSystem.BoxShadowProps {} - interface PositionProps - extends BaseProps, - StyledSystem.PositionProps, - StyledSystem.ZIndexProps, - StyledSystem.TopProps, - StyledSystem.RightProps, - StyledSystem.BottomProps, - StyledSystem.LeftProps {} + interface PositionProps extends StyledSystem.PositionProps {} export interface BoxProps extends BaseProps, @@ -273,10 +266,7 @@ declare module '@primer/components' { } export interface PositionComponentProps - extends PositionProps, - CommonProps, - LayoutProps, - Omit, 'color'> {} + extends PositionProps, BoxProps {} export const Relative: React.FunctionComponent export const Absolute: React.FunctionComponent From 9d9c12c91198722fccbe9fce372427e2d38dd066 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 7 May 2020 16:43:25 -0700 Subject: [PATCH 152/154] typo --- src/Position.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Position.js b/src/Position.js index 0299e15f1ee..a4fbdd470c5 100644 --- a/src/Position.js +++ b/src/Position.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {POSITION,} from './constants' +import {POSITION} from './constants' import Box from './Box' import theme from './theme' import sx from './sx' From a82214bd9733114c837fcb751eaa7b9a781791dc Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Fri, 8 May 2020 10:14:29 -0700 Subject: [PATCH 153/154] :memo: Wordsings --- docs/content/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 48d8a35c374..7e5a5fabd22 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -122,7 +122,7 @@ If you're rendering React components both server- and client-side, we suggest fo ## TypeScript -Primer Components includes TypeScript support and ships with its own typings. You will need still need to to install `@types/styled-components` and `@types/react` if you import either of those two peer dependencies yourself. +Primer Components includes TypeScript support and ships with its own typings. You will need still need to to install type typings for the peer dependencies if you import those in your own application code. Once installed, you can import components and their prop type interfaces from the `@primer/components` package: From 7b34d3c96d30ca9d1d386325917169c9ac1b641c Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 8 May 2020 10:28:14 -0700 Subject: [PATCH 154/154] update docs --- docs/content/Position.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/Position.md b/docs/content/Position.md index 94062cad059..23e5af9739b 100644 --- a/docs/content/Position.md +++ b/docs/content/Position.md @@ -41,7 +41,7 @@ The Position component is a wrapper component that gives the containing componen ## System props -Position components get `POSITION`, `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. +Position components get `POSITION`, `LAYOUT`, `FLEX, and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props