Skip to content

Commit 088b8c4

Browse files
brandongregoryscottbrandongregoryscott
authored
Update ui-box, remove keyframes from bulk of remaining components (#1547)
1 parent 35bcbd7 commit 088b8c4

File tree

11 files changed

+192
-151
lines changed

11 files changed

+192
-151
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"react-fast-compare": "^3.2.0",
7878
"react-transition-group": "^4.4.1",
7979
"tinycolor2": "^1.4.1",
80-
"ui-box": "^5.2.1"
80+
"ui-box": "^5.3.0"
8181
},
8282
"peerDependencies": {
8383
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",

‎src/corner-dialog/src/CornerDialog.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { memo, useRef, useState, useEffect, useCallback } from 'react'
2-
import cx from 'classnames'
3-
import { css } from 'glamor'
42
import PropTypes from 'prop-types'
53
import { Transition } from 'react-transition-group'
4+
import { keyframes } from 'ui-box'
65
import { Button, IconButton } from '../../buttons'
76
import absolutePositions from '../../constants/src/AbsolutePosition'
87
import positions from '../../constants/src/Position'
@@ -19,7 +18,7 @@ const animationEasing = {
1918

2019
const ANIMATION_DURATION = 240
2120

22-
const openAnimation = css.keyframes('openAnimation', {
21+
const openAnimation = keyframes('openAnimation', {
2322
from: {
2423
transform: 'translateY(100%)'
2524
},
@@ -28,7 +27,7 @@ const openAnimation = css.keyframes('openAnimation', {
2827
}
2928
})
3029

31-
const closeAnimation = css.keyframes('closeAnimation', {
30+
const closeAnimation = keyframes('closeAnimation', {
3231
from: {
3332
transform: 'scale(1)',
3433
opacity: 1
@@ -39,12 +38,23 @@ const closeAnimation = css.keyframes('closeAnimation', {
3938
}
4039
})
4140

41+
const enterAnimationProps = {
42+
animationName: openAnimation,
43+
animationDuration: ANIMATION_DURATION,
44+
animationTimingFunction: animationEasing.spring,
45+
animationFillMode: 'both'
46+
}
47+
4248
const animationStyles = {
43-
'&[data-state="entering"], &[data-state="entered"]': {
44-
animation: `${openAnimation} ${ANIMATION_DURATION}ms ${animationEasing.spring} both`
45-
},
46-
'&[data-state="exiting"]': {
47-
animation: `${closeAnimation} 120ms ${animationEasing.acceleration} both`
49+
selectors: {
50+
'&[data-state="entering"]': enterAnimationProps,
51+
'&[data-state="entered"]': enterAnimationProps,
52+
'&[data-state="exiting"]': {
53+
animationName: closeAnimation,
54+
animationDuration: 120,
55+
animationTimingFunction: animationEasing.acceleration,
56+
animationFillMode: 'both'
57+
}
4858
}
4959
}
5060

@@ -134,12 +144,13 @@ const CornerDialog = memo(function CornerDialog(props) {
134144
>
135145
{state => (
136146
<Card
147+
{...animationStyles}
137148
ref={transitionRef}
138149
role="dialog"
139150
backgroundColor="white"
140151
elevation={4}
141152
width={width}
142-
className={cx(css(animationStyles).toString(), containerClassName)}
153+
className={containerClassName}
143154
data-state={state}
144155
padding={32}
145156
position="fixed"

‎src/dialog/src/Dialog.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { memo } from 'react'
2-
import cx from 'classnames'
3-
import { css } from 'glamor'
42
import PropTypes from 'prop-types'
3+
import { keyframes } from 'ui-box'
54
import { Button, IconButton } from '../../buttons'
65
import { useStyleConfig } from '../../hooks'
76
import { CrossIcon } from '../../icons'
@@ -16,7 +15,7 @@ const animationEasing = {
1615

1716
const ANIMATION_DURATION = 200
1817

19-
const openAnimation = css.keyframes('openAnimation', {
18+
const openAnimation = keyframes('openAnimation', {
2019
from: {
2120
transform: 'scale(0.8)',
2221
opacity: 0
@@ -27,7 +26,7 @@ const openAnimation = css.keyframes('openAnimation', {
2726
}
2827
})
2928

30-
const closeAnimation = css.keyframes('closeAnimation', {
29+
const closeAnimation = keyframes('closeAnimation', {
3130
from: {
3231
transform: 'scale(1)',
3332
opacity: 1
@@ -38,12 +37,23 @@ const closeAnimation = css.keyframes('closeAnimation', {
3837
}
3938
})
4039

40+
const enterAnimationProps = {
41+
animationName: openAnimation,
42+
animationDuration: ANIMATION_DURATION,
43+
animationTimingFunction: animationEasing.deceleration,
44+
animationFillMode: 'both'
45+
}
46+
4147
const animationStyles = {
42-
'&[data-state="entering"], &[data-state="entered"]': {
43-
animation: `${openAnimation} ${ANIMATION_DURATION}ms ${animationEasing.deceleration} both`
44-
},
45-
'&[data-state="exiting"]': {
46-
animation: `${closeAnimation} ${ANIMATION_DURATION}ms ${animationEasing.acceleration} both`
48+
selectors: {
49+
'&[data-state="entering"]': enterAnimationProps,
50+
'&[data-state="entered"]': enterAnimationProps,
51+
'&[data-state="exiting"]': {
52+
animationName: closeAnimation,
53+
animationDuration: ANIMATION_DURATION,
54+
animationTimingFunction: animationEasing.acceleration,
55+
animationFillMode: 'both'
56+
}
4757
}
4858
}
4959

@@ -189,6 +199,7 @@ const Dialog = memo(function Dialog({
189199
>
190200
{({ close, state }) => (
191201
<Pane
202+
{...animationStyles}
192203
role="dialog"
193204
backgroundColor="white"
194205
elevation={4}
@@ -200,7 +211,7 @@ const Dialog = memo(function Dialog({
200211
marginY={topOffsetWithUnit}
201212
display="flex"
202213
flexDirection="column"
203-
className={cx(css(animationStyles).toString(), containerClassName)}
214+
className={containerClassName}
204215
data-state={state}
205216
{...remainingContainerProps}
206217
>

‎src/overlay/src/Overlay.js‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { memo, useState, useEffect, useRef } from 'react'
2-
import cx from 'classnames'
3-
import { css } from 'glamor'
42
import PropTypes from 'prop-types'
53
import { Transition } from 'react-transition-group'
6-
import Box from 'ui-box'
4+
import Box, { keyframes } from 'ui-box'
75
import { StackingOrder } from '../../constants'
86
import preventBodyScroll from '../../lib/prevent-body-scroll'
97
import safeInvoke from '../../lib/safe-invoke'
@@ -24,7 +22,7 @@ const animationEasing = {
2422

2523
const ANIMATION_DURATION = 240
2624

27-
const fadeInAnimation = css.keyframes('fadeInAnimation', {
25+
const fadeInAnimation = keyframes('fadeInAnimation', {
2826
from: {
2927
opacity: 0
3028
},
@@ -33,7 +31,7 @@ const fadeInAnimation = css.keyframes('fadeInAnimation', {
3331
}
3432
})
3533

36-
const fadeOutAnimation = css.keyframes('fadeOutAnimation', {
34+
const fadeOutAnimation = keyframes('fadeOutAnimation', {
3735
from: {
3836
opacity: 1
3937
},
@@ -42,22 +40,36 @@ const fadeOutAnimation = css.keyframes('fadeOutAnimation', {
4240
}
4341
})
4442

43+
const enterAnimationProps = {
44+
animationName: fadeInAnimation,
45+
animationDuration: ANIMATION_DURATION,
46+
animationTimingFunction: animationEasing.deceleration,
47+
animationFillMode: 'both'
48+
}
49+
50+
const exitAnimationProps = {
51+
animationName: fadeOutAnimation,
52+
animationDuration: ANIMATION_DURATION,
53+
animationTimingFunction: animationEasing.acceleration,
54+
animationFillMode: 'both'
55+
}
56+
4557
const animationStyles = backgroundColor => ({
46-
'&::before': {
47-
backgroundColor,
48-
left: 0,
49-
top: 0,
50-
position: 'fixed',
51-
display: 'block',
52-
width: '100%',
53-
height: '100%',
54-
content: '" "'
55-
},
56-
'&[data-state="entering"]::before, &[data-state="entered"]::before': {
57-
animation: `${fadeInAnimation} ${ANIMATION_DURATION}ms ${animationEasing.deceleration} both`
58-
},
59-
'&[data-state="exiting"]::before, &[data-state="exited"]::before': {
60-
animation: `${fadeOutAnimation} ${ANIMATION_DURATION}ms ${animationEasing.acceleration} both`
58+
selectors: {
59+
'&::before': {
60+
backgroundColor,
61+
left: 0,
62+
top: 0,
63+
position: 'fixed',
64+
display: 'block',
65+
width: '100%',
66+
height: '100%',
67+
content: '" "'
68+
},
69+
'&[data-state="entering"]::before': enterAnimationProps,
70+
'&[data-state="entered"]::before': enterAnimationProps,
71+
'&[data-state="exiting"]::before': exitAnimationProps,
72+
'&[data-state="exited"]::before': exitAnimationProps
6173
}
6274
})
6375

@@ -267,7 +279,8 @@ const Overlay = memo(function Overlay({
267279
zIndex={zIndex}
268280
data-state={state}
269281
{...containerProps}
270-
className={cx(containerProps.className, css(animationStyles(colors.overlay)).toString())}
282+
className={containerProps.className}
283+
{...animationStyles(colors.overlay)}
271284
>
272285
{typeof children === 'function' ? children({ state, close }) : children}
273286
</Box>

‎src/pulsar/src/Pulsar.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
import React, { memo } from 'react'
2-
import { css } from 'glamor'
32
import PropTypes from 'prop-types'
3+
import { keyframes } from 'ui-box'
44
import Positions from '../../constants/src/Position'
55
import { Pane } from '../../layers'
66
import { majorScale } from '../../scales'
77
import { useTheme } from '../../theme'
88

9-
const pulseAnimation = css.keyframes('pulseAnimation', {
10-
'0%': {
9+
const pulseAnimation = keyframes('pulseAnimation', {
10+
0: {
1111
transform: 'scale(1)'
1212
},
13-
'50%': {
13+
50: {
1414
transform: 'scale(1.9)'
1515
},
16-
'100%': {
16+
100: {
1717
transform: 'scale(1)'
1818
}
1919
})
2020

2121
const animationTiming = 'cubic-bezier(0, 0, 0.58, 1)'
2222
const animationDuration = '1.8s'
2323

24-
const pulsarAnimationClassName = css({
24+
const pularAnimationStyles = {
2525
animation: `${pulseAnimation} ${animationDuration} ${animationTiming} both infinite`
26-
}).toString()
26+
}
2727

2828
const POSITION_KEYS = {
2929
[Positions.TOP_LEFT]: ['top', 'left'],
@@ -65,7 +65,7 @@ export const Pulsar = memo(({ position = Positions.TOP_RIGHT, size = majorScale(
6565
alignItems="center"
6666
justifyContent="center"
6767
padding={outerPadding}
68-
className={pulsarAnimationClassName}
68+
{...pularAnimationStyles}
6969
onClick={onClick}
7070
cursor={onClick ? 'pointer' : undefined}
7171
{...positionProps}

0 commit comments

Comments
 (0)