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

Commit 49362ad

Browse files
mnajdovamnajdova
authored
BREAKING(Transition): renamed Transition to Animation and added docs for the animations (#505)
* -added documentation for the way the animations are defined in the theme * -renamed Transition to Animation, renamed animationName to name -addressed comments for the docs * -added Animation to the theme typings * -updated changelog * -addressed PR comments -renamed Animation theme interface to AnimationProp, because of conflicts with the Animation component name * -removed unnecessary brackets * -added Provider with animations in the examples and theming guide page and removed it form the teams' theme
1 parent eb583a7 commit 49362ad

34 files changed

+525
-281
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
1717

1818
## [Unreleased]
1919

20+
### BREAKING CHANGES
21+
- rename `Transition` component to `Animation`, and `animationName` property to `name` @mnajdova ([#505](https://github.com/stardust-ui/react/pull/505))
22+
23+
### Documentation
24+
- add `Animations` guide as part of the `Theming` docs page @mnajdova ([#505](https://github.com/stardust-ui/react/pull/505))
25+
2026
<!--------------------------------[ v0.12.1 ]------------------------------- -->
2127
## [v0.12.1](https://github.com/stardust-ui/react/tree/v0.12.1) (2018-11-26)
2228
[Compare changes](https://github.com/stardust-ui/react/compare/v0.12.0...v0.12.1)

‎docs/src/examples/components/Animation/Types/AnimationExample.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 { Animation, Icon, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
const AnimationExample = () => (
18+
<Provider theme={{ animations: { spinner } }}>
19+
<Animation name="spinner">
20+
<Icon name="umbrella" circular />
21+
</Animation>
22+
</Provider>
23+
)
24+
25+
export default AnimationExample

‎docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from 'react'
2+
import { Animation, Icon, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
const AnimationExampleDelay = () => (
18+
<div>
19+
This animation will start after 5 seconds
20+
<br />
21+
<Provider theme={{ animations: { spinner } }}>
22+
<Animation name="spinner" delay="5s">
23+
<Icon name="umbrella" circular />
24+
</Animation>
25+
</Provider>
26+
</div>
27+
)
28+
29+
export default AnimationExampleDelay

‎docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react'
2+
import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
const AnimationExampleDirection = () => (
18+
<Provider theme={{ animations: { spinner } }}>
19+
<Grid columns={4}>
20+
<Text content="Normal" />
21+
<Text content="Reverse" />
22+
<Text content="Alternate" />
23+
<Text content="Alternate reverse" />
24+
<Animation name="spinner">
25+
<Icon name="umbrella" circular />
26+
</Animation>
27+
<Animation name="spinner" direction="reverse">
28+
<Icon name="umbrella" circular />
29+
</Animation>
30+
<Animation name="spinner" direction="alternate">
31+
<Icon name="umbrella" circular />
32+
</Animation>
33+
<Animation name="spinner" direction="alternate-reverse">
34+
<Icon name="umbrella" circular />
35+
</Animation>
36+
</Grid>
37+
</Provider>
38+
)
39+
40+
export default AnimationExampleDirection

‎docs/src/examples/components/Animation/Types/AnimationExampleDuration.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 { Animation, Icon, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
const AnimationExampleDuration = () => (
18+
<Provider theme={{ animations: { spinner } }}>
19+
<Animation name="spinner" duration="1s">
20+
<Icon name="umbrella" circular />
21+
</Animation>
22+
</Provider>
23+
)
24+
25+
export default AnimationExampleDuration

‎docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react'
2+
import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
3+
4+
const colorChanger = {
5+
keyframe: {
6+
from: { color: 'red' },
7+
to: { color: 'blue' },
8+
},
9+
duration: '3s',
10+
iterationCount: 'infinite',
11+
}
12+
13+
const AnimationExampleFillMode = () => (
14+
<Provider theme={{ animations: { colorChanger } }}>
15+
<Grid columns={4}>
16+
<Text content="None" />
17+
<Text content="Forwards" />
18+
<Text content="Backwards" />
19+
<Text content="Both" />
20+
<Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
21+
<Icon name="umbrella" circular />
22+
</Animation>
23+
<Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
24+
<Icon name="umbrella" circular />
25+
</Animation>
26+
<Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
27+
<Icon name="umbrella" circular />
28+
</Animation>
29+
<Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
30+
<Icon name="umbrella" circular />
31+
</Animation>
32+
</Grid>
33+
</Provider>
34+
)
35+
36+
export default AnimationExampleFillMode

‎docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react'
2+
import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
const AnimationExampleIterationCount = () => (
18+
<Provider theme={{ animations: { spinner } }}>
19+
<Grid columns={4}>
20+
<Text content="1 iteration" />
21+
<Text content="2 iterations" />
22+
<Text content="5 iterations" />
23+
<Text content="Infinite" />
24+
<Animation name="spinner" iterationCount="1">
25+
<Icon name="umbrella" circular />
26+
</Animation>
27+
<Animation name="spinner" iterationCount="2">
28+
<Icon name="umbrella" circular />
29+
</Animation>
30+
<Animation name="spinner" iterationCount="5">
31+
<Icon name="umbrella" circular />
32+
</Animation>
33+
<Animation name="spinner" iterationCount="infinite">
34+
<Icon name="umbrella" circular />
35+
</Animation>
36+
</Grid>
37+
</Provider>
38+
)
39+
40+
export default AnimationExampleIterationCount

‎docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
import { Icon, Button, Animation, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
class AnimationExamplePlayState extends React.Component {
18+
state = {
19+
playState: 'running',
20+
}
21+
22+
changePlayState = () => {
23+
this.setState(prevState => ({
24+
playState: (prevState as any).playState === 'running' ? 'paused' : 'running',
25+
}))
26+
}
27+
28+
render() {
29+
return (
30+
<Provider theme={{ animations: { spinner } }}>
31+
<div>
32+
<Button
33+
icon={this.state.playState === 'running' ? 'pause' : 'play'}
34+
content={this.state.playState === 'running' ? 'Pause' : 'Start'}
35+
onClick={this.changePlayState}
36+
primary
37+
/>
38+
<br />
39+
<br />
40+
<Animation name="spinner" playState={this.state.playState}>
41+
<Icon name="umbrella" circular />
42+
</Animation>
43+
</div>
44+
</Provider>
45+
)
46+
}
47+
}
48+
49+
export default AnimationExamplePlayState

‎docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as React from 'react'
2+
import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
3+
4+
const spinner = {
5+
keyframe: {
6+
from: {
7+
transform: 'rotate(0deg)',
8+
},
9+
to: {
10+
transform: 'rotate(360deg)',
11+
},
12+
},
13+
duration: '5s',
14+
iterationCount: 'infinite',
15+
}
16+
17+
const AnimationExampleTimingFunction = () => (
18+
<Provider theme={{ animations: { spinner } }}>
19+
<Grid columns={6}>
20+
<Text content="Ease" />
21+
<Text content="Linear" />
22+
<Text content="Ease in" />
23+
<Text content="Ease out" />
24+
<Text content="Ease in out" />
25+
<Text content="Cubic bezier" />
26+
<Animation name="spinner" timingFunction="ease">
27+
<Icon name="umbrella" circular />
28+
</Animation>
29+
<Animation name="spinner" timingFunction="linear">
30+
<Icon name="umbrella" circular />
31+
</Animation>
32+
<Animation name="spinner" timingFunction="ease-in">
33+
<Icon name="umbrella" circular />
34+
</Animation>
35+
<Animation name="spinner" timingFunction="ease-out">
36+
<Icon name="umbrella" circular />
37+
</Animation>
38+
<Animation name="spinner" timingFunction="ease-in-out">
39+
<Icon name="umbrella" circular />
40+
</Animation>
41+
<Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
42+
<Icon name="umbrella" circular />
43+
</Animation>
44+
</Grid>
45+
</Provider>
46+
)
47+
48+
export default AnimationExampleTimingFunction

‎docs/src/examples/components/Animation/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 Animation specified by the name property."
10+
examplePath="components/Animation/Types/AnimationExample"
11+
/>
12+
<ComponentExample
13+
title="Duration"
14+
description="An Animation can specify how long time an animation should take to complete."
15+
examplePath="components/Animation/Types/AnimationExampleDuration"
16+
/>
17+
<ComponentExample
18+
title="Delay"
19+
description="An Animation can specify a delay for the start of an animation."
20+
examplePath="components/Animation/Types/AnimationExampleDelay"
21+
/>
22+
<ComponentExample
23+
title="Direction"
24+
description="An Animation can specify whether an animation should be played forwards, backwards or in alternate cycles."
25+
examplePath="components/Animation/Types/AnimationExampleDirection"
26+
/>
27+
<ComponentExample
28+
title="Iteration count"
29+
description="An Animation can specify the number of times an animation should run or specify infinite to make the animation continue forever."
30+
examplePath="components/Animation/Types/AnimationExampleIterationCount"
31+
/>
32+
<ComponentExample
33+
title="Fill mode"
34+
description="An Animation 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/Animation/Types/AnimationExampleFillMode"
36+
/>
37+
<ComponentExample
38+
title="Timing function"
39+
description="An Animation can specify the speed curve of the animation."
40+
examplePath="components/Animation/Types/AnimationExampleTimingFunction"
41+
/>
42+
<ComponentExample
43+
title="Play state"
44+
description="An Animation can specify whether the animation is running or paused. "
45+
examplePath="components/Animation/Types/AnimationExamplePlayState"
46+
/>
47+
</ExampleSection>
48+
)
49+
50+
export default Types

‎docs/src/examples/components/Transition/index.tsx renamed to ‎docs/src/examples/components/Animation/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react'
22
import Types from './Types'
33

4-
const TransitionExamples = () => (
4+
const AnimationExamples = () => (
55
<div>
66
<Types />
77
</div>
88
)
99

10-
export default TransitionExamples
10+
export default AnimationExamples

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

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)