diff --git a/babel.config.js b/babel.config.js index abd61769f..35406214d 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,9 +2,9 @@ module.exports = { presets: [ '@babel/env', '@babel/react', + '@emotion/babel-preset-css-prop', ], plugins: [ - 'emotion', '@babel/plugin-proposal-export-namespace-from', '@babel/plugin-proposal-export-default-from', ['@babel/plugin-proposal-class-properties', { 'loose': true }], diff --git a/docs/constants.md b/docs/constants.md index 35312a121..5192eb40c 100644 --- a/docs/constants.md +++ b/docs/constants.md @@ -2,9 +2,10 @@ ### Usage ```jsx +import { css } from '@emotion/core'; import { SPACING } from 'radiance-ui/lib/constants'; -
Hello World!
+
Hello World!
``` The following displays named imports and available values. diff --git a/docs/typography.md b/docs/typography.md index 7efbb31a2..138769990 100644 --- a/docs/typography.md +++ b/docs/typography.md @@ -29,7 +29,7 @@ designs specify that we do. In order to override the style, use the Using a `css` prop: ```jsx - + Override! ``` diff --git a/docs/typography_style.md b/docs/typography_style.md index 04674dfa4..9dafce271 100644 --- a/docs/typography_style.md +++ b/docs/typography_style.md @@ -28,8 +28,6 @@ export const Container = styled.div`
button
``` -**Note**: The above code uses [babel-emotion-plugin](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion) to write the `css` prop. - ### Proptypes diff --git a/jest.config.js b/jest.config.js index 1584921e3..c3424c81c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,7 @@ const { defaults } = require('jest-config'); module.exports = { + snapshotSerializers: ['jest-emotion'], setupTestFrameworkScriptFile: "tests/setupTests.js", testPathIgnorePatterns: [...defaults.testPathIgnorePatterns, "/lib/"], moduleNameMapper: { diff --git a/package.json b/package.json index c66988166..ba0b11953 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", + "@emotion/babel-preset-css-prop": "^10.0.7", "@storybook/addon-actions": "^4.0.0", "@storybook/addon-info": "^4.0.0", "@storybook/addon-knobs": "^4.0.0", @@ -68,10 +69,10 @@ "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", - "babel-plugin-emotion": "^9.2.11", "babel-plugin-transform-svg-import-to-string": "^0.0.1", "circular-dependency-plugin": "^5.0.2", "create-index": "PocketDerm/create-index#master", + "emotion": "^10.0.7", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "eslint": "^5.7.0", @@ -108,7 +109,6 @@ "dependencies": { "@emotion/core": "^10.0.6", "@emotion/styled": "^10.0.6", - "emotion": "^10.0.6", "prop-types": "^15.6.2", "react": "^16.6.0", "react-modal": "^3.8.1", diff --git a/rollup.config.js b/rollup.config.js index f9e21de03..77f8860c5 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -23,10 +23,10 @@ export default { format: 'umd', name: 'radianceUi', globals: { - emotion: 'emotion', + '@emtion/styled': 'styled', 'prop-types': 'PropTypes', react: 'React', - 'react-emotion': 'styled', + '@emotion/core': '@emotion/core', tinycolor2: 'tinycolor', }, }, @@ -54,10 +54,10 @@ export default { sizeSnapshot(), ], external: [ - 'emotion', + '@emotion/styled', 'prop-types', 'react', - 'react-emotion', + '@emotion/core', 'tinycolor2', ], }; diff --git a/src/.babelrc b/src/.babelrc index 5514bb651..90574cdf2 100644 --- a/src/.babelrc +++ b/src/.babelrc @@ -3,10 +3,8 @@ ["@babel/env", { "modules": false }], - "@babel/react" - ], - "plugins": [ - "emotion", + "@babel/react", + "@emotion/babel-preset-css-prop" ], "env": { "test": { diff --git a/src/shared-components/alert/__snapshots__/test.js.snap b/src/shared-components/alert/__snapshots__/test.js.snap index a4588feaa..3a9d9c5bf 100644 --- a/src/shared-components/alert/__snapshots__/test.js.snap +++ b/src/shared-components/alert/__snapshots__/test.js.snap @@ -65,12 +65,6 @@ exports[`Alert UI snapshots renders danger type and text 1`] = ` } } -.emotion-0 { - margin: 2.5px 1.5rem 0px 0px; - min-height: 1rem; - min-width: 1rem; -} - .emotion-1 { display: -webkit-box; display: -webkit-flex; @@ -80,6 +74,12 @@ exports[`Alert UI snapshots renders danger type and text 1`] = ` width: 100%; } +.emotion-0 { + margin: 2.5px 1.5rem 0px 0px; + min-height: 1rem; + min-width: 1rem; +} + .emotion-3 { -webkit-align-items: flex-start; -webkit-box-align: flex-start; @@ -249,12 +249,6 @@ exports[`Alert UI snapshots renders info type and text 1`] = ` } } -.emotion-0 { - margin: 2.5px 1.5rem 0px 0px; - min-height: 1rem; - min-width: 1rem; -} - .emotion-1 { display: -webkit-box; display: -webkit-flex; @@ -264,6 +258,12 @@ exports[`Alert UI snapshots renders info type and text 1`] = ` width: 100%; } +.emotion-0 { + margin: 2.5px 1.5rem 0px 0px; + min-height: 1rem; + min-width: 1rem; +} + .emotion-3 { -webkit-align-items: flex-start; -webkit-box-align: flex-start; @@ -367,12 +367,6 @@ exports[`Alert UI snapshots renders success type and text 1`] = ` } } -.emotion-0 { - margin: 2.5px 1.5rem 0px 0px; - min-height: 1rem; - min-width: 1rem; -} - .emotion-3 { -webkit-align-items: flex-start; -webkit-box-align: flex-start; @@ -432,6 +426,12 @@ exports[`Alert UI snapshots renders success type and text 1`] = ` width: 100%; } +.emotion-0 { + margin: 2.5px 1.5rem 0px 0px; + min-height: 1rem; + min-width: 1rem; +} +
{text} diff --git a/src/shared-components/button/__snapshots__/test.js.snap b/src/shared-components/button/__snapshots__/test.js.snap index a81d515c0..cc80a3cf2 100644 --- a/src/shared-components/button/__snapshots__/test.js.snap +++ b/src/shared-components/button/__snapshots__/test.js.snap @@ -91,11 +91,7 @@ exports[`

Button Text

diff --git a/src/shared-components/button/components/roundButton/index.js b/src/shared-components/button/components/roundButton/index.js index c260ea2e6..f1d9aeac0 100644 --- a/src/shared-components/button/components/roundButton/index.js +++ b/src/shared-components/button/components/roundButton/index.js @@ -62,7 +62,7 @@ const RoundButton = ({ loading={loading} disabled={disabled} buttonType={buttonType} - css={[roundButtonLoader(disabled)]} + css={roundButtonLoader(disabled)} textColor={textColor} /> diff --git a/src/shared-components/button/index.js b/src/shared-components/button/index.js index ed1a6a945..e5bffe798 100644 --- a/src/shared-components/button/index.js +++ b/src/shared-components/button/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { css } from '@emotion/core'; import Loader from './shared-components/loader'; import Container from './shared-components/container'; @@ -58,7 +59,7 @@ class Button extends React.Component { {children} diff --git a/src/shared-components/selectorButton/__snapshots__/test.js.snap b/src/shared-components/selectorButton/__snapshots__/test.js.snap index 83af7810f..313e2373d 100644 --- a/src/shared-components/selectorButton/__snapshots__/test.js.snap +++ b/src/shared-components/selectorButton/__snapshots__/test.js.snap @@ -1,18 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` UI snapshots when checked type is primary 1`] = ` -.emotion-0 { - color: #ffffff; - cursor: pointer; - fill: currentColor; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - .emotion-7 { -webkit-align-items: center; -webkit-box-align: center; @@ -62,6 +50,18 @@ exports[` UI snapshots when checked type is primary 1`] = ` text-align: left; } +.emotion-0 { + cursor: pointer; + fill: currentColor; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + color: #ffffff; +} + .emotion-1 { -webkit-align-items: center; -webkit-box-align: center; @@ -127,18 +127,6 @@ exports[` UI snapshots when checked type is primary 1`] = ` `; exports[` UI snapshots when checked type is secondary 1`] = ` -.emotion-0 { - color: #ffffff; - cursor: pointer; - fill: currentColor; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - .emotion-7 { -webkit-align-items: center; -webkit-box-align: center; @@ -188,6 +176,18 @@ exports[` UI snapshots when checked type is secondary 1`] = ` text-align: left; } +.emotion-0 { + cursor: pointer; + fill: currentColor; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + color: #ffffff; +} + .emotion-1 { -webkit-align-items: center; -webkit-box-align: center; @@ -253,18 +253,6 @@ exports[` UI snapshots when checked type is secondary 1`] = ` `; exports[` UI snapshots when children is a node 1`] = ` -.emotion-0 { - color: transparent; - cursor: pointer; - fill: currentColor; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - .emotion-7 { -webkit-align-items: center; -webkit-box-align: center; @@ -307,6 +295,18 @@ exports[` UI snapshots when children is a node 1`] = ` position: relative; } +.emotion-0 { + cursor: pointer; + fill: currentColor; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + color: transparent; +} + .emotion-1 { -webkit-align-items: center; -webkit-box-align: center; @@ -379,18 +379,6 @@ exports[` UI snapshots when children is a node 1`] = ` `; exports[` UI snapshots when children is undefined 1`] = ` -.emotion-0 { - color: transparent; - cursor: pointer; - fill: currentColor; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - .emotion-5 { -webkit-align-items: center; -webkit-box-align: center; @@ -433,6 +421,18 @@ exports[` UI snapshots when children is undefined 1`] = ` position: relative; } +.emotion-0 { + cursor: pointer; + fill: currentColor; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + color: transparent; +} + .emotion-1 { -webkit-align-items: center; -webkit-box-align: center; @@ -493,18 +493,6 @@ exports[` UI snapshots when children is undefined 1`] = ` `; exports[` UI snapshots when is checkbox 1`] = ` -.emotion-0 { - color: transparent; - cursor: pointer; - fill: currentColor; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - .emotion-3 { -webkit-align-items: center; -webkit-box-align: center; @@ -521,6 +509,18 @@ exports[` UI snapshots when is checkbox 1`] = ` position: relative; } +.emotion-0 { + cursor: pointer; + fill: currentColor; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + color: transparent; +} + .emotion-5 { margin-left: 1rem; margin-top: 0.25rem; diff --git a/src/shared-components/selectorButton/index.js b/src/shared-components/selectorButton/index.js index 0f19d0b89..734fc6383 100644 --- a/src/shared-components/selectorButton/index.js +++ b/src/shared-components/selectorButton/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { css } from '@emotion/core'; import CheckmarkIcon from '../../svgs/icons/checkmark-icon.svg'; import { COLORS } from '../../constants'; @@ -45,9 +46,9 @@ const SelectorButton = ({ > { + const ${componentName} = (props) => { ${deprecationNotice} return ( diff --git a/stories/accordion/defaultAccordion.js b/stories/accordion/defaultAccordion.js index b3fe70226..dea3ce6ef 100644 --- a/stories/accordion/defaultAccordion.js +++ b/stories/accordion/defaultAccordion.js @@ -1,4 +1,5 @@ import React from 'react'; +import { css } from '@emotion/core'; import { Accordion } from 'src/shared-components'; @@ -20,7 +21,7 @@ class DefaultAccordion extends React.Component { } = this.state; return ( -
+
( -
+
- + With Knobs -
+
( - - + + Without Icon @@ -40,8 +41,8 @@ stories.add( - - + + With Icon @@ -72,7 +73,7 @@ stories.add( - + With Knobs