Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit f240d7a

Browse files
mnajdovamnajdova
authored
feat(theme): support keyframes through animation property (#414)
* -init implementation of keyframes * -changed keyframes to be always functions * -added keyframe description in the theming docs * -added animation property to icon and button instead of requiring the user to render the keyframe themself * -refactored animation to be part of the theme instead of just defining the keyframes -added option for overriding the animation props * -added Transition component * -continuing running the paused animation * -added description for the transition component * -Transition component is now appling the style on the child component -extracted logic for generating the animationStyle so that it can be reused in renderComponent, as well as the Transition component * -renaming createAnimation to createAnimationStyles * -added tests -removed keyframeParams -added transition examples -added animation prop to all UI components * -fix in the Transition component * -removed comments * -removed unused divs * -reverting changes from Provider * -replacing className with styles prop in the Attachment's shorthands * -updating changelog
1 parent f8f49e6 commit f240d7a

32 files changed

+636
-4
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
4444
- Add focus trap behavior to `Popup` @kuzhelov ([#457](https://github.com/stardust-ui/react/pull/457))
4545
- Export `Ref` component and add `handleRef` util @layershifter ([#459](https://github.com/stardust-ui/react/pull/459))
4646
- Add `wrapper` slot to `MenuItem` @miroslavstastny ([#323](https://github.com/stardust-ui/react/pull/323))
47+
- Add `Transition` component @mnajdova ([#414](https://github.com/stardust-ui/react/pull/414))
48+
- Add generic `animation` property to the UIComponents @mnajdova ([#414](https://github.com/stardust-ui/react/pull/414))
4749

4850
### Documentation
4951
- Add all missing component descriptions and improve those existing @levithomason ([#400](https://github.com/stardust-ui/react/pull/400))

‎docs/src/examples/components/Transition/Types/TransitionExample.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react'
2+
import { Transition, Icon } from '@stardust-ui/react'
3+
4+
const TransitionExample = () => (
5+
<Transition animationName="spinner">
6+
<Icon name="umbrella" circular />
7+
</Transition>
8+
)
9+
10+
export default TransitionExample

‎docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from 'react'
2+
import { Transition, Icon } from '@stardust-ui/react'
3+
4+
const TransitionExampleDelay = () => (
5+
<div>
6+
{'This animation will start after 5 seconds'}
7+
<br />
8+
<Transition animationName="spinner" delay="5s">
9+
<Icon name="umbrella" circular />
10+
</Transition>
11+
</div>
12+
)
13+
14+
export default TransitionExampleDelay

‎docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react'
2+
import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
3+
4+
const TransitionExampleDirection = () => (
5+
<Grid columns={4}>
6+
<Text content="Normal" />
7+
<Text content="Reverse" />
8+
<Text content="Alternate" />
9+
<Text content="Alternate reverse" />
10+
<Transition animationName="spinner">
11+
<Icon name="umbrella" circular />
12+
</Transition>
13+
<Transition animationName="spinner" direction="reverse">
14+
<Icon name="umbrella" circular />
15+
</Transition>
16+
<Transition animationName="spinner" direction="alternate">
17+
<Icon name="umbrella" circular />
18+
</Transition>
19+
<Transition animationName="spinner" direction="alternateReverse">
20+
<Icon name="umbrella" circular />
21+
</Transition>
22+
</Grid>
23+
)
24+
25+
export default TransitionExampleDirection

‎docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react'
2+
import { Transition, Icon } from '@stardust-ui/react'
3+
4+
const TransitionExampleDuration = () => (
5+
<Transition animationName="spinner" duration="1s">
6+
<Icon name="umbrella" circular />
7+
</Transition>
8+
)
9+
10+
export default TransitionExampleDuration

‎docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react'
2+
import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
3+
4+
const TransitionExampleFillMode = () => (
5+
<Grid columns={4}>
6+
<Text content="None" />
7+
<Text content="Forwards" />
8+
<Text content="Backwards" />
9+
<Text content="Both" />
10+
<Transition animationName="colorChanger" fillMode="none" delay="3s" iterationCount="1">
11+
<Icon name="umbrella" circular />
12+
</Transition>
13+
<Transition animationName="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
14+
<Icon name="umbrella" circular />
15+
</Transition>
16+
<Transition animationName="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
17+
<Icon name="umbrella" circular />
18+
</Transition>
19+
<Transition animationName="colorChanger" fillMode="both" delay="3s" iterationCount="1">
20+
<Icon name="umbrella" circular />
21+
</Transition>
22+
</Grid>
23+
)
24+
25+
export default TransitionExampleFillMode

‎docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react'
2+
import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
3+
4+
const TransitionExampleIterationCount = () => (
5+
<Grid columns={4}>
6+
<Text content="1 iteration" />
7+
<Text content="2 iterations" />
8+
<Text content="5 iterations" />
9+
<Text content="Infinite" />
10+
<Transition animationName="spinner" iterationCount="1">
11+
<Icon name="umbrella" circular />
12+
</Transition>
13+
<Transition animationName="spinner" iterationCount="2">
14+
<Icon name="umbrella" circular />
15+
</Transition>
16+
<Transition animationName="spinner" iterationCount="5">
17+
<Icon name="umbrella" circular />
18+
</Transition>
19+
<Transition animationName="spinner" iterationCount="infinite">
20+
<Icon name="umbrella" circular />
21+
</Transition>
22+
</Grid>
23+
)
24+
25+
export default TransitionExampleIterationCount

‎docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import { Icon, Button, Transition } from '@stardust-ui/react'
3+
4+
class IconExample extends React.Component {
5+
state = {
6+
playState: 'running',
7+
}
8+
9+
changePlayState = () => {
10+
this.setState(prevState => ({
11+
playState: (prevState as any).playState === 'running' ? 'paused' : 'running',
12+
}))
13+
}
14+
15+
render() {
16+
return (
17+
<div>
18+
<Button
19+
icon={this.state.playState === 'running' ? 'pause' : 'play'}
20+
content={this.state.playState === 'running' ? 'Pause' : 'Start'}
21+
onClick={this.changePlayState}
22+
primary
23+
/>
24+
<br />
25+
<br />
26+
<Transition animationName="spinner" playState={this.state.playState}>
27+
<Icon name="umbrella" circular />
28+
</Transition>
29+
</div>
30+
)
31+
}
32+
}
33+
34+
export default IconExample

‎docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react'
2+
import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
3+
4+
const TransitionExampleTimingFunction = () => (
5+
<Grid columns={6}>
6+
<Text content="Ease" />
7+
<Text content="Linear" />
8+
<Text content="Ease in" />
9+
<Text content="Ease out" />
10+
<Text content="Ease in out" />
11+
<Text content="Cubic bezier" />
12+
<Transition animationName="spinner" timingFunction="ease">
13+
<Icon name="umbrella" circular />
14+
</Transition>
15+
<Transition animationName="spinner" timingFunction="linear">
16+
<Icon name="umbrella" circular />
17+
</Transition>
18+
<Transition animationName="spinner" timingFunction="ease-in">
19+
<Icon name="umbrella" circular />
20+
</Transition>
21+
<Transition animationName="spinner" timingFunction="ease-out">
22+
<Icon name="umbrella" circular />
23+
</Transition>
24+
<Transition animationName="spinner" timingFunction="ease-in-out">
25+
<Icon name="umbrella" circular />
26+
</Transition>
27+
<Transition animationName="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
28+
<Icon name="umbrella" circular />
29+
</Transition>
30+
</Grid>
31+
)
32+
33+
export default TransitionExampleTimingFunction

‎docs/src/examples/components/Transition/Types/index.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react'
2+
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
3+
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
4+
5+
const Types = () => (
6+
<ExampleSection title="Types">
7+
<ComponentExample
8+
title="Default"
9+
description="A default Transition specified by the animation name."
10+
examplePath="components/Transition/Types/TransitionExample"
11+
/>
12+
<ComponentExample
13+
title="Duration"
14+
description="A transition can specify how long time an animation should take to complete."
15+
examplePath="components/Transition/Types/TransitionExampleDuration"
16+
/>
17+
<ComponentExample
18+
title="Delay"
19+
description="A transition can specify a delay for the start of an animation."
20+
examplePath="components/Transition/Types/TransitionExampleDelay"
21+
/>
22+
<ComponentExample
23+
title="Direction"
24+
description="A transition can specify whether an animation should be played forwards, backwards or in alternate cycles."
25+
examplePath="components/Transition/Types/TransitionExampleDirection"
26+
/>
27+
<ComponentExample
28+
title="Iteration count"
29+
description="A transition can specify the number of times an animation should run or specify infinite to make the animation continue forever."
30+
examplePath="components/Transition/Types/TransitionExampleIterationCount"
31+
/>
32+
<ComponentExample
33+
title="Fill mode"
34+
description="A transition can specify a style for the target element when the animation is not playing (before it starts, after it ends, or both)."
35+
examplePath="components/Transition/Types/TransitionExampleFillMode"
36+
/>
37+
<ComponentExample
38+
title="Timing function"
39+
description="A transition can specify the speed curve of the animation."
40+
examplePath="components/Transition/Types/TransitionExampleTimingFunction"
41+
/>
42+
<ComponentExample
43+
title="Play state"
44+
description="A transition can specify whether the animation is running or paused. "
45+
examplePath="components/Transition/Types/TransitionExamplePlayState"
46+
/>
47+
</ExampleSection>
48+
)
49+
50+
export default Types

‎docs/src/examples/components/Transition/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react'
2+
import Types from './Types'
3+
4+
const TransitionExamples = () => (
5+
<div>
6+
<Types />
7+
</div>
8+
)
9+
10+
export default TransitionExamples

‎src/components/Attachment/Attachment.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,12 +128,12 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
128128
{(header || description) && (
129129
<div className={classes.content}>
130130
{Text.create(header, {
131-
defaultProps: { className: classes.header },
131+
defaultProps: { styles: styles.header },
132132
render: renderHeader,
133133
})}
134134

135135
{Text.create(description, {
136-
defaultProps: { className: classes.description },
136+
defaultProps: { styles: styles.description },
137137
render: renderDescription,
138138
})}
139139
</div>

‎src/components/Provider/Provider.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ class Provider extends React.Component<ProviderProps, any> {
4747
staticStyles: PropTypes.arrayOf(
4848
PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
4949
),
50+
animations: PropTypes.object,
5051
}),
5152
children: PropTypes.element.isRequired,
5253
}

0 commit comments

Comments
 (0)