Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Emotion v10] Finish upgrading all things to emotion 10 #51

Merged
merged 2 commits into from
Feb 14, 2019
Merged

[Emotion v10] Finish upgrading all things to emotion 10 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
deeafce
use new serializer and update all the things to emotion v10
snags88 Feb 6, 2019
3c79a0e
Merge branch 'master' into update-jest-emotion
snags88 Feb 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }],
Expand Down
3 changes: 2 additions & 1 deletion docs/constants.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
### Usage

```jsx
import { css } from '@emotion/core';
import { SPACING } from 'radiance-ui/lib/constants';

<div css={`padding: ${SPACING.small}`}>Hello World!</div>
<div css={css`padding: ${SPACING.small}`}>Hello World!</div>
```

The following displays named imports and available values.
Expand Down
2 changes: 1 addition & 1 deletion docs/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ designs specify that we do. In order to override the style, use the

Using a `css` prop:
```jsx
<Typography.Display css={ color: COLORS.failure }>
<Typography.Display css={css`color: ${COLORS.failure};`}>
Override!
</Typography.Display>
```
2 changes: 0 additions & 2 deletions docs/typography_style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ export const Container = styled.div`
<div css={`TYPOGRAPHY_STYLE.button`}>button</div>
```

**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.

<!-- STORY -->

### Proptypes
Expand Down
1 change: 1 addition & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const { defaults } = require('jest-config');

module.exports = {
snapshotSerializers: ['jest-emotion'],
setupTestFrameworkScriptFile: "<rootDir>tests/setupTests.js",
testPathIgnorePatterns: [...defaults.testPathIgnorePatterns, "/lib/"],
moduleNameMapper: {
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
Expand Down Expand Up @@ -54,10 +54,10 @@ export default {
sizeSnapshot(),
],
external: [
'emotion',
'@emotion/styled',
'prop-types',
'react',
'react-emotion',
'@emotion/core',
'tinycolor2',
],
};
6 changes: 2 additions & 4 deletions src/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
["@babel/env", {
"modules": false
}],
"@babel/react"
],
"plugins": [
"emotion",
"@babel/react",
"@emotion/babel-preset-css-prop"
],
"env": {
"test": {
Expand Down
36 changes: 18 additions & 18 deletions src/shared-components/alert/__snapshots__/test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

<div
className="emotion-3 emotion-4"
onClick={[Function]}
Expand Down
3 changes: 2 additions & 1 deletion src/shared-components/alert/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ErrorIcon from '../../svgs/icons/error-icon.svg';
Expand Down Expand Up @@ -82,7 +83,7 @@ class Alert extends React.Component {
>
<AlertContentContainer>
<Icon
css={[alertIconStyles]}
css={css`${alertIconStyles};`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you clarify something? alertIconStyles is created in style.js using css. Is there a difference between creating it with css vs wrapping in css here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh nope, there's not. Both ways here are valid. https://emotion.sh/docs/composition

I just did a global search on css= and updated all of it to use the template literal.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

fill="currentColor"
/>
{text}
Expand Down
41 changes: 19 additions & 22 deletions src/shared-components/button/__snapshots__/test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,7 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
}
}

.emotion-0 {
padding-top: 2px;
}

.emotion-7 {
.emotion-6 {
color: #5C5876;
font-size: 0.75rem;
line-height: 1.67;
Expand Down Expand Up @@ -134,23 +130,23 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
fill: #c3c0cd;
}

.emotion-7:hover {
.emotion-6:hover {
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}

.emotion-7:active,
.emotion-7:focus {
.emotion-6:active,
.emotion-6:focus {
outline: none;
}

.emotion-7:visited,
.emotion-7:hover {
.emotion-6:visited,
.emotion-6:hover {
opacity: 1;
color: #c3c0cd;
}

.emotion-3 {
.emotion-2 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand All @@ -174,21 +170,22 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
transform: translateX(0);
}

.emotion-3 > svg {
.emotion-2 > svg {
opacity: 1;
-webkit-transition: opacity 350ms;
transition: opacity 350ms;
margin-right: 1rem;
margin-top: -5px;
}

.emotion-1 {
.emotion-0 {
line-height: 1.5;
margin: 0;
padding-top: 2px;
padding-top: 2px;
}

.emotion-5 {
.emotion-4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -210,37 +207,37 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
opacity: 0;
}

.emotion-5 span {
.emotion-4 span {
border-radius: 50%;
display: inline-block;
height: 4px;
width: 4px;
position: absolute;
}

.emotion-5 span:nth-of-type(1) {
.emotion-4 span:nth-of-type(1) {
-webkit-animation: animation-0 1750ms infinite linear;
animation: animation-0 1750ms infinite linear;
}

.emotion-5 span:nth-of-type(2) {
.emotion-4 span:nth-of-type(2) {
-webkit-animation: animation-0 1750ms infinite linear -300ms;
animation: animation-0 1750ms infinite linear -300ms;
}

.emotion-5 span:nth-of-type(3) {
.emotion-4 span:nth-of-type(3) {
-webkit-animation: animation-0 1750ms infinite linear -600ms;
animation: animation-0 1750ms infinite linear -600ms;
}

<button
className="emotion-7 emotion-8"
className="emotion-6 emotion-7"
disabled={true}
onClick={[Function]}
type="button"
>
<div
className="emotion-3 emotion-4"
className="emotion-2 emotion-3"
>
<<svg viewBox="0 0 14 14"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -251,13 +248,13 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
</svg>
/>
<span
className="emotion-0 emotion-1 emotion-2"
className="emotion-0 emotion-1"
>
Button Text
</span>
</div>
<div
className="emotion-5 emotion-6"
className="emotion-4 emotion-5"
disabled={true}
>
<div>
Expand Down
Loading