From 07c09446bc644d7cc8c81a2a272552af6c67abaa Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 13 Apr 2020 15:15:05 -0700 Subject: [PATCH 01/24] 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 02/24] 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 03/24] 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 04/24] 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 05/24] 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 06/24] 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 07/24] 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 08/24] :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 09/24] 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 10/24] :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 bf285df62eaa35873e755857701ea0d4fdd5c787 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 21 Apr 2020 09:15:14 -0700 Subject: [PATCH 11/24] 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 12/24] 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