Skip to content

Commit

Permalink
feat: upgrading to styled-system v5 (#18)
Browse files Browse the repository at this point in the history 
* chore: upgrade to styled-system v5

* chore: yarn.lock

* fix: undo prettier changes

* fix: remove unneeded peerDep

* feat: update box to styled-system v5; improves perf

* fix: border-color value in CSS

* test(box): update snapshot
  • Loading branch information
@TheSisb
TheSisb committed Oct 22, 2019
1 parent e084012 commit 2b3ebd8
Show file tree
Hide file tree
Showing 51 changed files with 1,195 additions and 971 deletions.
1 change: 1 addition & 0 deletions @types/@styled-system/index.d.ts
View file
@@ -0,0 +1 @@
declare module '@styled-system';
1 change: 1 addition & 0 deletions @types/@styled-system/should-forward-prop/index.d.ts
View file
@@ -0,0 +1 @@
declare module '@styled-system/should-forward-prop';
1 change: 1 addition & 0 deletions @types/@styled-system/theme-get/index.d.ts
View file
@@ -0,0 +1 @@
declare module '@styled-system/theme-get';
1 change: 1 addition & 0 deletions @types/gulp-theo/index.d.ts
View file
@@ -0,0 +1 @@
declare module 'gulp-theo';
4 changes: 4 additions & 0 deletions @types/index.d.ts
View file
@@ -0,0 +1,4 @@
declare module '*.md' {
const value: string;
export default value;
}
6 changes: 4 additions & 2 deletions package.json
View file
Expand Up @@ -47,7 +47,9 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-uid": "^2.2.0",
"styled-system": "^4.1.0"
"styled-system": "^5.1.2",
"@styled-system/theme-get": "^5.1.2",
"@styled-system/css": "^5.0.23"
},
"devDependencies": {
"@applitools/eyes-storybook": "^2.8.6",
Expand Down Expand Up @@ -78,7 +80,7 @@
"@types/storybook__addon-actions": "^3.4.3",
"@types/storybook__addon-info": "^4.1.2",
"@types/storybook__react": "^4.0.2",
"@types/styled-system": "^4.1.0",
"@types/styled-system": "^5.1.2",
"@types/webpack": "^4.4.34",
"@types/webpack-env": "^1.13.9",
"@typescript-eslint/eslint-plugin": "^1.11.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/anchor/package.json
View file
Expand Up @@ -31,7 +31,7 @@
"@emotion/styled": "^10.0.10",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"@styled-system/theme-get": "^5.1.2"
},
"devDependencies": {
"rollup": "^1.16.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/anchor/src/styles.ts
View file
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {themeGet} from '@styled-system/theme-get';

// Link
export const StyledLink = styled.a`
Expand Down
3 changes: 2 additions & 1 deletion packages/paste-core/components/button/package.json
View file
Expand Up @@ -29,11 +29,12 @@
"peerDependencies": {
"@emotion/core": "^10.0.10",
"@emotion/styled": "^10.0.10",
"@styled-system/theme-get": "^5.1.2",
"@twilio-paste/absolute": "^0.0.1",
"@twilio-paste/spinner": "^0.1.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"styled-system": "^5.1.2"
},
"devDependencies": {
"@twilio-paste/absolute": "^0.2.0",
Expand Down
3 changes: 2 additions & 1 deletion packages/paste-core/components/button/src/styles.ts
View file
@@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import {css, SerializedStyles} from '@emotion/core';
import {buttonStyle, themeGet} from 'styled-system';
import {buttonStyle} from 'styled-system';
import {themeGet} from '@styled-system/theme-get';
import {Absolute} from '@twilio-paste/absolute';
import {ButtonWrapperProps, ButtonChildrenProps} from './types';

Expand Down
3 changes: 1 addition & 2 deletions packages/paste-core/components/heading/package.json
View file
Expand Up @@ -31,8 +31,7 @@
"@emotion/styled": "^10.0.10",
"@twilio-paste/text": "^0.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"react-dom": "^16.8.6"
},
"devDependencies": {
"@twilio-paste/text": "^0.4.1",
Expand Down
3 changes: 1 addition & 2 deletions packages/paste-core/components/input/package.json
View file
Expand Up @@ -28,8 +28,7 @@
"@emotion/core": "^10.0.10",
"@emotion/styled": "^10.0.10",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"react-dom": "^16.8.6"
},
"devDependencies": {
"rollup": "^1.16.2",
Expand Down
3 changes: 1 addition & 2 deletions packages/paste-core/components/spinner/package.json
View file
Expand Up @@ -32,8 +32,7 @@
"@twilio-paste/icons": "^0.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-uid": "^2.2.0",
"styled-system": "^4.1.0"
"react-uid": "^2.2.0"
},
"devDependencies": {
"@twilio-paste/icons": "^0.3.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/utilities/absolute/package.json
View file
Expand Up @@ -31,7 +31,7 @@
"@twilio-paste/box": "^0.2.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"styled-system": "^5.1.2"
},
"devDependencies": {
"@twilio-paste/box": "^0.3.1",
Expand Down
3 changes: 1 addition & 2 deletions packages/paste-core/utilities/aspect-ratio/package.json
View file
Expand Up @@ -30,8 +30,7 @@
"@emotion/styled": "^10.0.10",
"@twilio-paste/absolute": "^0.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"react-dom": "^16.8.6"
},
"devDependencies": {
"@twilio-paste/absolute": "^0.2.0",
Expand Down
73 changes: 20 additions & 53 deletions packages/paste-core/utilities/box/__tests__/__snapshots__/box.test.tsx.snap
View file
Expand Up @@ -81,19 +81,18 @@ exports[`Borders it should render responsive values 1`] = `
}
.emotion-0 {
border-width: 1px;
border-style: dashed;
border-color: colorBorderPrimaryDark;
border-radius: 0;
border-color: #005ea6;
border-width: 1px;
border-radius: 0;
min-width: 0;
}
@media screen and (min-width:25rem) {
.emotion-0 {
border-width: 2px;
border-style: dotted;
border-color: colorBorderPrimaryLight;
border-color: #b3d3e9;
border-width: 2px;
border-radius: 3px;
}
}
Expand All @@ -104,12 +103,6 @@ exports[`Borders it should render responsive values 1`] = `
}
}
@media screen and (min-width:25rem) {
.emotion-0 {
border-color: #b3d3e9;
}
}
<div
className="emotion-2"
>
Expand All @@ -136,11 +129,10 @@ exports[`Borders it should render single values 1`] = `
}
.emotion-0 {
border-width: 1px;
border-style: solid;
border-color: colorBorderPrimaryDark;
border-radius: 4px;
border-color: #005ea6;
border-width: 1px;
border-radius: 4px;
min-width: 0;
}
Expand Down Expand Up @@ -170,8 +162,8 @@ exports[`Shadows it should render responsive values 1`] = `
}
.emotion-0 {
min-width: 0;
box-shadow: 0 2px 4px 0 rgba(40,42,43,0.3);
min-width: 0;
}
@media screen and (min-width:25rem) {
Expand Down Expand Up @@ -206,8 +198,8 @@ exports[`Shadows it should render single values 1`] = `
}
.emotion-0 {
min-width: 0;
box-shadow: 0 2px 4px 0 rgba(40,42,43,0.3);
min-width: 0;
}
<div
Expand Down Expand Up @@ -236,7 +228,7 @@ exports[`Sizes it should render responsive values 1`] = `
}
.emotion-0 {
width: size10;
width: 5.5rem;
min-width: 0;
max-width: 12rem;
height: 5.5rem;
Expand All @@ -246,36 +238,11 @@ exports[`Sizes it should render responsive values 1`] = `
@media screen and (min-width:25rem) {
.emotion-0 {
width: size20;
}
}
@media screen and (min-width:25rem) {
.emotion-0 {
width: 12rem;
min-width: 5.5rem;
}
}
@media screen and (min-width:25rem) {
.emotion-0 {
max-width: 18.5rem;
}
}
@media screen and (min-width:25rem) {
.emotion-0 {
height: 12rem;
}
}
@media screen and (min-width:25rem) {
.emotion-0 {
min-height: 5.5rem;
}
}
@media screen and (min-width:25rem) {
.emotion-0 {
max-height: 18.5rem;
}
}
Expand Down Expand Up @@ -318,7 +285,7 @@ exports[`Sizes it should render single values 1`] = `
}
.emotion-0 {
width: size10;
width: 5.5rem;
min-width: 0;
max-width: 12rem;
height: 5.5rem;
Expand Down Expand Up @@ -354,8 +321,8 @@ exports[`Spaces (A) it should render responsive values 1`] = `
}
.emotion-0 {
min-width: 0;
margin: 0.25rem;
min-width: 0;
}
@media screen and (min-width:25rem) {
Expand Down Expand Up @@ -390,8 +357,8 @@ exports[`Spaces (A) it should render single values 1`] = `
}
.emotion-0 {
min-width: 0;
margin: 0.25rem;
min-width: 0;
}
<div
Expand Down Expand Up @@ -420,11 +387,11 @@ exports[`Spaces (B) it should render single values 1`] = `
}
.emotion-0 {
min-width: 0;
margin-top: 0.25rem;
margin-right: 0.25rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.25rem;
min-width: 0;
}
<div
Expand Down Expand Up @@ -453,19 +420,19 @@ exports[`Spaces (B)it should render responsive values 1`] = `
}
.emotion-0 {
min-width: 0;
margin-top: 0.25rem;
margin-right: 0.25rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.25rem;
min-width: 0;
}
@media screen and (min-width:25rem) {
.emotion-0 {
margin-top: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.75rem;
margin-left: 0.75rem;
margin-right: 0.5rem;
}
}
Expand Down Expand Up @@ -495,8 +462,8 @@ exports[`ZIndex it should render responsive values 1`] = `
}
.emotion-0 {
min-width: 0;
z-index: 10;
min-width: 0;
}
@media screen and (min-width:25rem) {
Expand Down Expand Up @@ -531,8 +498,8 @@ exports[`ZIndex it should render single values 1`] = `
}
.emotion-0 {
min-width: 0;
z-index: 10;
min-width: 0;
}
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/utilities/box/package.json
View file
Expand Up @@ -31,7 +31,7 @@
"@twilio-paste/types": "^0.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
"styled-system": "^5.1.2"
},
"devDependencies": {
"@twilio-paste/types": "^0.0.1",
Expand Down

1 comment on commit 2b3ebd8

@vercel
Copy link

@vercel vercel bot commented on 2b3ebd8 Oct 22, 2019

Choose a reason for hiding this comment

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

Successfully deployed to following URLs:

Please sign in to comment.