Skip to content
Permalink
Browse files

feat: upgrading to styled-system v5 (#18)

* 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 committed Oct 22, 2019
1 parent e084012 commit 2b3ebd8b2f701a0c6e8b75ab6978ba936814f455
Showing with 1,195 additions and 971 deletions.
  1. +1 −0 @types/@styled-system/index.d.ts
  2. +1 −0 @types/@styled-system/should-forward-prop/index.d.ts
  3. +1 −0 @types/@styled-system/theme-get/index.d.ts
  4. +1 −0 @types/gulp-theo/index.d.ts
  5. +4 −0 @types/index.d.ts
  6. +4 −2 package.json
  7. +1 −1 packages/paste-core/components/anchor/package.json
  8. +1 −1 packages/paste-core/components/anchor/src/styles.ts
  9. +2 −1 packages/paste-core/components/button/package.json
  10. +2 −1 packages/paste-core/components/button/src/styles.ts
  11. +1 −2 packages/paste-core/components/heading/package.json
  12. +1 −2 packages/paste-core/components/input/package.json
  13. +1 −2 packages/paste-core/components/spinner/package.json
  14. +1 −1 packages/paste-core/utilities/absolute/package.json
  15. +1 −2 packages/paste-core/utilities/aspect-ratio/package.json
  16. +20 −53 packages/paste-core/utilities/box/__tests__/__snapshots__/box.test.tsx.snap
  17. +1 −1 packages/paste-core/utilities/box/package.json
  18. +32 −103 packages/paste-core/utilities/box/src/index.tsx
  19. +2 −1 packages/paste-core/utilities/media-object/package.json
  20. +2 −1 packages/paste-core/utilities/media-object/src/index.tsx
  21. +1 −2 packages/paste-core/utilities/screen-reader-only/package.json
  22. +1 −1 packages/paste-core/utilities/text/package.json
  23. +1 −2 packages/paste-icons/package.json
  24. +1 −1 packages/paste-theme/README.md
  25. +2 −2 packages/paste-theme/package.json
  26. +1 −1 packages/paste-theme/src/themeProvider.tsx
  27. +1 −1 packages/paste-types/package.json
  28. +2 −1 packages/paste-website/package.json
  29. +1 −1 packages/paste-website/src/components/DoDont.tsx
  30. +1 −1 packages/paste-website/src/components/Heading.tsx
  31. +1 −1 packages/paste-website/src/components/SiteLink.tsx
  32. +1 −1 packages/paste-website/src/components/StyledHr.tsx
  33. +1 −1 packages/paste-website/src/components/ThemeSwitcher.tsx
  34. +1 −1 packages/paste-website/src/components/Typography.tsx
  35. +1 −1 packages/paste-website/src/components/breadcrumb/index.tsx
  36. +1 −1 packages/paste-website/src/components/callout/styles.ts
  37. +1 −1 packages/paste-website/src/components/codeblock/index.tsx
  38. +1 −1 packages/paste-website/src/components/shortcodes/component-header/index.tsx
  39. +1 −1 packages/paste-website/src/components/shortcodes/live-preview/index.tsx
  40. +1 −1 packages/paste-website/src/components/shortcodes/table-of-contents/styles.ts
  41. +1 −1 packages/paste-website/src/components/site-wrapper/SiteBody.tsx
  42. +1 −1 packages/paste-website/src/components/site-wrapper/SiteFooter.tsx
  43. +1 −1 packages/paste-website/src/components/site-wrapper/SiteMain.tsx
  44. +1 −1 packages/paste-website/src/components/site-wrapper/sidebar/SidebarHeader.tsx
  45. +1 −1 packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.styles.ts
  46. +1 −1 packages/paste-website/src/components/table/index.tsx
  47. +1 −1 packages/paste-website/src/pages/index.tsx
  48. +1 −1 packages/paste-website/src/pages/tokens/theme-package.mdx
  49. +6 −1 tsconfig.json
  50. +0 −7 types/index.d.ts
  51. +1,079 −758 yarn.lock
@@ -0,0 +1 @@
declare module '@styled-system';
@@ -0,0 +1 @@
declare module '@styled-system/should-forward-prop';
@@ -0,0 +1 @@
declare module '@styled-system/theme-get';
@@ -0,0 +1 @@
declare module 'gulp-theo';
@@ -0,0 +1,4 @@
declare module '*.md' {
const value: string;
export default value;
}
@@ -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",
@@ -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",
@@ -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",
@@ -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`
@@ -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",
@@ -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';

@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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;
}
}
@@ -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"
>
@@ -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;
}

@@ -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) {
@@ -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
@@ -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;
@@ -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;
}
}
@@ -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;
@@ -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) {
@@ -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
@@ -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
@@ -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;
}
}

@@ -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) {
@@ -531,8 +498,8 @@ exports[`ZIndex it should render single values 1`] = `
}

.emotion-0 {
min-width: 0;
z-index: 10;
min-width: 0;
}

<div
@@ -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",

1 comment on commit 2b3ebd8

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.