diff --git a/.storybook/preview/ThemedCanvas.tsx b/.storybook/preview/ThemedCanvas.tsx index cade2237..2d791569 100644 --- a/.storybook/preview/ThemedCanvas.tsx +++ b/.storybook/preview/ThemedCanvas.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { colors } from "../../src/colors"; import { assertUnreachable } from "../../src/shared/assertUnreachable"; import { Canvas } from "@storybook/addon-docs/dist/blocks/Canvas"; diff --git a/README.md b/README.md index 12f32af7..1c03b259 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ ## Getting started ```shell -npm install @apollo/space-kit @emotion/core @emotion/cache framer-motion +npm install @apollo/space-kit @emotion/react @emotion/cache framer-motion ``` ## Usage diff --git a/jest.config.js b/jest.config.js index f5b35904..1b1aa0d8 100644 --- a/jest.config.js +++ b/jest.config.js @@ -15,7 +15,7 @@ module.exports = { }, preset: "ts-jest/presets/js-with-babel", setupFilesAfterEnv: ["jest/setup.js"], - snapshotSerializers: ["jest-emotion"], + snapshotSerializers: ["@emotion/jest/serializer"], globals: { "ts-jest": { diagnostics: false, diff --git a/package-lock.json b/package-lock.json index ef97374b..1f09b49f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4588,15 +4588,36 @@ } }, "@emotion/cache": { - "version": "10.0.29", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", - "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz", + "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==", "dev": true, "requires": { - "@emotion/sheet": "0.9.4", - "@emotion/stylis": "0.8.5", - "@emotion/utils": "0.11.3", - "@emotion/weak-memoize": "0.2.5" + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.0.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "^4.0.3" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==", + "dev": true + }, + "@emotion/sheet": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", + "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==", + "dev": true + }, + "@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==", + "dev": true + } } }, "@emotion/core": { @@ -4622,6 +4643,18 @@ "regenerator-runtime": "^0.13.4" } }, + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "dev": true, + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", @@ -4641,6 +4674,24 @@ "babel-plugin-emotion": "^10.0.27" } }, + "@emotion/css-prettifier": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/css-prettifier/-/css-prettifier-1.0.0.tgz", + "integrity": "sha512-efxSrRTiTqHTQVKW15Gz5H4pNAw8OqcG8NaiwkJIkqIdNXTD4Qr1zC1Ou6r2acd1oJJ2s56nb1ClnXMiWoj6gQ==", + "dev": true, + "requires": { + "@emotion/memoize": "^0.7.4", + "stylis": "^4.0.3" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==", + "dev": true + } + } + }, "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", @@ -4657,6 +4708,55 @@ "@emotion/memoize": "0.7.2" } }, + "@emotion/jest": { + "version": "11.2.1", + "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.2.1.tgz", + "integrity": "sha512-uLlPahLgyBRjAoYoPNmq+PUit+7Dqdz4YqsF+Ol4/vMRfjnMuXzpzgIaFFsL5npMDGPeIhHeJTM4O+9r10t3vw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.7.2", + "@emotion/css-prettifier": "^1.0.0", + "chalk": "^4.1.0", + "specificity": "^0.4.1", + "stylis": "^4.0.3" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + } + } + }, "@emotion/memoize": { "version": "0.7.2", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.2.tgz", @@ -4664,6 +4764,54 @@ "dev": true, "optional": true }, + "@emotion/react": { + "version": "11.1.5", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.5.tgz", + "integrity": "sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==", + "dev": true, + "requires": { + "@babel/runtime": "^7.7.2", + "@emotion/cache": "^11.1.3", + "@emotion/serialize": "^1.0.0", + "@emotion/sheet": "^1.0.1", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==", + "dev": true + }, + "@emotion/serialize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.1.tgz", + "integrity": "sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==", + "dev": true, + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", + "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==", + "dev": true + }, + "@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==", + "dev": true + } + } + }, "@emotion/serialize": { "version": "0.11.16", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", @@ -15665,18 +15813,6 @@ "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=", "dev": true }, - "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - } - }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -22024,41 +22160,6 @@ } } }, - "jest-emotion": { - "version": "10.0.32", - "resolved": "https://registry.npmjs.org/jest-emotion/-/jest-emotion-10.0.32.tgz", - "integrity": "sha512-hW3IwWc47qRuxnGsWFGY6uIMX8F4YBzq+Qci3LAYUCUqUBNP+1DU1L5Nudo9Ry0NHVFOqDnDeip1p2UR0kVMwA==", - "dev": true, - "requires": { - "@babel/runtime": "^7.5.5", - "@types/jest": "^23.0.2", - "chalk": "^2.4.1", - "css": "^2.2.1" - }, - "dependencies": { - "@babel/runtime": { - "version": "7.11.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", - "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", - "dev": true, - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, - "@types/jest": { - "version": "23.3.14", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.14.tgz", - "integrity": "sha512-Q5hTcfdudEL2yOmluA1zaSyPbzWPmJ3XfSWeP3RyoYvS9hnje1ZyagrZOuQ6+1nQC1Gw+7gap3pLNL3xL6UBug==", - "dev": true - }, - "regenerator-runtime": { - "version": "0.13.7", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", - "dev": true - } - } - }, "jest-environment-jsdom": { "version": "26.5.2", "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.5.2.tgz", @@ -31612,6 +31713,12 @@ "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==", "dev": true }, + "specificity": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz", + "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==", + "dev": true + }, "speedometer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/speedometer/-/speedometer-1.0.0.tgz", @@ -32329,6 +32436,12 @@ } } }, + "stylis": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.7.tgz", + "integrity": "sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA==", + "dev": true + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 9551f4c3..e19a43c8 100644 --- a/package.json +++ b/package.json @@ -99,8 +99,9 @@ "@babel/preset-env": "^7.12.1", "@babel/preset-typescript": "^7.12.1", "@babel/traverse": "^7.12.1", - "@emotion/cache": "^10.0.29", - "@emotion/core": "^10.1.1", + "@emotion/cache": "^11.1.3", + "@emotion/jest": "^11.2.0", + "@emotion/react": "^11.1.5", "@rollup/plugin-babel": "^5.2.1", "@storybook/addon-docs": "^6.1.17", "@storybook/react": "^6.1.17", @@ -140,7 +141,6 @@ "formik": "^2.2.5", "framer-motion": "1.6.8", "jest": "^26.5.3", - "jest-emotion": "^10.0.32", "jest-util": "^26.5.2", "less": "^3.9.0", "node-fetch": "^2.6.0", @@ -165,8 +165,8 @@ "yup": "^0.31.0" }, "peerDependencies": { - "@emotion/cache": ">10.0.29", - "@emotion/core": ">10.1.0", + "@emotion/cache": "^11.0.0", + "@emotion/react": "^11.0.0", "react": ">16", "react-dom": ">16", "framer-motion": ">1.6" diff --git a/rollup.config.js b/rollup.config.js index 3b5a9440..915fa2d9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -48,7 +48,7 @@ function CJS() { ), external: [ "@emotion/cache", - "@emotion/core", + "@emotion/react", "@popperjs/core", "@popperjs/core/lib/utils/computeAutoPlacement", "@popperjs/core/lib/utils/detectOverflow", @@ -100,7 +100,7 @@ function CJS() { "@babel/preset-react", { runtime: "classic", - importSource: "@emotion/core", + importSource: "@emotion/react", }, ], ], diff --git a/src/AbstractTooltip/abstractTooltip/TippyStyles.tsx b/src/AbstractTooltip/abstractTooltip/TippyStyles.tsx index 2de4331c..7035b5e5 100644 --- a/src/AbstractTooltip/abstractTooltip/TippyStyles.tsx +++ b/src/AbstractTooltip/abstractTooltip/TippyStyles.tsx @@ -2,7 +2,7 @@ import "../../../node_modules/tippy.js/dist/tippy.css"; import React from "react"; import { base } from "../../typography"; import { colors } from "../../colors"; -import { Global, css } from "@emotion/core"; +import { Global, css } from "@emotion/react"; export const TippyStyles: React.FC = () => ( { diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index f246e79d..6d67ad5e 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -3,7 +3,7 @@ import { colors, ShadedColor } from "../colors"; import type { Property, SimplePseudos } from "csstype"; import { base } from "../typography"; -import { ClassNames, jsx, ObjectInterpolation } from "@emotion/core"; +import { ClassNames, jsx, CSSObject } from "@emotion/react"; import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette"; import tinycolor from "tinycolor2"; import React, { useState } from "react"; @@ -353,7 +353,7 @@ export const Button = React.forwardRef( : colors.grey.light, }; - const focusedStyles: ObjectInterpolation = { + const focusedStyles: CSSObject = { ...(feel === "flat" && { backgroundColor: theme === "light" ? colors.white : "#000", color: theme === "light" ? colors.blue.base : colors.blue.light, diff --git a/src/Button/button.stories/ButtonLayout.tsx b/src/Button/button.stories/ButtonLayout.tsx index 2b73c381..75249e77 100644 --- a/src/Button/button.stories/ButtonLayout.tsx +++ b/src/Button/button.stories/ButtonLayout.tsx @@ -1,4 +1,4 @@ -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import React from "react"; import { Button } from "../Button"; import { colors } from "../../colors"; diff --git a/src/Button/button/ButtonIcon.tsx b/src/Button/button/ButtonIcon.tsx index 87de6315..9175992b 100644 --- a/src/Button/button/ButtonIcon.tsx +++ b/src/Button/button/ButtonIcon.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import React from "react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; interface ButtonIconProps extends Pick< diff --git a/src/Card/Card.tsx b/src/Card/Card.tsx index bfb15f9b..676f279a 100644 --- a/src/Card/Card.tsx +++ b/src/Card/Card.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import { colors } from "../colors"; import { base } from "../typography"; -import { jsx, ClassNames } from "@emotion/core"; +import { jsx, ClassNames } from "@emotion/react"; import React from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; diff --git a/src/FeatureIntroContent/index.tsx b/src/FeatureIntroContent/index.tsx index 535a5710..97e5d628 100644 --- a/src/FeatureIntroContent/index.tsx +++ b/src/FeatureIntroContent/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import * as React from "react"; import * as typography from "../typography"; -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import { colors } from "../colors"; import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext"; diff --git a/src/FeatureIntroControl/FeatureIntroControl.stories.mdx b/src/FeatureIntroControl/FeatureIntroControl.stories.mdx index d34c359c..2932cb07 100644 --- a/src/FeatureIntroControl/FeatureIntroControl.stories.mdx +++ b/src/FeatureIntroControl/FeatureIntroControl.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { FeatureIntroControl } from "../FeatureIntroControl"; import { FeatureIntroContent } from "../FeatureIntroContent"; import { FeatureIntroHeading } from "../FeatureIntroHeading"; diff --git a/src/FeatureIntroControl/index.tsx b/src/FeatureIntroControl/index.tsx index 69a3ff52..63d359ae 100644 --- a/src/FeatureIntroControl/index.tsx +++ b/src/FeatureIntroControl/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import React, { useMemo } from "react"; import { colors } from "../colors"; -import { ClassNames, jsx } from "@emotion/core"; +import { ClassNames, jsx } from "@emotion/react"; import { As, createElementFromAs } from "../shared/createElementFromAs"; import { FeatureIntroControlContextProvider, diff --git a/src/FeatureIntroDismissButton/index.tsx b/src/FeatureIntroDismissButton/index.tsx index 5411aba3..439f7589 100644 --- a/src/FeatureIntroDismissButton/index.tsx +++ b/src/FeatureIntroDismissButton/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import * as React from "react"; import * as typography from "../typography"; -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import { colors } from "../colors"; import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext"; diff --git a/src/FeatureIntroHeading/index.tsx b/src/FeatureIntroHeading/index.tsx index 0a50c5ce..f12f4a86 100644 --- a/src/FeatureIntroHeading/index.tsx +++ b/src/FeatureIntroHeading/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import * as React from "react"; import * as typography from "../typography"; -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import { colors } from "../colors"; import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext"; diff --git a/src/FeatureIntroImage/index.tsx b/src/FeatureIntroImage/index.tsx index 2185e379..13893f76 100644 --- a/src/FeatureIntroImage/index.tsx +++ b/src/FeatureIntroImage/index.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import * as React from "react"; -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext"; interface Props diff --git a/src/FeatureIntroLearnMoreLink/index.tsx b/src/FeatureIntroLearnMoreLink/index.tsx index 8b4f4c1c..948a5744 100644 --- a/src/FeatureIntroLearnMoreLink/index.tsx +++ b/src/FeatureIntroLearnMoreLink/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import * as React from "react"; import * as typography from "../typography"; -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import { colors } from "../colors"; import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext"; import { As, createElementFromAs } from "../shared/createElementFromAs"; diff --git a/src/FormControl/index.tsx b/src/FormControl/index.tsx index e48ff752..548eb7aa 100644 --- a/src/FormControl/index.tsx +++ b/src/FormControl/index.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ /** @jsxFrag React.Fragment */ -import { ClassNames, jsx } from "@emotion/core"; +import { ClassNames, jsx } from "@emotion/react"; import React from "react"; import { As, createElementFromAs } from "../shared/createElementFromAs"; import { diff --git a/src/FormDescription/index.tsx b/src/FormDescription/index.tsx index 99988e33..db5b5e89 100644 --- a/src/FormDescription/index.tsx +++ b/src/FormDescription/index.tsx @@ -2,7 +2,7 @@ /** @jsxFrag React.Fragment */ import * as React from "react"; import * as typography from "../typography"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { colors } from "../colors"; import { useFormControlInternalContext } from "../shared/FormControlContext"; diff --git a/src/FormEndAdornment/index.tsx b/src/FormEndAdornment/index.tsx index 0db230ca..6b973f47 100644 --- a/src/FormEndAdornment/index.tsx +++ b/src/FormEndAdornment/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ /** @jsxFrag React.Fragment */ import * as React from "react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { useFormControlInternalContext } from "../shared/FormControlContext"; /** diff --git a/src/FormErrorMessage/index.tsx b/src/FormErrorMessage/index.tsx index a1dfc4fb..b543b54d 100644 --- a/src/FormErrorMessage/index.tsx +++ b/src/FormErrorMessage/index.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as typography from "../typography"; import { colors } from "../colors"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { useFormControlInternalContext } from "../shared/FormControlContext"; import { IconWarningSolid } from "../icons/IconWarningSolid"; diff --git a/src/FormHelperText/index.tsx b/src/FormHelperText/index.tsx index dc48f0f1..72485040 100644 --- a/src/FormHelperText/index.tsx +++ b/src/FormHelperText/index.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as typography from "../typography"; import { colors } from "../colors"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { IconInfo } from "../icons/IconInfo"; import { useFormControlInternalContext } from "../shared/FormControlContext"; diff --git a/src/FormLabel/index.tsx b/src/FormLabel/index.tsx index c202724f..21cf6764 100644 --- a/src/FormLabel/index.tsx +++ b/src/FormLabel/index.tsx @@ -2,7 +2,7 @@ /** @jsxFrag React.Fragment */ import * as React from "react"; import * as typography from "../typography"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { useFormControlInternalContext } from "../shared/FormControlContext"; interface Props diff --git a/src/FormStartAdornment/index.tsx b/src/FormStartAdornment/index.tsx index 63633d61..c42e10a2 100644 --- a/src/FormStartAdornment/index.tsx +++ b/src/FormStartAdornment/index.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ /** @jsxFrag React.Fragment */ import * as React from "react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { useFormControlInternalContext } from "../shared/FormControlContext"; /** diff --git a/src/Input/index.tsx b/src/Input/index.tsx index 0db584af..7cddb63f 100644 --- a/src/Input/index.tsx +++ b/src/Input/index.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ /** @jsxFrag React.Fragment */ -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import React from "react"; import * as typography from "../typography"; import { colors } from "../colors"; diff --git a/src/List/index.tsx b/src/List/index.tsx index cd73e1b4..55c137e6 100644 --- a/src/List/index.tsx +++ b/src/List/index.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import React from "react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { ListConfigProvider, useListConfig } from "../ListConfig"; import { verticalListMarginFromPadding } from "../shared/verticalListMarginFromPadding"; import { assertUnreachable } from "../shared/assertUnreachable"; diff --git a/src/ListDivider/index.tsx b/src/ListDivider/index.tsx index 5b0baa02..50afe252 100644 --- a/src/ListDivider/index.tsx +++ b/src/ListDivider/index.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import React from "react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { colors } from "../colors"; import { ListItem } from "../ListItem"; import { useListConfig, ListConfigProvider } from "../ListConfig"; diff --git a/src/ListHeading/index.tsx b/src/ListHeading/index.tsx index bbbd144d..6306b3e4 100644 --- a/src/ListHeading/index.tsx +++ b/src/ListHeading/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-empty-interface */ /** @jsx jsx */ import React from "react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { colors } from "../colors"; import { ListItem } from "../ListItem"; diff --git a/src/ListItem/index.tsx b/src/ListItem/index.tsx index 2ce97fd0..b5b83492 100644 --- a/src/ListItem/index.tsx +++ b/src/ListItem/index.tsx @@ -1,6 +1,6 @@ import type { Property } from "csstype"; import React from "react"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { assertUnreachable } from "../shared/assertUnreachable"; import tinycolor from "tinycolor2"; import { colors } from "../colors"; diff --git a/src/Loaders/LoadingSpinner.tsx b/src/Loaders/LoadingSpinner.tsx index d095d9a3..bf157350 100644 --- a/src/Loaders/LoadingSpinner.tsx +++ b/src/Loaders/LoadingSpinner.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import React from "react"; import type { Property } from "csstype"; -import { jsx, keyframes } from "@emotion/core"; +import { jsx, keyframes } from "@emotion/react"; import { colors } from "../colors"; import { useSpaceKitProvider } from "../SpaceKitProvider"; diff --git a/src/Modal/Modal.story.tsx b/src/Modal/Modal.story.tsx index a5231b59..c30af46f 100644 --- a/src/Modal/Modal.story.tsx +++ b/src/Modal/Modal.story.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import { storiesOf } from "@storybook/react"; -import { css, jsx } from "@emotion/core"; +import { css, jsx } from "@emotion/react"; import { Modal } from "../Modal"; import React, { useState } from "react"; import { colors } from "../colors"; diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index deec356b..202b75d5 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { jsx, css, ClassNames } from "@emotion/core"; +import { jsx, css, ClassNames } from "@emotion/react"; import React, { useEffect } from "react"; import { motion, MotionProps } from "framer-motion"; import * as typography from "../typography"; diff --git a/src/Popover/popover/TippyPopoverStyles.tsx b/src/Popover/popover/TippyPopoverStyles.tsx index cb1500bf..feb4237e 100644 --- a/src/Popover/popover/TippyPopoverStyles.tsx +++ b/src/Popover/popover/TippyPopoverStyles.tsx @@ -2,7 +2,7 @@ import "../../../node_modules/tippy.js/dist/tippy.css"; import React from "react"; import { base } from "../../typography"; import { colors } from "../../colors"; -import { Global, css } from "@emotion/core"; +import { Global, css } from "@emotion/react"; export const TippyPopoverStyles: React.FC = () => ( = ({ return ( - {({ css }) => { - return renderListItem( + {({ css, cx }) => { + const listItem = renderListItem( { - className: css({ alignItems: "baseline" }), key: element.props.value || element.props.children, ...downshiftItemProps, highlighted: downshiftItemProps["aria-selected"] === "true", @@ -127,6 +126,15 @@ const ListItemWrapper: React.FC = ({ }, element, ); + + return React.cloneElement(listItem, { + className: cx( + listItem.props.className, + css` + align-items: baseline; + `, + ), + }); }} ); @@ -266,7 +274,7 @@ export const Select: React.FC = ({ disabled = false, feel, labelPropsCallbackRef, - listAs = } />, + listAs = , margin = "auto", matchTriggerWidth, onBlur, @@ -469,6 +477,17 @@ export const Select: React.FC = ({ listAs, { margin, + startIconAs: React.cloneElement( + listAs.props.startIconAs ||
, + { + className: cx( + css` + align-self: baseline; + `, + listAs.props.startIconAs?.props?.className, + ), + }, + ), truncate, ...getMenuProps(undefined, { suppressRefError: true }), ...(id && { id: `${id}-menu` }), diff --git a/src/Switch/index.tsx b/src/Switch/index.tsx index d44290c9..933a2540 100644 --- a/src/Switch/index.tsx +++ b/src/Switch/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { ShadedColor, colors } from "../colors"; import { useFocusRing } from "@react-aria/focus"; import { useSwitch } from "@react-aria/switch"; diff --git a/src/Switch/switch.story/Wrapper.tsx b/src/Switch/switch.story/Wrapper.tsx index 03201dfc..377eb15b 100644 --- a/src/Switch/switch.story/Wrapper.tsx +++ b/src/Switch/switch.story/Wrapper.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Switch } from "../../Switch"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { colors } from "../../colors"; import { mergeProps } from "@react-aria/utils"; import { assertUnreachable } from "../../shared/assertUnreachable"; diff --git a/src/Switch/switch/Label.tsx b/src/Switch/switch/Label.tsx index aa6fbd84..a2d3e578 100644 --- a/src/Switch/switch/Label.tsx +++ b/src/Switch/switch/Label.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; type LabelProps = React.DetailedHTMLProps< React.LabelHTMLAttributes, diff --git a/src/Table/Table.spec.tsx b/src/Table/Table.spec.tsx index 62790c5c..46d96045 100644 --- a/src/Table/Table.spec.tsx +++ b/src/Table/Table.spec.tsx @@ -2,11 +2,11 @@ import React from "react"; import { cleanup, render } from "@testing-library/react"; import "@testing-library/jest-dom"; import { Table } from "./Table"; -import { ClassNames } from "@emotion/core"; -import { matchers } from "jest-emotion"; +import { ClassNames } from "@emotion/react"; +import { matchers } from "@emotion/jest"; import { colors } from "../colors"; -// Add the custom matchers provided by 'jest-emotion' +// Add the custom matchers provided by '@emotion/jest' expect.extend(matchers); test("when passed headers in `columns`, should render them, even with no data", () => { diff --git a/src/Table/Table.stories.mdx b/src/Table/Table.stories.mdx index b5568e83..31bf7b84 100644 --- a/src/Table/Table.stories.mdx +++ b/src/Table/Table.stories.mdx @@ -1,4 +1,4 @@ -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { colors } from "../colors"; import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks"; import { Table } from "./Table"; diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index 0a51ba2f..06af4499 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -1,4 +1,4 @@ -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import React from "react"; import * as typography from "../typography"; import { colors } from "../colors"; diff --git a/src/TextField/TextField.tsx b/src/TextField/TextField.tsx index b4485aa0..1c30fd4a 100644 --- a/src/TextField/TextField.tsx +++ b/src/TextField/TextField.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { ClassNames, jsx } from "@emotion/core"; +import { ClassNames, jsx } from "@emotion/react"; import React from "react"; import * as typography from "../typography"; import { colors } from "../colors"; diff --git a/src/emotionCacheProviderFactory/emotionCacheProviderFactory.spec.tsx b/src/emotionCacheProviderFactory/emotionCacheProviderFactory.spec.tsx index 80b583ad..1ecbcd3f 100644 --- a/src/emotionCacheProviderFactory/emotionCacheProviderFactory.spec.tsx +++ b/src/emotionCacheProviderFactory/emotionCacheProviderFactory.spec.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ import "@testing-library/jest-dom"; import { emotionCacheProviderFactory } from "./index"; -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import { render } from "@testing-library/react"; test("when given no element, emotion should render classes into head", () => { diff --git a/src/emotionCacheProviderFactory/index.tsx b/src/emotionCacheProviderFactory/index.tsx index 31534910..63cd974d 100644 --- a/src/emotionCacheProviderFactory/index.tsx +++ b/src/emotionCacheProviderFactory/index.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { CacheProvider } from "@emotion/core"; +import { CacheProvider } from "@emotion/react"; import createCache from "@emotion/cache"; /** diff --git a/src/icons/icons.story/IconDemo.tsx b/src/icons/icons.story/IconDemo.tsx index 712669df..d47f7355 100644 --- a/src/icons/icons.story/IconDemo.tsx +++ b/src/icons/icons.story/IconDemo.tsx @@ -1,6 +1,6 @@ import * as typography from "../../typography"; import React from "react"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; import { colors } from "../../colors"; interface Props { diff --git a/src/icons/scripts/convert.ts b/src/icons/scripts/convert.ts index 4b3bdd99..c493c636 100644 --- a/src/icons/scripts/convert.ts +++ b/src/icons/scripts/convert.ts @@ -215,8 +215,8 @@ function createCSSAttribute(css: string): types.JSXAttribute { // manually when we write the file to disk. return typeScriptTpl.ast` ${imports} - import { jsx, css } from '@emotion/core'; - + import { jsx, css } from '@emotion/react'; + interface Props extends Omit, "css"> { /** * Weight to render the SVG in. Defaults to "normal" diff --git a/src/illustrations/scripts/convert.ts b/src/illustrations/scripts/convert.ts index feedb2c8..06ca76f3 100644 --- a/src/illustrations/scripts/convert.ts +++ b/src/illustrations/scripts/convert.ts @@ -186,7 +186,7 @@ All illustration components extends \`SVGSVGElement\` so that most props you'd w return typeScriptTpl.ast` ${imports} - import { jsx } from '@emotion/core'; + import { jsx } from '@emotion/react'; export const ${componentName} = React.forwardRef, "css">>( (props, ref) => ${jsx} diff --git a/src/pictograms/scripts/convert.ts b/src/pictograms/scripts/convert.ts index d387cc4f..94796814 100644 --- a/src/pictograms/scripts/convert.ts +++ b/src/pictograms/scripts/convert.ts @@ -113,7 +113,7 @@ All pictogram components extends \`SVGSVGElement\` so that most props you'd want return typeScriptTpl.ast` ${imports} - import { jsx } from '@emotion/core'; + import { jsx } from '@emotion/react'; export const ${componentName} = React.forwardRef, "css">>( (props, ref) => ${jsx} diff --git a/src/shared/DemoSection.tsx b/src/shared/DemoSection.tsx index 002c3b1d..90375db3 100644 --- a/src/shared/DemoSection.tsx +++ b/src/shared/DemoSection.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { jsx } from "@emotion/core"; +import { jsx } from "@emotion/react"; import React from "react"; import { colors } from "../colors"; import * as typography from "../typography"; diff --git a/src/shared/cloneElements.tsx b/src/shared/cloneElements.tsx index 55618485..2941ba2f 100644 --- a/src/shared/cloneElements.tsx +++ b/src/shared/cloneElements.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ClassNames } from "@emotion/core"; +import { ClassNames } from "@emotion/react"; /** * Clone elements in order. All `className`, `style`, and `css` props will be