Skip to content

Commit

Permalink
feat: add transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregberge
gregberge committed May 30, 2019
1 parent d0074ee commit be415b2
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 22 deletions.
18 changes: 9 additions & 9 deletions packages/styled-components/.size-snapshot.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,22 @@
"gzipped": 1185
},
"dist/xstyled.es.js": {
"bundled": 5601,
"minified": 3439,
"gzipped": 1335,
"bundled": 5664,
"minified": 3478,
"gzipped": 1346,
"treeshaked": {
"rollup": {
"code": 2211,
"import_statements": 364
"code": 2243,
"import_statements": 383
},
"webpack": {
"code": 3252
"code": 3279
}
}
},
"dist/xstyled.cjs.js": {
"bundled": 7328,
"minified": 4836,
"gzipped": 1464
"bundled": 7383,
"minified": 4868,
"gzipped": 1475
}
}
4 changes: 4 additions & 0 deletions packages/styled-components/src/propGetters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
getLineHeight,
getFontWeight,
getLetterSpacing,
getTransition,
} from '@xstyled/system'

const getNumber = transform => value => {
Expand Down Expand Up @@ -95,4 +96,7 @@ export const propGetters = {

// getLetterSpacing
'letter-spacing': getNumber(getLetterSpacing),

// getTransition
transition: getTransition,
}
14 changes: 7 additions & 7 deletions packages/system/.size-snapshot.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,22 @@
"gzipped": 4360
},
"dist/xstyled-system.es.js": {
"bundled": 22735,
"minified": 13103,
"gzipped": 3719,
"bundled": 22969,
"minified": 13275,
"gzipped": 3748,
"treeshaked": {
"rollup": {
"code": 18,
"import_statements": 18
},
"webpack": {
"code": 2820
"code": 2860
}
}
},
"dist/xstyled-system.cjs.js": {
"bundled": 25313,
"minified": 15402,
"gzipped": 4224
"bundled": 25592,
"minified": 15615,
"gzipped": 4265
}
}
5 changes: 5 additions & 0 deletions packages/system/src/styles/basics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ export const overflow = style({
prop: 'overflow',
})

export const getTransition = themeGetter({ key: 'transitions' })

export const transition = style({ prop: 'transition', themeGet: getTransition })

export const basics = compose(
opacity,
overflow,
transition,
)
2 changes: 2 additions & 0 deletions packages/system/src/th.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
getLineHeight,
getFontWeight,
getLetterSpacing,
getTransition,
} from './styles/index'

export const th = path => props => {
Expand All @@ -38,3 +39,4 @@ th.fontSize = getFontSize
th.lineHeight = getLineHeight
th.fontWeight = getFontWeight
th.letterSpacing = getLetterSpacing
th.transition = getTransition
12 changes: 12 additions & 0 deletions packages/system/tests/styled-components/styles.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,6 +447,18 @@ describe('styles', () => {
expectations: [[1, '1'], [0.2, '0.2']],
},
],
[
'transition',
{
styleRule: 'transition',
theme: {
transitions: {
color: 'color 500ms',
},
},
expectations: [['all 300ms', 'all 300ms'], ['color', 'color 500ms']],
},
],
])('#%s', (name, config) => {
const Dummy = styled.div`
${styles[name]};
Expand Down
8 changes: 8 additions & 0 deletions packages/system/tests/styled-components/th.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,14 @@ describe('#th', () => {
theme: { letterSpacings: { sm: 2 } },
},
],
[
'transition',
{
cssProp: 'transition',
expectations: [['all 300ms', 'all 300ms'], ['color', 'color 500ms']],
theme: { transitions: { color: 'color 500ms' } },
},
],
])('#%s', (name, config) => {
const util = th[name]

Expand Down
1 change: 1 addition & 0 deletions website/src/pages/docs/system-props.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ Available basic utilities:

- `opacity`
- `overflow`
- `transition`
- `basics`: all basic utilities

## Theme specification
Expand Down
13 changes: 7 additions & 6 deletions website/src/pages/docs/theme-specification.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,18 @@ xstyled follows [system-ui specification](https://system-ui.com/theme/). It make

| Theme Key | CSS Properties |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| space | margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap |
| fontSizes | font-size |
| borders | border, border-top, border-right, border-bottom, border-left |
| borderStyles | border-style |
| borderWidths | border-width |
| colors | color, background-color, border-color |
| fonts | font-family |
| fontSizes | font-size |
| fontWeights | font-weight |
| lineHeights | line-height |
| letterSpacings | letter-spacing |
| lineHeights | line-height |
| sizes | width, height, min-width, max-width, min-height, max-height |
| borders | border, border-top, border-right, border-bottom, border-left |
| borderWidths | border-width |
| borderStyles | border-style |
| radii | border-radius |
| shadows | box-shadow, text-shadow |
| space | margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap |
| transitions | transition |
| zIndices | z-index |

0 comments on commit be415b2

Please sign in to comment.