From 863e5b8c01b206a4b217e05e93d80770a8ea3372 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 13 Aug 2019 14:55:36 +0300 Subject: [PATCH 01/36] Order button examples to separate groups --- src/core/Button/Button.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/core/Button/Button.md b/src/core/Button/Button.md index 74b720e72..7f0b2c953 100644 --- a/src/core/Button/Button.md +++ b/src/core/Button/Button.md @@ -13,7 +13,13 @@ import { Button } from 'suomifi-ui-components'; +; +``` + +```js +import { Button } from 'suomifi-ui-components'; +<> @@ -22,7 +28,13 @@ import { Button } from 'suomifi-ui-components'; Login iconRight="login" aria-labelledby="button-label" +; +``` + +```js +import { Button } from 'suomifi-ui-components'; +<>
Button.negative @@ -30,7 +42,13 @@ import { Button } from 'suomifi-ui-components'; Button.negative disabled fullWidth icon="login"
+; +``` + +```js +import { Button } from 'suomifi-ui-components'; +<> Button.secondary @@ -52,7 +70,13 @@ import { Button } from 'suomifi-ui-components'; Button.secondaryNoborder disabled icon="login" +; +``` + +```js +import { Button } from 'suomifi-ui-components'; +<> Button.tertiary From 043173051d2de2badf68e67e1a6c660b94a2e373 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Wed, 14 Aug 2019 12:34:03 +0300 Subject: [PATCH 02/36] Fix background color of Button.negative disabled to be based on basic Button.negative --- src/core/Button/Button.baseStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx index 446731605..80246e379 100644 --- a/src/core/Button/Button.baseStyles.tsx +++ b/src/core/Button/Button.baseStyles.tsx @@ -28,7 +28,7 @@ const negativeStyles = (theme: ThemeProp) => css` &[disabled], &:disabled { opacity: 0.5; - background: none; + background-color: ${theme.colors.highlightBase}; } } `; From d04fdc126fc8a7c63b099719dd13e83bb455d609 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Wed, 14 Aug 2019 12:42:09 +0300 Subject: [PATCH 03/36] Update snaphots to fix Button.negative disabled background color --- src/core/Button/__snapshots__/Button.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap index 98b513619..5e4020262 100644 --- a/src/core/Button/__snapshots__/Button.test.tsx.snap +++ b/src/core/Button/__snapshots__/Button.test.tsx.snap @@ -133,7 +133,7 @@ exports[`calling render with the same component on the same container does not r .emotion-0.fi-button--negative[disabled], .emotion-0.fi-button--negative:disabled { opacity: 0.5; - background: none; + background-color: hsl(212,63%,45%); } .emotion-0.fi-button--secondary { From 6fc7ee2ae57927b6e0f06fc7abc7d3a69433aefe Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Wed, 14 Aug 2019 13:40:34 +0300 Subject: [PATCH 04/36] Install styled-components --- package.json | 2 + tslint.json | 9 +++- yarn.lock | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 132 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4700414f1..d765efd2e 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@types/jest-axe": "2.2.3", "@types/react": "16.8.15", "@types/react-dom": "16.0.9", + "@types/styled-components": "4.1.18", "@types/uuid": "3.4.5", "awesome-typescript-loader": "5.2.1", "clipboard-copy": "3.0.0", @@ -113,6 +114,7 @@ "normalize.cssinjs": "1.0.5", "polished": "3.4.0", "react-svg": "7.2.2", + "styled-components": "4.3.2", "suomifi-icons": "0.0.7", "uuid": "3.3.2" }, diff --git a/tslint.json b/tslint.json index 01736ce5c..6d9c1efd1 100644 --- a/tslint.json +++ b/tslint.json @@ -11,7 +11,14 @@ "arrow-parens": false, "curly": false, "interface-name": [true, "never-prefix"], - "import-name": [true, { "react": "React", "reactSvg": "ReactSVG" }], + "import-name": [ + true, + { + "react": "React", + "reactSvg": "ReactSVG", + "styledComponents": "styled" + } + ], "jsx-alignment": true, "max-classes-per-file": [true, 2], "max-line-length": [ diff --git a/yarn.lock b/yarn.lock index a0a242e87..a744e6ebc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -98,6 +98,13 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/helper-annotate-as-pure@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" + integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q== + dependencies: + "@babel/types" "^7.0.0" + "@babel/helper-function-name@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53" @@ -348,11 +355,23 @@ dependencies: "@emotion/memoize" "0.7.1" +"@emotion/is-prop-valid@^0.8.1": + version "0.8.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc" + integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg== + dependencies: + "@emotion/memoize" "0.7.2" + "@emotion/memoize@0.7.1": version "0.7.1" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== +"@emotion/memoize@0.7.2": + version "0.7.2" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30" + integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w== + "@emotion/serialize@0.11.0": version "0.11.0" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.0.tgz#9332b483a112af7b515d20470a7bf1aa5f8dcf6c" @@ -397,6 +416,11 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f" integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg== +"@emotion/unitless@^0.7.0": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" + integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== + "@emotion/utils@0.11.1": version "0.11.1" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628" @@ -845,6 +869,14 @@ "@types/node" "*" "@types/react" "*" +"@types/react-native@*": + version "0.60.4" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.4.tgz#fbb04caca44c4b25a13273dbaa825dd6360376d2" + integrity sha512-XeS8nhATawGFf18bgpH2sAduZJg88/kRULJ6xCDlCsco8u7rR3hLz2JxgBMyIYfov4XTt7Ue4Nqi+86dVJvhAg== + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + "@types/react@*", "@types/react@16.7.20": version "16.7.20" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.20.tgz#13ae752c012710d0fa800985ca809814b51d3b58" @@ -866,6 +898,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/styled-components@4.1.18": + version "4.1.18" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.18.tgz#348804fe5a399ae0a46550afaf030085815ad931" + integrity sha512-VrHkgvjbxQXOw0xWSUckusUUZ4y/jqN1u7kF29ngh0oE6uOrlZHleTgqeUqylQqHQIeQ8MxFb50BRHy8ju5DHg== + dependencies: + "@types/react" "*" + "@types/react-native" "*" + csstype "^2.2.0" + "@types/unist@*", "@types/unist@^2.0.0": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" @@ -1721,6 +1762,16 @@ babel-plugin-macros@^2.0.0: cosmiconfig "^5.0.5" resolve "^1.8.1" +"babel-plugin-styled-components@>= 1": + version "1.10.6" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" + integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -2194,6 +2245,11 @@ camelcase@^5.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -2914,6 +2970,11 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -2989,6 +3050,15 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" +css-to-react-native@^2.2.2: + version "2.3.1" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.1.tgz#cf0f61e0514846e2d4dc188b0886e29d8bef64a2" + integrity sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^3.3.0" + css-tree@1.0.0-alpha.28: version "1.0.0-alpha.28" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f" @@ -5668,6 +5738,11 @@ 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.2.4: + version "3.3.1" + resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe" + integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA== + is-whitespace-character@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed" @@ -6894,6 +6969,11 @@ mem@^4.0.0: mimic-fn "^1.0.0" p-is-promise "^1.1.0" +memoize-one@^5.0.0: + version "5.0.5" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e" + integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ== + memoizee@^0.4.14: version "0.4.14" resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57" @@ -6936,6 +7016,13 @@ meow@^5.0.0: trim-newlines "^2.0.0" yargs-parser "^10.0.0" +merge-anything@^2.2.4: + version "2.4.0" + resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.0.tgz#86959caf02bb8969d1ae5e1b652862bc5fe54e44" + integrity sha512-MhJcPOEcDUIbwU0LnEfx5S9s9dfQ/KPu4g2UA5T5G1LRKS0XmpDvJ9+UUfTkfhge+nA1gStE4tJAvx6lXLs+rg== + dependencies: + is-what "^3.2.4" + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -8597,7 +8684,7 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" -prop-types@^15.6.1, prop-types@^15.7.2: +prop-types@^15.5.4, prop-types@^15.6.1, 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== @@ -8924,6 +9011,11 @@ react-icons@^3.7.0: dependencies: camelcase "^5.0.0" +react-is@^16.6.0: + version "16.9.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb" + integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw== + react-is@^16.8.1: version "16.8.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb" @@ -10369,6 +10461,25 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= +styled-components@4.3.2: + version "4.3.2" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc" + integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw== + 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-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" + supports-color "^5.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -10457,6 +10568,16 @@ stylelint@10.0.1: svg-tags "^1.0.0" table "^5.2.3" +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.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" + integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== + sugarss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" From 5a763f521227369e1af831ba0b9d41d8523ba02f Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Wed, 14 Aug 2019 15:01:31 +0300 Subject: [PATCH 05/36] Update React typings --- package.json | 4 ++-- yarn.lock | 17 ++++++++--------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index d765efd2e..7609f875a 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,8 @@ "@types/classnames": "2.2.6", "@types/jest": "23.3.9", "@types/jest-axe": "2.2.3", - "@types/react": "16.8.15", - "@types/react-dom": "16.0.9", + "@types/react": "16.9.1", + "@types/react-dom": "16.8.5", "@types/styled-components": "4.1.18", "@types/uuid": "3.4.5", "awesome-typescript-loader": "5.2.1", diff --git a/yarn.lock b/yarn.lock index a744e6ebc..0cf056053 100644 --- a/yarn.lock +++ b/yarn.lock @@ -861,12 +861,11 @@ dependencies: "@types/react" "*" -"@types/react-dom@16.0.9": - version "16.0.9" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91" - integrity sha512-4Z0bW+75zeQgsEg7RaNuS1k9MKhci7oQqZXxrV5KUGIyXZHHAAL3KA4rjhdH8o6foZ5xsRMSqkoM5A3yRVPR5w== +"@types/react-dom@16.8.5": + version "16.8.5" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.5.tgz#3e3f4d99199391a7fb40aa3a155c8dd99b899cbd" + integrity sha512-idCEjROZ2cqh29+trmTmZhsBAUNQuYrF92JHKzZ5+aiFM1mlSk3bb23CK7HhYuOY75Apgap5y2jTyHzaM2AJGA== dependencies: - "@types/node" "*" "@types/react" "*" "@types/react-native@*": @@ -885,10 +884,10 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/react@16.8.15": - version "16.8.15" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.15.tgz#a76515fed5aa3e996603056f54427fec5f2a5122" - integrity sha512-dMhzw1rWK+wwJWvPp5Pk12ksSrm/z/C/+lOQbMZ7YfDQYnJ02bc0wtg4EJD9qrFhuxFrf/ywNgwTboucobJqQg== +"@types/react@16.9.1": + version "16.9.1" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.1.tgz#862c83b4c9d5cd116e42fd9a4f3694843cd2c051" + integrity sha512-jGM2x8F7m7/r+81N/BOaUKVwbC5Cdw6ExlWEUpr77XPwVeNvAppnPEnMMLMfxRDYL8FPEX8MHjwtD2NQMJ0yyQ== dependencies: "@types/prop-types" "*" csstype "^2.2.0" From 7924539b7aef25894a4094eeec7eb62ed2d21a56 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Thu, 15 Aug 2019 09:27:21 +0300 Subject: [PATCH 06/36] Replace emotion imports with styled-components imports --- .styleguidist/spacing.md | 2 +- .styleguidist/typography.md | 2 +- src/components/Icon/Icon.tsx | 2 +- src/components/Panel/Panel.tsx | 2 +- src/components/Panel/PanelExpansion.tsx | 2 +- src/components/Panel/PanelExpansionGroup.tsx | 2 +- src/components/Svg/Svg.tsx | 2 +- src/components/Visually-hidden/Visually-hidden.tsx | 2 +- src/core/Block/Block.baseStyles.ts | 2 +- src/core/Block/Block.tsx | 2 +- src/core/Breadcrumb/Breadcrumb.baseStyles.ts | 2 +- src/core/Breadcrumb/Breadcrumb.tsx | 2 +- src/core/Button/Button.baseStyles.tsx | 2 +- src/core/Button/Button.tsx | 2 +- src/core/Button/UnstyledButton.tsx | 2 +- src/core/Colors/Colors.baseStyles.tsx | 2 +- src/core/Colors/Colors.tsx | 2 +- src/core/Dropdown/Dropdown.tsx | 2 +- src/core/Form/SearchInput/SearchInput.baseStyles.tsx | 2 +- src/core/Form/SearchInput/SearchInput.tsx | 2 +- src/core/Form/TextInput/TextInput.baseStyles.tsx | 2 +- src/core/Form/TextInput/TextInput.tsx | 2 +- src/core/Form/Toggle/Toggle.baseStyles.tsx | 2 +- src/core/Form/Toggle/Toggle.tsx | 2 +- src/core/Heading/Heading.baseStyles.ts | 2 +- src/core/Heading/Heading.tsx | 2 +- src/core/Icon/Icon.baseStyles.tsx | 2 +- src/core/Icon/Icon.md | 2 +- src/core/Icon/Icon.tsx | 2 +- src/core/Link/Link.baseStyles.ts | 2 +- src/core/Link/Link.tsx | 2 +- src/core/Link/LinkExternal.tsx | 2 +- src/core/Menu/Menu.baseStyles.tsx | 2 +- src/core/Menu/Menu.tsx | 2 +- src/core/Panel/Panel.baseStyles.tsx | 2 +- src/core/Panel/Panel.tsx | 2 +- src/core/Panel/PanelExpansion.baseStyles.tsx | 2 +- src/core/Panel/PanelExpansion.tsx | 2 +- src/core/Panel/PanelExpansionGroup.baseStyles.tsx | 2 +- src/core/Panel/PanelExpansionGroup.tsx | 2 +- src/core/Paragraph/Paragraph.baseStyles.ts | 2 +- src/core/Paragraph/Paragraph.tsx | 2 +- src/core/Text/Text.baseStyles.ts | 2 +- src/core/Text/Text.tsx | 2 +- src/core/theme/reset/index.ts | 2 +- src/core/theme/reset/typography.ts | 2 +- src/reset/HtmlA/HtmlA.tsx | 7 +++---- src/reset/HtmlButton/HtmlButton.tsx | 6 +++--- src/reset/HtmlDiv/HtmlDiv.tsx | 8 +++++--- src/reset/HtmlH/HtmlH.tsx | 7 ++++--- src/reset/HtmlInput/HtmlInput.tsx | 7 +++---- src/reset/HtmlLabel/HtmlLabel.tsx | 8 +++++--- src/reset/HtmlLi/HtmlLi.tsx | 8 +++++--- src/reset/HtmlNav/HtmlNav.tsx | 8 +++++--- src/reset/HtmlOl/HtmlOl.tsx | 7 ++++--- src/reset/HtmlP/HtmlP.tsx | 7 ++++--- src/reset/HtmlSpan/HtmlSpan.tsx | 7 ++++--- src/reset/utils/index.ts | 2 +- src/utils/css/pseudo.ts | 2 +- src/utils/css/utils.ts | 2 +- 60 files changed, 94 insertions(+), 84 deletions(-) diff --git a/.styleguidist/spacing.md b/.styleguidist/spacing.md index 2d4d42455..8448380f4 100644 --- a/.styleguidist/spacing.md +++ b/.styleguidist/spacing.md @@ -1,5 +1,5 @@ ```js noeditor -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { colors } from '../src/core/theme/colors'; import { element, fonts } from '../src/core/theme/reset'; import { spacing, spacingTokens } from '../src/core/theme/spacing'; diff --git a/.styleguidist/typography.md b/.styleguidist/typography.md index 2a5eb5c92..9ed5677f1 100644 --- a/.styleguidist/typography.md +++ b/.styleguidist/typography.md @@ -1,7 +1,7 @@ Suomifi-styleguide typography ```js noeditor -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { Text } from '../src/core/Text/Text'; import { Heading } from '../src/core/Heading/Heading'; import { typography, fontFamily } from '../src/core/theme/typography'; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 5e1f18e75..644b8f4ad 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { Svg, SvgProps } from '../Svg/Svg'; import classnames from 'classnames'; diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 21734be73..b2e37e3a3 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -1,5 +1,5 @@ import React, { Component, ReactNode } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { HtmlDiv, HtmlDivProps } from '../../reset'; import classnames from 'classnames'; diff --git a/src/components/Panel/PanelExpansion.tsx b/src/components/Panel/PanelExpansion.tsx index f367891d3..344c7e0c6 100644 --- a/src/components/Panel/PanelExpansion.tsx +++ b/src/components/Panel/PanelExpansion.tsx @@ -1,5 +1,5 @@ import React, { Component, ReactNode, Fragment } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { Panel, PanelProps, baseClassName, StyledPanel } from './Panel'; import { Button, ButtonProps } from '../Button/Button'; import { allStates } from '../../utils/css/pseudo'; diff --git a/src/components/Panel/PanelExpansionGroup.tsx b/src/components/Panel/PanelExpansionGroup.tsx index a2d439703..1526c3822 100644 --- a/src/components/Panel/PanelExpansionGroup.tsx +++ b/src/components/Panel/PanelExpansionGroup.tsx @@ -1,5 +1,5 @@ import React, { Component, ReactElement } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { HtmlDiv, HtmlDivProps } from '../../reset'; import classnames from 'classnames'; import { PanelExpansionProps } from './PanelExpansion'; diff --git a/src/components/Svg/Svg.tsx b/src/components/Svg/Svg.tsx index bc167b7df..c28138629 100644 --- a/src/components/Svg/Svg.tsx +++ b/src/components/Svg/Svg.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import ReactSVG from 'react-svg'; import { ariaLabelOrHidden } from '../utils/aria'; diff --git a/src/components/Visually-hidden/Visually-hidden.tsx b/src/components/Visually-hidden/Visually-hidden.tsx index 992fc1f7b..6f9d578da 100644 --- a/src/components/Visually-hidden/Visually-hidden.tsx +++ b/src/components/Visually-hidden/Visually-hidden.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { HtmlSpan, HtmlSpanProps } from '../../reset/HtmlSpan/HtmlSpan'; diff --git a/src/core/Block/Block.baseStyles.ts b/src/core/Block/Block.baseStyles.ts index 5c4301be6..ccd670d9b 100644 --- a/src/core/Block/Block.baseStyles.ts +++ b/src/core/Block/Block.baseStyles.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { BlockProps } from './Block'; import { element, fonts } from '../theme/reset'; diff --git a/src/core/Block/Block.tsx b/src/core/Block/Block.tsx index a84871ce1..c00146f9f 100644 --- a/src/core/Block/Block.tsx +++ b/src/core/Block/Block.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { diff --git a/src/core/Breadcrumb/Breadcrumb.baseStyles.ts b/src/core/Breadcrumb/Breadcrumb.baseStyles.ts index 1d0a3693a..8feeb6e07 100644 --- a/src/core/Breadcrumb/Breadcrumb.baseStyles.ts +++ b/src/core/Breadcrumb/Breadcrumb.baseStyles.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { BreadcrumbProps } from './Breadcrumb'; import { nav, list, listItem, fonts } from '../theme/reset'; diff --git a/src/core/Breadcrumb/Breadcrumb.tsx b/src/core/Breadcrumb/Breadcrumb.tsx index 595b41b16..9fe8e299b 100644 --- a/src/core/Breadcrumb/Breadcrumb.tsx +++ b/src/core/Breadcrumb/Breadcrumb.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { baseStyles } from './Breadcrumb.baseStyles'; diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx index 446731605..f622a95cf 100644 --- a/src/core/Button/Button.baseStyles.tsx +++ b/src/core/Button/Button.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme, ThemeProp } from '../theme'; import { ButtonProps } from './Button'; import { element, focus, button } from '../theme/reset'; diff --git a/src/core/Button/Button.tsx b/src/core/Button/Button.tsx index ffffb5b79..62a7c34ec 100644 --- a/src/core/Button/Button.tsx +++ b/src/core/Button/Button.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { ThemeComponent, ThemeProp } from '../theme'; import { withDefaultTheme } from '../theme/utils'; diff --git a/src/core/Button/UnstyledButton.tsx b/src/core/Button/UnstyledButton.tsx index 9edd14a5e..f91984630 100644 --- a/src/core/Button/UnstyledButton.tsx +++ b/src/core/Button/UnstyledButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { unStyled } from './Button.baseStyles'; import { Button, ButtonProps } from '../../components/Button/Button'; diff --git a/src/core/Colors/Colors.baseStyles.tsx b/src/core/Colors/Colors.baseStyles.tsx index b5d21c81e..77a4430dc 100644 --- a/src/core/Colors/Colors.baseStyles.tsx +++ b/src/core/Colors/Colors.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { readableColor } from 'polished'; import { suomifiTheme } from '../theme'; import { fonts } from '../theme/reset'; diff --git a/src/core/Colors/Colors.tsx b/src/core/Colors/Colors.tsx index c94eccfa1..2dcc62041 100644 --- a/src/core/Colors/Colors.tsx +++ b/src/core/Colors/Colors.tsx @@ -1,7 +1,7 @@ import React, { Component, ReactNode } from 'react'; import { withDefaultTheme } from '../theme/utils'; import { hslaToHex } from '../../utils/css/colors'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { ThemeComponent } from '../theme'; import { baseStyles, containerStyles } from './Colors.baseStyles'; import clipboardCopy from 'clipboard-copy'; diff --git a/src/core/Dropdown/Dropdown.tsx b/src/core/Dropdown/Dropdown.tsx index 754797906..62f02b415 100644 --- a/src/core/Dropdown/Dropdown.tsx +++ b/src/core/Dropdown/Dropdown.tsx @@ -1,5 +1,5 @@ import React, { Component, Fragment } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { Global } from '@emotion/core'; diff --git a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx index 6f3556b5b..bc6a2a6f6 100644 --- a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx +++ b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../../theme'; import { SearchInputProps } from './SearchInput'; import { math } from 'polished'; diff --git a/src/core/Form/SearchInput/SearchInput.tsx b/src/core/Form/SearchInput/SearchInput.tsx index e42e331bb..b826529dd 100644 --- a/src/core/Form/SearchInput/SearchInput.tsx +++ b/src/core/Form/SearchInput/SearchInput.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../../theme/utils'; import { baseStyles } from './SearchInput.baseStyles'; import { TextInput, TextInputProps } from '../TextInput/TextInput'; diff --git a/src/core/Form/TextInput/TextInput.baseStyles.tsx b/src/core/Form/TextInput/TextInput.baseStyles.tsx index 63794b345..336df5a3d 100644 --- a/src/core/Form/TextInput/TextInput.baseStyles.tsx +++ b/src/core/Form/TextInput/TextInput.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../../theme'; import { TextInputProps } from './TextInput'; import { input, inputContainer } from '../../theme/reset'; diff --git a/src/core/Form/TextInput/TextInput.tsx b/src/core/Form/TextInput/TextInput.tsx index 5f57d99e8..14cb92989 100644 --- a/src/core/Form/TextInput/TextInput.tsx +++ b/src/core/Form/TextInput/TextInput.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../../theme/utils'; import { ThemeComponent } from '../../theme'; import { baseStyles } from './TextInput.baseStyles'; diff --git a/src/core/Form/Toggle/Toggle.baseStyles.tsx b/src/core/Form/Toggle/Toggle.baseStyles.tsx index 5b723185b..2ddfd7ff7 100644 --- a/src/core/Form/Toggle/Toggle.baseStyles.tsx +++ b/src/core/Form/Toggle/Toggle.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../../theme'; import { focus } from '../../theme/utils'; import { ToggleProps } from './Toggle'; diff --git a/src/core/Form/Toggle/Toggle.tsx b/src/core/Form/Toggle/Toggle.tsx index 325b9c5c2..4bebd3f6c 100644 --- a/src/core/Form/Toggle/Toggle.tsx +++ b/src/core/Form/Toggle/Toggle.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { withDefaultTheme } from '../../theme/utils'; import { ThemeComponent } from '../../theme'; diff --git a/src/core/Heading/Heading.baseStyles.ts b/src/core/Heading/Heading.baseStyles.ts index b7b2a3c7f..eb53120d8 100644 --- a/src/core/Heading/Heading.baseStyles.ts +++ b/src/core/Heading/Heading.baseStyles.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { HeadingProps } from './Heading'; import { element, fonts } from '../theme/reset'; diff --git a/src/core/Heading/Heading.tsx b/src/core/Heading/Heading.tsx index 99bfb7549..4405c811a 100644 --- a/src/core/Heading/Heading.tsx +++ b/src/core/Heading/Heading.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent, ColorProp } from '../theme'; import { diff --git a/src/core/Icon/Icon.baseStyles.tsx b/src/core/Icon/Icon.baseStyles.tsx index f87c04b92..bf20d1fe3 100644 --- a/src/core/Icon/Icon.baseStyles.tsx +++ b/src/core/Icon/Icon.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { SuomifiIconProps } from './Icon'; export const iconBaseStyles = ({ diff --git a/src/core/Icon/Icon.md b/src/core/Icon/Icon.md index 835cc3831..c6da54492 100644 --- a/src/core/Icon/Icon.md +++ b/src/core/Icon/Icon.md @@ -6,7 +6,7 @@ import { Icon } from 'suomifi-ui-components'; ```jsx noeditor import { Icon } from 'suomifi-ui-components'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { allIcons, allStaticIcons } from 'suomifi-icons'; import clipboardCopy from 'clipboard-copy'; const StyledIcon = styled(props => )({ diff --git a/src/core/Icon/Icon.tsx b/src/core/Icon/Icon.tsx index 67a068224..59b96d10d 100644 --- a/src/core/Icon/Icon.tsx +++ b/src/core/Icon/Icon.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { iconBaseStyles } from './Icon.baseStyles'; import { withDefaultTheme } from '../theme/utils'; import { diff --git a/src/core/Link/Link.baseStyles.ts b/src/core/Link/Link.baseStyles.ts index cb2eff95d..d07c64abd 100644 --- a/src/core/Link/Link.baseStyles.ts +++ b/src/core/Link/Link.baseStyles.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { LinkProps } from './Link'; import { element, fonts, focus } from '../theme/reset'; diff --git a/src/core/Link/Link.tsx b/src/core/Link/Link.tsx index 73c6d8c00..c734dd6bd 100644 --- a/src/core/Link/Link.tsx +++ b/src/core/Link/Link.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { diff --git a/src/core/Link/LinkExternal.tsx b/src/core/Link/LinkExternal.tsx index 510d3009e..474446809 100644 --- a/src/core/Link/LinkExternal.tsx +++ b/src/core/Link/LinkExternal.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { Link, LinkProps } from './Link'; diff --git a/src/core/Menu/Menu.baseStyles.tsx b/src/core/Menu/Menu.baseStyles.tsx index 3416c963e..c0ca9793b 100644 --- a/src/core/Menu/Menu.baseStyles.tsx +++ b/src/core/Menu/Menu.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme, ThemeProp } from '../theme'; import { MenuProps } from './Menu'; import { element, fonts, focus } from '../theme/reset'; diff --git a/src/core/Menu/Menu.tsx b/src/core/Menu/Menu.tsx index fa6a92dd5..8958e7a8b 100644 --- a/src/core/Menu/Menu.tsx +++ b/src/core/Menu/Menu.tsx @@ -1,5 +1,5 @@ import React, { Component, ReactNode, Fragment } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { classnamesValue } from '../../utils/typescript'; import { withDefaultTheme } from '../theme/utils'; diff --git a/src/core/Panel/Panel.baseStyles.tsx b/src/core/Panel/Panel.baseStyles.tsx index b9f5597c2..2f1122381 100644 --- a/src/core/Panel/Panel.baseStyles.tsx +++ b/src/core/Panel/Panel.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { PanelProps } from './Panel'; import { element, fonts } from '../theme/reset'; diff --git a/src/core/Panel/Panel.tsx b/src/core/Panel/Panel.tsx index 6792424cc..9f2ac96bb 100644 --- a/src/core/Panel/Panel.tsx +++ b/src/core/Panel/Panel.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { baseStyles } from './Panel.baseStyles'; diff --git a/src/core/Panel/PanelExpansion.baseStyles.tsx b/src/core/Panel/PanelExpansion.baseStyles.tsx index fb0236bf7..2d2f4cc59 100644 --- a/src/core/Panel/PanelExpansion.baseStyles.tsx +++ b/src/core/Panel/PanelExpansion.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { PanelExpansionProps } from './PanelExpansion'; import { button } from '../theme/reset'; diff --git a/src/core/Panel/PanelExpansion.tsx b/src/core/Panel/PanelExpansion.tsx index 50d27bccd..83b39b88f 100644 --- a/src/core/Panel/PanelExpansion.tsx +++ b/src/core/Panel/PanelExpansion.tsx @@ -1,5 +1,5 @@ import React, { Component, Fragment } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { baseStyles as panelBaseStyles } from './Panel.baseStyles'; diff --git a/src/core/Panel/PanelExpansionGroup.baseStyles.tsx b/src/core/Panel/PanelExpansionGroup.baseStyles.tsx index dca14dd65..99ea02527 100644 --- a/src/core/Panel/PanelExpansionGroup.baseStyles.tsx +++ b/src/core/Panel/PanelExpansionGroup.baseStyles.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { PanelExpansionGroupProps } from './PanelExpansionGroup'; import { element, fonts, focus } from '../theme/reset'; diff --git a/src/core/Panel/PanelExpansionGroup.tsx b/src/core/Panel/PanelExpansionGroup.tsx index d6af8e5bf..fc9c7fb1f 100644 --- a/src/core/Panel/PanelExpansionGroup.tsx +++ b/src/core/Panel/PanelExpansionGroup.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; import { diff --git a/src/core/Paragraph/Paragraph.baseStyles.ts b/src/core/Paragraph/Paragraph.baseStyles.ts index f7430251f..603ea92a0 100644 --- a/src/core/Paragraph/Paragraph.baseStyles.ts +++ b/src/core/Paragraph/Paragraph.baseStyles.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { ParagraphProps } from './Paragraph'; import { element, fonts } from '../theme/reset'; diff --git a/src/core/Paragraph/Paragraph.tsx b/src/core/Paragraph/Paragraph.tsx index c17054beb..fa795ffd5 100644 --- a/src/core/Paragraph/Paragraph.tsx +++ b/src/core/Paragraph/Paragraph.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent, ColorProp } from '../theme'; import { diff --git a/src/core/Text/Text.baseStyles.ts b/src/core/Text/Text.baseStyles.ts index ccbb8ba27..6b19dccb6 100644 --- a/src/core/Text/Text.baseStyles.ts +++ b/src/core/Text/Text.baseStyles.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { suomifiTheme } from '../theme'; import { TextProps } from './Text'; import { element, fonts } from '../theme/reset'; diff --git a/src/core/Text/Text.tsx b/src/core/Text/Text.tsx index 3619fba0e..ea16e3052 100644 --- a/src/core/Text/Text.tsx +++ b/src/core/Text/Text.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from '@emotion/styled'; +import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent, ColorProp } from '../theme'; import { diff --git a/src/core/theme/reset/index.ts b/src/core/theme/reset/index.ts index 25bf5ff67..633165991 100644 --- a/src/core/theme/reset/index.ts +++ b/src/core/theme/reset/index.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { ThemeProp, suomifiTheme } from '../'; import { focus as focusUtil } from '../utils'; import { fonts } from './typography'; diff --git a/src/core/theme/reset/typography.ts b/src/core/theme/reset/typography.ts index 659dd9395..cf974907d 100644 --- a/src/core/theme/reset/typography.ts +++ b/src/core/theme/reset/typography.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { ThemeProp } from '../'; import { typography as defaultTypography } from '../typography'; diff --git a/src/reset/HtmlA/HtmlA.tsx b/src/reset/HtmlA/HtmlA.tsx index 7d0d73766..7874b2a4f 100644 --- a/src/reset/HtmlA/HtmlA.tsx +++ b/src/reset/HtmlA/HtmlA.tsx @@ -1,6 +1,5 @@ -import React, { ReactNode, HTMLProps, ComponentType } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import React, { ReactNode, HTMLProps } from 'react'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { allStates } from '../../utils/css/pseudo'; import { Omit } from '../../utils/typescript'; @@ -8,7 +7,7 @@ import { Omit } from '../../utils/typescript'; export interface HtmlAProps extends Omit, 'ref' | 'as'> { children: ReactNode; - as?: keyof JSX.IntrinsicElements | ComponentType; + as?: keyof JSX.IntrinsicElements | React.ComponentType; } const aResets = css` diff --git a/src/reset/HtmlButton/HtmlButton.tsx b/src/reset/HtmlButton/HtmlButton.tsx index 33d0f0974..b47862765 100644 --- a/src/reset/HtmlButton/HtmlButton.tsx +++ b/src/reset/HtmlButton/HtmlButton.tsx @@ -1,11 +1,11 @@ import React, { HTMLProps, ButtonHTMLAttributes } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets, resetWithSelectors } from '../utils'; import { Omit } from '../../utils/typescript'; export interface HtmlButtonProps - extends Omit, 'ref'> { + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; /** * HTML Button type (button, submit, reset) * @default button diff --git a/src/reset/HtmlDiv/HtmlDiv.tsx b/src/reset/HtmlDiv/HtmlDiv.tsx index 808b99ef1..a0be04db2 100644 --- a/src/reset/HtmlDiv/HtmlDiv.tsx +++ b/src/reset/HtmlDiv/HtmlDiv.tsx @@ -1,10 +1,12 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { Omit } from '../../utils/typescript'; -export interface HtmlDivProps extends Omit, 'ref'> {} +export interface HtmlDivProps + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const divResets = css` ${resets.normalize.html} diff --git a/src/reset/HtmlH/HtmlH.tsx b/src/reset/HtmlH/HtmlH.tsx index 3af2ae741..c645e759b 100644 --- a/src/reset/HtmlH/HtmlH.tsx +++ b/src/reset/HtmlH/HtmlH.tsx @@ -1,13 +1,14 @@ import { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { Omit } from '../../utils/typescript'; export type hLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export interface HtmlHProps - extends Omit, 'ref'> {} + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const hResets = css` ${resets.normalize.html} diff --git a/src/reset/HtmlInput/HtmlInput.tsx b/src/reset/HtmlInput/HtmlInput.tsx index 5b9fcb078..bd5b60200 100644 --- a/src/reset/HtmlInput/HtmlInput.tsx +++ b/src/reset/HtmlInput/HtmlInput.tsx @@ -1,11 +1,10 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets, resetWithSelectors } from '../utils'; import { Omit } from '../../utils/typescript'; - export interface HtmlInputProps - extends Omit, 'ref'> { + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; /** * HTML Input type * @default text diff --git a/src/reset/HtmlLabel/HtmlLabel.tsx b/src/reset/HtmlLabel/HtmlLabel.tsx index 9e0baa0ff..2fdd805ec 100644 --- a/src/reset/HtmlLabel/HtmlLabel.tsx +++ b/src/reset/HtmlLabel/HtmlLabel.tsx @@ -1,12 +1,14 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; +import { Omit } from '../../utils/typescript'; /* Only style reseted label-element, no need to check accessibility here */ /* eslint-disable jsx-a11y/label-has-associated-control */ -export interface HtmlLabelProps extends HTMLProps { +export interface HtmlLabelProps + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; /** * HTML Label for ID-name of the element */ diff --git a/src/reset/HtmlLi/HtmlLi.tsx b/src/reset/HtmlLi/HtmlLi.tsx index dec8dfcb4..0b1dbc90c 100644 --- a/src/reset/HtmlLi/HtmlLi.tsx +++ b/src/reset/HtmlLi/HtmlLi.tsx @@ -1,9 +1,11 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; +import { Omit } from '../../utils/typescript'; -export interface HtmlLiProps extends HTMLProps {} +export interface HtmlLiProps extends Omit, 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const liResets = css` ${resets.normalize.html} diff --git a/src/reset/HtmlNav/HtmlNav.tsx b/src/reset/HtmlNav/HtmlNav.tsx index a1f250406..0edb4c759 100644 --- a/src/reset/HtmlNav/HtmlNav.tsx +++ b/src/reset/HtmlNav/HtmlNav.tsx @@ -1,10 +1,12 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { Omit } from '../../utils/typescript'; -export interface HtmlNavProps extends Omit, 'ref'> {} +export interface HtmlNavProps + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const aResets = css` ${resets.normalize.html} diff --git a/src/reset/HtmlOl/HtmlOl.tsx b/src/reset/HtmlOl/HtmlOl.tsx index a24739157..22acaf493 100644 --- a/src/reset/HtmlOl/HtmlOl.tsx +++ b/src/reset/HtmlOl/HtmlOl.tsx @@ -1,11 +1,12 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { Omit } from '../../utils/typescript'; export interface HtmlOlProps - extends Omit, 'type'> {} + extends Omit, 'type' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const olResets = css` ${resets.normalize.html} diff --git a/src/reset/HtmlP/HtmlP.tsx b/src/reset/HtmlP/HtmlP.tsx index fe99aace2..63d31e71b 100644 --- a/src/reset/HtmlP/HtmlP.tsx +++ b/src/reset/HtmlP/HtmlP.tsx @@ -1,11 +1,12 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { Omit } from '../../utils/typescript'; export interface HtmlPProps - extends Omit, 'ref'> {} + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const spanResets = css` ${resets.normalize.html} diff --git a/src/reset/HtmlSpan/HtmlSpan.tsx b/src/reset/HtmlSpan/HtmlSpan.tsx index d0b6c89f8..bcd05a174 100644 --- a/src/reset/HtmlSpan/HtmlSpan.tsx +++ b/src/reset/HtmlSpan/HtmlSpan.tsx @@ -1,11 +1,12 @@ import React, { HTMLProps } from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; +import { default as styled, css } from 'styled-components'; import { resets } from '../utils'; import { Omit } from '../../utils/typescript'; export interface HtmlSpanProps - extends Omit, 'ref'> {} + extends Omit, 'ref' | 'as'> { + as?: keyof JSX.IntrinsicElements | React.ComponentType; +} const spanResets = css` ${resets.normalize.html} diff --git a/src/reset/utils/index.ts b/src/reset/utils/index.ts index 155a7ddf6..4cf3d7ef4 100644 --- a/src/reset/utils/index.ts +++ b/src/reset/utils/index.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; import { normalizeCssInJs } from 'normalize.cssinjs'; const normalize = normalizeCssInJs({ cssToString: true }); diff --git a/src/utils/css/pseudo.ts b/src/utils/css/pseudo.ts index ee637a871..d84024363 100644 --- a/src/utils/css/pseudo.ts +++ b/src/utils/css/pseudo.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; export const allStates = (styles: string) => css` &:hover, diff --git a/src/utils/css/utils.ts b/src/utils/css/utils.ts index 685dc9971..1d24834a4 100644 --- a/src/utils/css/utils.ts +++ b/src/utils/css/utils.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from 'styled-components'; export const clearfix = css` &:after { From a62dab51eeb474b93895defb3cdd1d7b9b5c33eb Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Thu, 15 Aug 2019 14:09:41 +0300 Subject: [PATCH 07/36] Refactor Menu to use styled-components MenuList replacing global styles --- src/core/Menu/Menu.baseStyles.tsx | 21 +++++++-------------- src/core/Menu/Menu.tsx | 18 +++++++++++++++--- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/core/Menu/Menu.baseStyles.tsx b/src/core/Menu/Menu.baseStyles.tsx index c0ca9793b..9e470ba1b 100644 --- a/src/core/Menu/Menu.baseStyles.tsx +++ b/src/core/Menu/Menu.baseStyles.tsx @@ -30,22 +30,15 @@ export const baseStyles = ({ } `; -export const dataReachMenu = (theme: ThemeProp) => css` - [data-reach-menu] { +export const menuListStyles = ({ + theme = suomifiTheme, +}: { + theme: ThemeProp; +}) => css` + &[data-reach-menu-list].fi-menu_list { ${element(theme)} ${fonts(theme).body} - z-index: ${theme.zindexes.menu}; margin-top: -2px; - font-family: inherit; - } -`; - -export const globalStyles = ({ theme = suomifiTheme }: MenuProps) => css` - ${dataReachMenu(theme)} - - [data-reach-menu-list].fi-menu_list { - ${element(theme)} - ${fonts(theme).body} background-color: ${theme.colors.whiteBase}; border: none; box-shadow: ${theme.shadows.menuShadow}; @@ -82,7 +75,7 @@ export const globalStyles = ({ theme = suomifiTheme }: MenuProps) => css` } } - [data-reach-menu-item].fi-menu_item { + & [data-reach-menu-item].fi-menu_item { ${element(theme)} ${fonts(theme).body} &[data-selected] { diff --git a/src/core/Menu/Menu.tsx b/src/core/Menu/Menu.tsx index 8958e7a8b..8ebea330f 100644 --- a/src/core/Menu/Menu.tsx +++ b/src/core/Menu/Menu.tsx @@ -4,12 +4,13 @@ import classnames from 'classnames'; import { classnamesValue } from '../../utils/typescript'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; -import { Global } from '@emotion/core'; -import { baseStyles, globalStyles } from './Menu.baseStyles'; +import { baseStyles, menuListStyles } from './Menu.baseStyles'; import { Menu as CompMenu, MenuProps as CompMenuProps, MenuListItemsProps, + MenuList as CompMenuList, + MenuListProps as CompMenuListProps, } from '../../components/Menu/Menu'; import { MenuItemLanguage, @@ -66,6 +67,14 @@ const languageName = (name: ReactNode) => ( ); +interface MenuListProps extends CompMenuListProps, ThemeComponent {} + +const StyledMenuList = styled(({ theme, ...passProps }: MenuListProps) => ( + +))` + ${props => menuListStyles(props.theme)} +`; + class MenuVariation extends Component { render() { const { @@ -73,6 +82,7 @@ class MenuVariation extends Component { variant, name, className, + menuListComponent: MenuListComponentProp, ...passProps } = withDefaultTheme(this.props); const ifMenuLanguage = variant === 'language'; @@ -91,12 +101,14 @@ class MenuVariation extends Component { return ( - {MenuListWithProps(children, { [itemLangClassName]: ifMenuLanguage, From e6f3ac5b288f2225f99383906628bf746c498b6c Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Thu, 15 Aug 2019 14:10:19 +0300 Subject: [PATCH 08/36] Refactor Dropdown to use styled-components MenuList replacing global styles --- src/components/Dropdown/Dropdown.tsx | 22 +++++++++++++++++++--- src/core/Dropdown/Dropdown.baseStyles.tsx | 18 ++++++++++-------- src/core/Dropdown/Dropdown.tsx | 18 ++++++++++++++---- 3 files changed, 43 insertions(+), 15 deletions(-) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 24aa7f4a0..4d461da2d 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -52,6 +52,7 @@ export interface DropdownProps { dropdownButtonProps?: OptionalMenuButtonProps; /** Properties given to dropdown's list-component, className etc. */ dropdownListProps?: OptionalMenuListProps; + menuListComponent?: React.ComponentType; /** Properties given to dropdown's item-component, className etc. */ dropdownItemProps?: OptionalMenuItemProps; /** DropdownItems */ @@ -97,6 +98,7 @@ export class Dropdown extends Component { className, dropdownButtonProps = {}, dropdownListProps = {}, + menuListComponent: MenuListComponentReplace, dropdownItemProps = {}, changeNameToSelection = true, ...passProps @@ -127,9 +129,23 @@ export class Dropdown extends Component { {!!selectedName ? selectedName : name} - - {this.list(children, changeNameToSelection, passDropdownItemProps)} - + {!!MenuListComponentReplace ? ( + + {this.list( + children, + changeNameToSelection, + passDropdownItemProps, + )} + + ) : ( + + {this.list( + children, + changeNameToSelection, + passDropdownItemProps, + )} + + )} ); diff --git a/src/core/Dropdown/Dropdown.baseStyles.tsx b/src/core/Dropdown/Dropdown.baseStyles.tsx index 6b4098948..80bf618e3 100644 --- a/src/core/Dropdown/Dropdown.baseStyles.tsx +++ b/src/core/Dropdown/Dropdown.baseStyles.tsx @@ -1,9 +1,8 @@ -import { css } from '@emotion/core'; -import { suomifiTheme } from '../theme'; +import { css } from 'styled-components'; +import { suomifiTheme, ThemeProp } from '../theme'; import { DropdownProps } from './Dropdown'; import { element, inputButton, fonts } from '../theme/reset'; import { Omit } from '../../utils/typescript'; -import { dataReachMenu } from '../Menu/Menu.baseStyles'; export const baseStyles = ({ theme = suomifiTheme, @@ -33,12 +32,15 @@ export const baseStyles = ({ } `; -export const globalStyles = ({ theme = suomifiTheme }: DropdownProps) => css` - ${dataReachMenu(theme)} - - [data-reach-menu-list].fi-dropdown_list { +export const menuListStyles = ({ + theme = suomifiTheme, +}: { + theme: ThemeProp; +}) => css` + &[data-reach-menu-list].fi-dropdown_list { ${element(theme)} ${fonts(theme).input} + margin-top: -1px; padding: 0; font-size: 100%; border: 0; @@ -50,7 +52,7 @@ export const globalStyles = ({ theme = suomifiTheme }: DropdownProps) => css` overflow: hidden; } - [data-reach-menu-item].fi-dropdown_item { + & [data-reach-menu-item].fi-dropdown_item { ${element(theme)} ${fonts(theme).input} padding: ${theme.spacing.s} ${theme.spacing.m}; diff --git a/src/core/Dropdown/Dropdown.tsx b/src/core/Dropdown/Dropdown.tsx index 62f02b415..fa1c90495 100644 --- a/src/core/Dropdown/Dropdown.tsx +++ b/src/core/Dropdown/Dropdown.tsx @@ -2,8 +2,11 @@ import React, { Component, Fragment } from 'react'; import { default as styled } from 'styled-components'; import { withDefaultTheme } from '../theme/utils'; import { ThemeComponent } from '../theme'; -import { Global } from '@emotion/core'; -import { baseStyles, globalStyles } from './Dropdown.baseStyles'; +import { baseStyles, menuListStyles } from './Dropdown.baseStyles'; +import { + MenuList as CompMenuList, + MenuListProps as CompMenuListProps, +} from '../../components/Menu/Menu'; import { Dropdown as CompDropdown, DropdownProps as CompDropdownProps, @@ -21,6 +24,14 @@ const StyledDropdown = styled(({ theme, ...passProps }: DropdownProps) => ( ${props => baseStyles(props)} `; +interface MenuListProps extends CompMenuListProps, ThemeComponent {} + +const StyledMenuList = styled(({ theme, ...passProps }: MenuListProps) => ( + +))` + ${props => menuListStyles(props.theme)} +`; + /** * * Use for selectable dropdown list. @@ -32,8 +43,7 @@ export class Dropdown extends Component { const props = withDefaultTheme(this.props); return ( - - + ); } From 51146fdf62650df192806bdda549087772bcaf60 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Thu, 15 Aug 2019 14:13:27 +0300 Subject: [PATCH 09/36] Refactor Menu to use styled-components MenuList replacing global styles --- src/components/Menu/Menu.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index b04a236a1..50216e7ba 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -13,7 +13,7 @@ import { logger } from '../../utils/logger'; import '@reach/menu-button/styles.css'; import { Omit } from '../../utils/typescript'; -export { MenuItem, MenuLink }; +export { MenuList, MenuListProps, MenuItem, MenuLink }; const baseClassName = 'fi-menu'; export interface MenuItemProps { @@ -49,6 +49,7 @@ export interface MenuProps { menuButtonClassName?: string; /** Properties given to Menu's List-component, className etc. */ menuListProps?: OptionalMenuListProps; + menuListComponent?: React.ComponentType; /** Menu items: MenuItem or MenuLink */ children?: Array>; } @@ -60,7 +61,8 @@ export class Menu extends Component { name, className, menuButtonClassName, - menuListProps, + menuListProps = {}, + menuListComponent: MenuListComponentReplace, ...passProps } = this.props; @@ -75,7 +77,13 @@ export class Menu extends Component { {name} - {children} + {!!MenuListComponentReplace ? ( + + {children} + + ) : ( + {children} + )} ); From 7b43d419fdfcd26fa9903aebdd06a7d2f3d9471f Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Fri, 16 Aug 2019 11:56:00 +0300 Subject: [PATCH 10/36] Change cssFromBaseStyles to styled component --- src/core/utils/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/utils/index.ts b/src/core/utils/index.ts index b61dae26f..b83f015df 100644 --- a/src/core/utils/index.ts +++ b/src/core/utils/index.ts @@ -1,4 +1,4 @@ -import { SerializedStyles } from '@emotion/core'; +import { FlattenSimpleInterpolation } from 'styled-components'; import { suomifiTheme, ThemeProp } from '../theme'; interface BaseStylesInterface { @@ -12,6 +12,6 @@ interface BaseStylesInterface { * @param props properties needed to get desired styles from components */ export const cssFromBaseStyles = ( - baseStyles: ({ theme }: BaseStylesInterface) => SerializedStyles, + baseStyles: ({ theme }: BaseStylesInterface) => FlattenSimpleInterpolation, props = {}, -) => baseStyles({ ...props, theme: suomifiTheme }).styles; +) => baseStyles({ ...props, theme: suomifiTheme }).join(''); From 82d3c0cabc5a5e4162c5d9d2652c39efea4d51e6 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Mon, 19 Aug 2019 09:21:26 +0300 Subject: [PATCH 11/36] Replace jest-emotion with jest-styled-components --- package.json | 2 +- yarn.lock | 24 ++++++++---------------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 7609f875a..fa69996d3 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "jest": "24.8.0", "jest-axe": "3.1.1", "jest-dom": "2.1.1", - "jest-emotion": "10.0.7", + "jest-styled-components": "6.3.3", "lint-staged": "8.0.5", "npm-run-all": "4.1.5", "prettier": "1.15.2", diff --git a/yarn.lock b/yarn.lock index 0cf056053..6dab1cf44 100644 --- a/yarn.lock +++ b/yarn.lock @@ -824,11 +824,6 @@ resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.9.tgz#c16b55186ee73ae65e001fbee69d392c51337ad1" integrity sha512-wNMwXSUcwyYajtbayfPp55tSayuDVU6PfY5gzvRSj80UvxdXEJOVPnUVajaOp7NgXLm+1e2ZDLULmpsU9vDvQw== -"@types/jest@^23.0.2": - version "23.3.14" - resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.14.tgz#37daaf78069e7948520474c87b80092ea912520a" - integrity sha512-Q5hTcfdudEL2yOmluA1zaSyPbzWPmJ3XfSWeP3RyoYvS9hnje1ZyagrZOuQ6+1nQC1Gw+7gap3pLNL3xL6UBug== - "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -3089,7 +3084,7 @@ css-what@^2.1.2: resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== -css@^2.2.1, css@^2.2.3: +css@^2.2.3, css@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== @@ -5963,16 +5958,6 @@ jest-each@^24.8.0: jest-util "^24.8.0" pretty-format "^24.8.0" -jest-emotion@10.0.7: - version "10.0.7" - resolved "https://registry.yarnpkg.com/jest-emotion/-/jest-emotion-10.0.7.tgz#c882f6e201cf62c025245f863b8e5ff473d2cef0" - integrity sha512-uR6KIw/jnlqVOFBHpeRMirpnWggnUluqzKYSmlp/TpoNaRxSYTGj9+RVrS7kngtyFyn0F0rOJ73CaPRuxL5ebg== - dependencies: - "@types/jest" "^23.0.2" - chalk "^2.4.1" - css "^2.2.1" - object-assign "^4.1.1" - jest-environment-jsdom@^24.8.0: version "24.8.0" resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.8.0.tgz#300f6949a146cabe1c9357ad9e9ecf9f43f38857" @@ -6211,6 +6196,13 @@ jest-snapshot@^24.8.0: pretty-format "^24.8.0" semver "^5.5.0" +jest-styled-components@6.3.3: + version "6.3.3" + resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-6.3.3.tgz#e15bbda13a6b6ff876d6b783751fe9840860c52a" + integrity sha512-RBMPZSJJSgPDTTJsuYzx5fsij/CULaqQNZOWkn8J/L++rX6P830o2vB9CXGzfQf/bVq9qGr1ZBNoivi+v6JPYg== + dependencies: + css "^2.2.4" + jest-util@^24.8.0: version "24.8.0" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.8.0.tgz#41f0e945da11df44cc76d64ffb915d0716f46cd1" From 6a260b53b84323fdbf5681d697e25cf4f67c2d33 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Mon, 19 Aug 2019 09:34:04 +0300 Subject: [PATCH 12/36] Replace configuration for jest-emotion with jest-styled-components --- jest.config.js | 1 - jest.setup.js | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 40c79b066..01ead6af0 100644 --- a/jest.config.js +++ b/jest.config.js @@ -38,7 +38,6 @@ module.exports = { setupFilesAfterEnv: [require.resolve('./jest.setup.js')], - snapshotSerializers: ['jest-emotion'], moduleNameMapper: { '\\.css$': '/jest.styleMock.js', }, diff --git a/jest.setup.js b/jest.setup.js index 294d0d63f..d4e2f0469 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -6,3 +6,5 @@ require('jest-dom/extend-expect'); // this is basically: afterEach(cleanup) require('react-testing-library/cleanup-after-each'); + +require('jest-styled-components'); From 141218bc3bb76d511e7283ea85d4acd764374ce1 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Mon, 19 Aug 2019 09:51:29 +0300 Subject: [PATCH 13/36] Replace snapshots with styled-components serializer (was done with emotion) --- .../Button/__snapshots__/Button.test.tsx.snap | 14 +- .../Svg/__snapshots__/Svg.test.tsx.snap | 4 +- .../Block/__snapshots__/Block.test.tsx.snap | 100 ++----- .../__snapshots__/Breadcrumb.test.tsx.snap | 274 +++++++++--------- .../Button/__snapshots__/Button.test.tsx.snap | 123 ++++---- .../__snapshots__/SearchInput.test.tsx.snap | 224 +++++++------- .../__snapshots__/TextInput.test.tsx.snap | 154 +++++----- .../Toggle/__snapshots__/Toggle.test.tsx.snap | 164 ++++++----- .../__snapshots__/Heading.test.tsx.snap | 49 ++-- .../Icon/__snapshots__/Icon.test.tsx.snap | 5 +- .../Link/__snapshots__/Link.test.tsx.snap | 51 ++-- .../__snapshots__/LinkExternal.test.tsx.snap | 145 ++++----- .../PanelExpansion.test.tsx.snap | 210 +++++++------- .../__snapshots__/Paragraph.test.tsx.snap | 7 +- .../Text/__snapshots__/Text.test.tsx.snap | 21 +- 15 files changed, 750 insertions(+), 795 deletions(-) diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap index 9a9b542b1..6415a74fe 100644 --- a/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`calling render with the same component on the same container does not remount 1`] = ` -.emotion-0 { +.c0 { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -24,31 +24,31 @@ exports[`calling render with the same component on the same container does not r cursor: pointer; } -.emotion-0:-moz-focusring { +.c0:-moz-focusring { outline: 1px dotted ButtonText; } -.emotion-0::-moz-focus-inner { +.c0::-moz-focus-inner { border-style: none; padding: 0; } -.emotion-0::-webkit-file-upload-button { +.c0::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } -.emotion-0::-webkit-inner-spin-button { +.c0::-webkit-inner-spin-button { height: auto; } -.emotion-0::-webkit-outer-spin-button { +.c0::-webkit-outer-spin-button { height: auto; } diff --git a/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap b/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap index fb8a24f67..529d90f9e 100644 --- a/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap +++ b/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`calling render with the same component on the same container does not remount 1`] = ` -.emotion-0 { +.c1 { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -23,6 +23,9 @@ exports[`calling render with the same component on the same container does not r word-wrap: normal; word-break: normal; white-space: normal; +} + +.c0 { color: hsl(0,0%,16%); font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 18px; @@ -48,7 +51,7 @@ exports[`calling render with the same component on the same container does not r data-testid="test-paragraph" >

Hey this is test

diff --git a/src/core/Text/__snapshots__/Text.test.tsx.snap b/src/core/Text/__snapshots__/Text.test.tsx.snap index 8e37ed0d5..88717b018 100644 --- a/src/core/Text/__snapshots__/Text.test.tsx.snap +++ b/src/core/Text/__snapshots__/Text.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`calling render with the same component on the same container does not remount 1`] = ` -.emotion-0 { +.c1 { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -23,6 +23,9 @@ exports[`calling render with the same component on the same container does not r word-wrap: normal; word-break: normal; white-space: normal; +} + +.c0 { color: hsl(0,0%,16%); font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 18px; @@ -40,7 +43,7 @@ exports[`calling render with the same component on the same container does not r color: hsl(0,0%,16%); } -.emotion-0.fi-text--bold { +.c0.fi-text--bold { font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 18px; font-weight: 600; @@ -56,7 +59,7 @@ exports[`calling render with the same component on the same container does not r -webkit-font-smoothing: antialiased; } -.emotion-0.fi-text--lead { +.c0.fi-text--lead { font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 22px; font-weight: 400; @@ -72,7 +75,7 @@ exports[`calling render with the same component on the same container does not r -webkit-font-smoothing: antialiased; } -.emotion-0.fi-text--small-screen { +.c0.fi-text--small-screen { font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 16px; font-weight: 400; @@ -88,7 +91,7 @@ exports[`calling render with the same component on the same container does not r -webkit-font-smoothing: antialiased; } -.emotion-0.fi-text--small-screen.fi-text--bold { +.c0.fi-text--small-screen.fi-text--bold { font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 16px; font-weight: 600; @@ -104,7 +107,7 @@ exports[`calling render with the same component on the same container does not r -webkit-font-smoothing: antialiased; } -.emotion-0.fi-text--small-screen.fi-text--lead { +.c0.fi-text--small-screen.fi-text--lead { font-family: 'Source Sans Pro','Helvetica Neue',Arial,sans-serif; font-size: 20px; font-weight: 400; @@ -124,17 +127,17 @@ exports[`calling render with the same component on the same container does not r data-testid="test-text" > Hey this is test Hey this is test lead Hey this is test bold From 4705e31cba66fa8b22e21a41d7cc00fc02c31e1e Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 20 Aug 2019 06:46:14 +0300 Subject: [PATCH 14/36] Prevent theme from passing to SVG's --- src/core/Icon/Icon.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/core/Icon/Icon.tsx b/src/core/Icon/Icon.tsx index 59b96d10d..0d34a8ab1 100644 --- a/src/core/Icon/Icon.tsx +++ b/src/core/Icon/Icon.tsx @@ -74,12 +74,15 @@ const StyledSuomifiIcon = styled( */ export class Icon extends Component { render() { - const { src, color, icon = 'login', ...passProps } = withDefaultTheme( - this.props, - ); + const { + src, + color, + icon = 'login', + theme, + ...passProps + } = withDefaultTheme(this.props); const { className, ariaLabel } = this.props; - const iconColor = - color !== undefined ? color : passProps.theme.colors.depthDark27; + const iconColor = color !== undefined ? color : theme.colors.depthDark27; if (!!src) { return ; From c052852a7fa09c99edaa8c154067b68cfc2bbd33 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 20 Aug 2019 06:46:48 +0300 Subject: [PATCH 15/36] Update snapshots of removed theme object --- src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap | 2 -- .../Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap | 1 - src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap | 1 - src/core/Icon/__snapshots__/Icon.test.tsx.snap | 1 - src/core/Link/__snapshots__/LinkExternal.test.tsx.snap | 1 - src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap | 1 - 6 files changed, 7 deletions(-) diff --git a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 09359c89b..52ff685cd 100644 --- a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -289,7 +289,6 @@ exports[`calling render with the same component on the same container does not r focusable="false" height="1em" style="fill: hsl(0, 0%, 16%);" - theme="[object Object]" viewBox="0 0 24 24" width="1em" > @@ -313,7 +312,6 @@ exports[`calling render with the same component on the same container does not r focusable="false" height="1em" style="fill: hsl(0, 0%, 16%);" - theme="[object Object]" viewBox="0 0 24 24" width="1em" > diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap index abe8c1f68..89ef75baa 100644 --- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap +++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap @@ -226,7 +226,6 @@ exports[`calling render with the same component on the same container does not r focusable="false" height="1em" style="fill: hsl(202, 7%, 40%);" - theme="[object Object]" viewBox="0 0 24 24" width="1em" > diff --git a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap index 2b7df2a7a..2f687e1b7 100644 --- a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap +++ b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap @@ -224,7 +224,6 @@ exports[`calling render with the same component on the same container does not r class="fi-toggle_icon c4" focusable="false" height="1em" - theme="[object Object]" viewBox="0 0 38 23" width="1em" > diff --git a/src/core/Icon/__snapshots__/Icon.test.tsx.snap b/src/core/Icon/__snapshots__/Icon.test.tsx.snap index 8195721be..0ae22115e 100644 --- a/src/core/Icon/__snapshots__/Icon.test.tsx.snap +++ b/src/core/Icon/__snapshots__/Icon.test.tsx.snap @@ -16,7 +16,6 @@ exports[`calling render with the same component on the same container does not r focusable="false" height="1em" style="fill: hsl(202, 7%, 40%);" - theme="[object Object]" viewBox="0 0 24 24" width="1em" > diff --git a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap index 041f4c6fb..425328dad 100644 --- a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap +++ b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap @@ -164,7 +164,6 @@ exports[`calling render with the same component on the same container does not r focusable="false" height="1em" style="fill: currentColor;" - theme="[object Object]" viewBox="0 0 24 24" width="1em" > diff --git a/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap b/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap index 08f73b4b0..28a246b28 100644 --- a/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap +++ b/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap @@ -266,7 +266,6 @@ exports[`calling render with the same component on the same container does not r focusable="false" height="1em" style="fill: hsl(212, 63%, 45%);" - theme="[object Object]" viewBox="0 0 24 24" width="1em" > From 1a9b9d6171f3f668b62d67d194816da2dfbc7989 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Mon, 26 Aug 2019 09:03:36 +0300 Subject: [PATCH 16/36] Add role to svg when it uses label as it causes screen readers to consider it as a single entity --- src/components/utils/aria.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/utils/aria.ts b/src/components/utils/aria.ts index d7746011d..39e406322 100644 --- a/src/components/utils/aria.ts +++ b/src/components/utils/aria.ts @@ -2,7 +2,7 @@ const ifAriaNoLabel = (ariaLabel?: string) => !!ariaLabel || ariaLabel === ''; export const ariaLabelOrHidden = (ariaLabel?: string) => { return ifAriaNoLabel(ariaLabel) - ? { 'aria-label': ariaLabel } + ? { 'aria-label': ariaLabel, role: 'img' } : { 'aria-hidden': true }; }; From 79f17546395cc38e3871748ce9e71ce1e60fb642 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Mon, 26 Aug 2019 09:04:06 +0300 Subject: [PATCH 17/36] Add second example for Icon --- src/core/Icon/Icon.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/core/Icon/Icon.md b/src/core/Icon/Icon.md index c6da54492..4f286ed8e 100644 --- a/src/core/Icon/Icon.md +++ b/src/core/Icon/Icon.md @@ -4,6 +4,14 @@ import { Icon } from 'suomifi-ui-components'; ; ``` +### Icon with no label + +```jsx +import { Icon } from 'suomifi-ui-components'; + +; +``` + ```jsx noeditor import { Icon } from 'suomifi-ui-components'; import { default as styled } from 'styled-components'; From 98e98ca6aeac8a4948ac376e4a4425dba9d74d76 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Mon, 26 Aug 2019 09:04:37 +0300 Subject: [PATCH 18/36] Update Icon tests to have multiple icon variations --- src/core/Icon/Icon.test.tsx | 27 +++++++++--- .../Icon/__snapshots__/Icon.test.tsx.snap | 44 +++++++++++++------ 2 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/core/Icon/Icon.test.tsx b/src/core/Icon/Icon.test.tsx index 109e11a4e..dd0817bc9 100644 --- a/src/core/Icon/Icon.test.tsx +++ b/src/core/Icon/Icon.test.tsx @@ -4,17 +4,34 @@ import { axeTest } from '../../utils/test/axe'; import { Icon } from './Icon'; -const TestIcon = ; +const testIcon = ( + +); + +const TestIcons = ( +
+ {testIcon} + ; +
+); test('calling render with the same component on the same container does not remount', () => { - const svgRenderer = render(TestIcon); - const { getByTestId, container, rerender } = svgRenderer; + const svgRenderer = render(TestIcons); + const { getByTestId, container } = svgRenderer; expect(container.firstChild).toMatchSnapshot(); expect(getByTestId('icon')).toBeDefined(); // re-render the same component with different props - rerender(); + const testRenderer = render(testIcon); + const { rerender } = testRenderer; + rerender( + , + ); expect(getByTestId('noci')).toBeDefined(); }); -test('should not have basic accessibility issues', axeTest(TestIcon)); +test('should not have basic accessibility issues', axeTest(TestIcons)); diff --git a/src/core/Icon/__snapshots__/Icon.test.tsx.snap b/src/core/Icon/__snapshots__/Icon.test.tsx.snap index 0ae22115e..a506507f8 100644 --- a/src/core/Icon/__snapshots__/Icon.test.tsx.snap +++ b/src/core/Icon/__snapshots__/Icon.test.tsx.snap @@ -9,18 +9,34 @@ exports[`calling render with the same component on the same container does not r transform: translateY(0.1em); } - +
+ + + + + ; +
`; From efc38de73f57486f9ecd0ae25c1724a8cd5100fa Mon Sep 17 00:00:00 2001 From: LJKaski Date: Wed, 4 Sep 2019 11:00:55 +0300 Subject: [PATCH 19/36] Remove translateY from from icon basestyles and adjust stylings where affected --- src/core/Form/SearchInput/SearchInput.baseStyles.tsx | 2 +- src/core/Icon/Icon.baseStyles.tsx | 1 - src/core/Link/Link.baseStyles.ts | 1 + src/core/Menu/Menu.baseStyles.tsx | 7 ++++--- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx index bc6a2a6f6..c50f86868 100644 --- a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx +++ b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx @@ -15,7 +15,7 @@ export const baseStyles = ({ theme = suomifiTheme }: SearchInputProps) => css` position: absolute; top: 50%; right: ${theme.spacing.m}; - margin-top: -0.6em; + margin-top: -0.5em; } } `; diff --git a/src/core/Icon/Icon.baseStyles.tsx b/src/core/Icon/Icon.baseStyles.tsx index bf20d1fe3..1296a80a1 100644 --- a/src/core/Icon/Icon.baseStyles.tsx +++ b/src/core/Icon/Icon.baseStyles.tsx @@ -6,7 +6,6 @@ export const iconBaseStyles = ({ }: SuomifiIconProps) => css` display: inline-block; vertical-align: baseline; - transform: translateY(0.1em); ${!!mousePointer && `cursor: pointer; & * { diff --git a/src/core/Link/Link.baseStyles.ts b/src/core/Link/Link.baseStyles.ts index d07c64abd..caad1651d 100644 --- a/src/core/Link/Link.baseStyles.ts +++ b/src/core/Link/Link.baseStyles.ts @@ -25,5 +25,6 @@ export const baseStyles = ({ theme = suomifiTheme }: LinkProps) => css` export const externalStyles = ({ theme = suomifiTheme }: LinkProps) => css` & .fi-link_icon { padding-left: ${theme.spacing.xs}; + transform: translateY(0.1em); } `; diff --git a/src/core/Menu/Menu.baseStyles.tsx b/src/core/Menu/Menu.baseStyles.tsx index 9e470ba1b..1475ef1ae 100644 --- a/src/core/Menu/Menu.baseStyles.tsx +++ b/src/core/Menu/Menu.baseStyles.tsx @@ -22,9 +22,10 @@ export const baseStyles = ({ border-radius: ${theme.radius.basic}; text-transform: uppercase; & > .fi-menu-language_icon { - height: 16px; - width: 16px; - margin-left: ${theme.spacing.xxs}; + height: 1.2em; + width: 1.2em; + transform: translateY(0.3em); + margin-left: ${theme.spacing.xs}; } } } From aef7ff03c379795a2828898e17c5f2b1e46d8cf6 Mon Sep 17 00:00:00 2001 From: LJKaski Date: Wed, 4 Sep 2019 13:04:05 +0300 Subject: [PATCH 20/36] Update snapshots --- src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap | 3 --- .../SearchInput/__snapshots__/SearchInput.test.tsx.snap | 5 +---- src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap | 3 --- src/core/Icon/__snapshots__/Icon.test.tsx.snap | 3 --- src/core/Link/__snapshots__/LinkExternal.test.tsx.snap | 6 +++--- src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap | 3 --- 6 files changed, 4 insertions(+), 19 deletions(-) diff --git a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 52ff685cd..02722ccba 100644 --- a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -128,9 +128,6 @@ exports[`calling render with the same component on the same container does not r .c6 { display: inline-block; vertical-align: baseline; - -webkit-transform: translateY(0.1em); - -ms-transform: translateY(0.1em); - transform: translateY(0.1em); } .c4 { diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap index 89ef75baa..8a310d5d7 100644 --- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap +++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap @@ -183,9 +183,6 @@ exports[`calling render with the same component on the same container does not r .c7 { display: inline-block; vertical-align: baseline; - -webkit-transform: translateY(0.1em); - -ms-transform: translateY(0.1em); - transform: translateY(0.1em); } .c0 .fi-search-input_input-container { @@ -200,7 +197,7 @@ exports[`calling render with the same component on the same container does not r position: absolute; top: 50%; right: 16px; - margin-top: -0.6em; + margin-top: -0.5em; }