From 24a5d5d0118e98eb1fce5cd30feacaafb053e939 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 20 Nov 2018 21:32:20 +0100 Subject: [PATCH 1/7] -added documentation for the way the animations are defined in the theme --- docs/src/views/Theming.tsx | 78 +++++++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index a9587060a0..1c1316d195 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { NavLink } from 'react-router-dom' import { Header } from 'semantic-ui-react' -import { Button, Divider, Icon, Provider, Text } from '@stardust-ui/react' +import { Button, Divider, Icon, Provider, Text, Transition } from '@stardust-ui/react' import DocPage from '../components/DocPage/DocPage' import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet' @@ -208,6 +208,82 @@ export default () => ( Provider at the root of your app.

+
+

+ Another important part of the theming in Stardust are the animations. You can + define the animations in a very similar way as you would define them using css, by providing a + keyframe, as well as the other animation properties: duration, delay, timingFunction etc. +

+ +

+ You can define the animations in a part of your render tree using the{' '} + Provider. +

+

+ This is done with the Provider's theme prop. The animations are then are applied + based on their name by using the Transition{' '} + component, or the animation property available on all UI component. Here's how we + can define the animations and use them in our components. +

+ `, + `
`, + ` `, + ` `, + `
`, + ``, + ].join('\n')} + render={() => ( +
+ + + + +
+ )} + /> + +

+ You can also override some of the defined animation properties, by providing + additional properties to the Transition component, or the animation{' '} + prop. +

+ + `, + ``, + ].join('\n')} + render={() => ( +
+ + + + +
+ )} + /> + +

+ For more details, please see the examples in the{' '} + Transition component, or the structure of the{' '} + animation property in any of the UI components. +

+

From d42daa2e9ed55d539492147e33fea769e3216cc0 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 22 Nov 2018 12:32:29 +0100 Subject: [PATCH 2/7] -renamed Transition to Animation, renamed animationName to name -addressed comments for the docs --- .../Animation/Types/AnimationExample.tsx | 10 ++++ .../Animation/Types/AnimationExampleDelay.tsx | 14 +++++ .../Types/AnimationExampleDirection.tsx | 25 ++++++++ .../Types/AnimationExampleDuration.tsx | 10 ++++ .../Types/AnimationExampleFillMode.tsx | 25 ++++++++ .../Types/AnimationExampleIterationCount.tsx | 25 ++++++++ .../Types/AnimationExamplePlayState.tsx} | 6 +- .../Types/AnimationExampleTimingFunction.tsx | 33 ++++++++++ .../components/Animation/Types/index.tsx | 50 ++++++++++++++++ .../{Transition => Animation}/index.tsx | 4 +- .../Transition/Types/TransitionExample.tsx | 10 ---- .../Types/TransitionExampleDelay.tsx | 14 ----- .../Types/TransitionExampleDirection.tsx | 25 -------- .../Types/TransitionExampleDuration.tsx | 10 ---- .../Types/TransitionExampleFillMode.tsx | 25 -------- .../Types/TransitionExampleIterationCount.tsx | 25 -------- .../Types/TransitionExampleTimingFunction.tsx | 33 ---------- .../components/Transition/Types/index.tsx | 50 ---------------- docs/src/views/Theming.tsx | 60 +++++++++++++------ .../Animation.tsx} | 24 ++++---- src/components/Transition/index.ts | 1 - src/index.ts | 2 +- src/themes/teams/componentStyles.ts | 2 +- src/themes/teams/componentVariables.ts | 2 +- .../animationStyles.ts} | 0 .../animationVariables.ts} | 0 .../components/Animation/Animation-test.tsx | 7 +++ .../components/Transition/Transition-test.tsx | 7 --- 28 files changed, 261 insertions(+), 238 deletions(-) create mode 100644 docs/src/examples/components/Animation/Types/AnimationExample.tsx create mode 100644 docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx create mode 100644 docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx create mode 100644 docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx create mode 100644 docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx create mode 100644 docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx rename docs/src/examples/components/{Transition/Types/TransitionExamplePlayState.tsx => Animation/Types/AnimationExamplePlayState.tsx} (80%) create mode 100644 docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx create mode 100644 docs/src/examples/components/Animation/Types/index.tsx rename docs/src/examples/components/{Transition => Animation}/index.tsx (57%) delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExample.tsx delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx delete mode 100644 docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx delete mode 100644 docs/src/examples/components/Transition/Types/index.tsx rename src/components/{Transition/Transition.tsx => Animation/Animation.tsx} (89%) delete mode 100644 src/components/Transition/index.ts rename src/themes/teams/components/{Transition/transitionStyles.ts => Animation/animationStyles.ts} (100%) rename src/themes/teams/components/{Transition/transitionVariables.ts => Animation/animationVariables.ts} (100%) create mode 100644 test/specs/components/Animation/Animation-test.tsx delete mode 100644 test/specs/components/Transition/Transition-test.tsx diff --git a/docs/src/examples/components/Animation/Types/AnimationExample.tsx b/docs/src/examples/components/Animation/Types/AnimationExample.tsx new file mode 100644 index 0000000000..fa4dbdffdd --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExample.tsx @@ -0,0 +1,10 @@ +import * as React from 'react' +import { Animation, Icon } from '@stardust-ui/react' + +const AnimationExample = () => ( + + + +) + +export default AnimationExample diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx new file mode 100644 index 0000000000..c9743d009d --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx @@ -0,0 +1,14 @@ +import * as React from 'react' +import { Animation, Icon } from '@stardust-ui/react' + +const AnimationExampleDelay = () => ( +
+ {'This animation will start after 5 seconds'} +
+ + + +
+) + +export default AnimationExampleDelay diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx new file mode 100644 index 0000000000..0db89cbb91 --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' +import { Animation, Icon, Grid, Text } from '@stardust-ui/react' + +const AnimationExampleDirection = () => ( + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleDirection diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx new file mode 100644 index 0000000000..23b4160e68 --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx @@ -0,0 +1,10 @@ +import * as React from 'react' +import { Animation, Icon } from '@stardust-ui/react' + +const AnimationExampleDuration = () => ( + + + +) + +export default AnimationExampleDuration diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx new file mode 100644 index 0000000000..ebe56d5239 --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' +import { Animation, Icon, Grid, Text } from '@stardust-ui/react' + +const AnimationExampleFillMode = () => ( + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleFillMode diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx new file mode 100644 index 0000000000..9f55d0cae8 --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' +import { Animation, Icon, Grid, Text } from '@stardust-ui/react' + +const AnimationExampleIterationCount = () => ( + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleIterationCount diff --git a/docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx similarity index 80% rename from docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx rename to docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx index 51cb67f903..a5a1016369 100644 --- a/docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Icon, Button, Transition } from '@stardust-ui/react' +import { Icon, Button, Animation } from '@stardust-ui/react' class IconExample extends React.Component { state = { @@ -23,9 +23,9 @@ class IconExample extends React.Component { />

- + - + ) } diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx new file mode 100644 index 0000000000..d62b1132af --- /dev/null +++ b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx @@ -0,0 +1,33 @@ +import * as React from 'react' +import { Animation, Icon, Grid, Text } from '@stardust-ui/react' + +const AnimationExampleTimingFunction = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleTimingFunction diff --git a/docs/src/examples/components/Animation/Types/index.tsx b/docs/src/examples/components/Animation/Types/index.tsx new file mode 100644 index 0000000000..6473b27118 --- /dev/null +++ b/docs/src/examples/components/Animation/Types/index.tsx @@ -0,0 +1,50 @@ +import * as React from 'react' +import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' + +const Types = () => ( + + + + + + + + + + +) + +export default Types diff --git a/docs/src/examples/components/Transition/index.tsx b/docs/src/examples/components/Animation/index.tsx similarity index 57% rename from docs/src/examples/components/Transition/index.tsx rename to docs/src/examples/components/Animation/index.tsx index a24a108efb..609ee0166f 100644 --- a/docs/src/examples/components/Transition/index.tsx +++ b/docs/src/examples/components/Animation/index.tsx @@ -1,10 +1,10 @@ import * as React from 'react' import Types from './Types' -const TransitionExamples = () => ( +const AnimationExamples = () => (
) -export default TransitionExamples +export default AnimationExamples diff --git a/docs/src/examples/components/Transition/Types/TransitionExample.tsx b/docs/src/examples/components/Transition/Types/TransitionExample.tsx deleted file mode 100644 index d694a4e480..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExample.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' -import { Transition, Icon } from '@stardust-ui/react' - -const TransitionExample = () => ( - - - -) - -export default TransitionExample diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx deleted file mode 100644 index 3ad6ea4d9a..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' -import { Transition, Icon } from '@stardust-ui/react' - -const TransitionExampleDelay = () => ( -
- {'This animation will start after 5 seconds'} -
- - - -
-) - -export default TransitionExampleDelay diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx deleted file mode 100644 index 76037a71d4..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleDirection = () => ( - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleDirection diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx deleted file mode 100644 index 43be02dd04..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' -import { Transition, Icon } from '@stardust-ui/react' - -const TransitionExampleDuration = () => ( - - - -) - -export default TransitionExampleDuration diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx deleted file mode 100644 index 143a7f50a2..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleFillMode = () => ( - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleFillMode diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx deleted file mode 100644 index 6ed88158b5..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleIterationCount = () => ( - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleIterationCount diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx deleted file mode 100644 index b1b0a15363..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleTimingFunction = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleTimingFunction diff --git a/docs/src/examples/components/Transition/Types/index.tsx b/docs/src/examples/components/Transition/Types/index.tsx deleted file mode 100644 index 39ae82a34c..0000000000 --- a/docs/src/examples/components/Transition/Types/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react' -import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' -import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' - -const Types = () => ( - - - - - - - - - - -) - -export default Types diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index 1c1316d195..be2192395c 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { NavLink } from 'react-router-dom' import { Header } from 'semantic-ui-react' -import { Button, Divider, Icon, Provider, Text, Transition } from '@stardust-ui/react' +import { Button, Divider, Icon, Provider, Text, Animation } from '@stardust-ui/react' import DocPage from '../components/DocPage/DocPage' import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet' @@ -210,20 +210,40 @@ export default () => (

- Another important part of the theming in Stardust are the animations. You can - define the animations in a very similar way as you would define them using css, by providing a - keyframe, as well as the other animation properties: duration, delay, timingFunction etc. + You define animations in Stardust in a very similar way to CSS, by providing keyframes and + animation properties.

+ `, + ` ... `, + ``, + ].join('\n')} + /> +

You can define the animations in a part of your render tree using the{' '} Provider.

- This is done with the Provider's theme prop. The animations are then are applied - based on their name by using the Transition{' '} - component, or the animation property available on all UI component. Here's how we - can define the animations and use them in our components. + This is done with the Provider's theme prop. The animations are then applied + based on their name by using the Animation{' '} + component, or the animation property available on all Stardust component. Here's + how we can use them in our components.

( ` }}`, `>`, `
`, - ` `, + ` `, ` `, `
`, ``, ].join('\n')} render={() => (
- + - +
)} @@ -259,29 +279,33 @@ export default () => (

You can also override some of the defined animation properties, by providing - additional properties to the Transition component, or the animation{' '} + additional properties to the Animation component, or the animation{' '} prop.

`, + ``, ``, ].join('\n')} render={() => (
- + - +
)} />

- For more details, please see the examples in the{' '} - Transition component, or the structure of the{' '} - animation property in any of the UI components. + The difference between using the Animation component versus the animation property is that, + the Animation component can be safely use for applying animations on{' '} + all components (Stardust, custom and third party components). For the Stardust + components, we recommend using the animation property as there will be no wrapper element + added just for the purpose of defining the animation. For more details, please see the + examples in the Animation component, or the + structure of the animation property in any of the Stardust components.


diff --git a/src/components/Transition/Transition.tsx b/src/components/Animation/Animation.tsx similarity index 89% rename from src/components/Transition/Transition.tsx rename to src/components/Animation/Animation.tsx index fea156a26c..aeab1df71c 100644 --- a/src/components/Transition/Transition.tsx +++ b/src/components/Animation/Animation.tsx @@ -2,12 +2,12 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { UIComponent, customPropTypes, childrenExist } from '../../lib' -import { Animation } from '../../themes/types' +import { Animation as ThemeAnimation } from '../../themes/types' import createAnimationStyles from '../../lib/createAnimationStyles' import { ChildrenComponentProps, StyledComponentProps } from '../../lib/commonPropInterfaces' import { styledComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface TransitionProps extends StyledComponentProps, ChildrenComponentProps { +export interface AnimationProps extends StyledComponentProps, ChildrenComponentProps { /** An element type to render as (string or function). */ as?: any @@ -15,7 +15,7 @@ export interface TransitionProps extends StyledComponentProps, Childre className?: string /** The name for the animation that should be applied, defined in the theme. */ - animationName?: string + name?: string /** The delay property specifies a delay for the start of an animation. Negative values are * also allowed. If using negative values, the animation will start as if it had already been @@ -70,19 +70,19 @@ export interface TransitionProps extends StyledComponentProps, Childre } /** - * A transition is an animation usually used to move content in or out of view. + * An animation allows the user to animate their own components. */ -class Transition extends UIComponent { +class Animation extends UIComponent { static create: Function - static className = 'ui-transition' + static className = 'ui-animation' - static displayName = 'Transition' + static displayName = 'Animation' static propTypes = { ...styledComponentPropTypes, ...childrenComponentPropTypes, - animationName: PropTypes.string, + name: PropTypes.string, as: customPropTypes.as, className: PropTypes.string, delay: PropTypes.string, @@ -95,10 +95,10 @@ class Transition extends UIComponent { } renderComponent({ ElementType, classes, rest, styles, variables, theme }) { - const { children, animationName } = this.props + const { children, name } = this.props - const animation: Animation = { - name: animationName, + const animation: ThemeAnimation = { + name, duration: this.props.duration, delay: this.props.delay, iterationCount: this.props.iterationCount, @@ -125,4 +125,4 @@ class Transition extends UIComponent { } } -export default Transition +export default Animation diff --git a/src/components/Transition/index.ts b/src/components/Transition/index.ts deleted file mode 100644 index fa712ef4a9..0000000000 --- a/src/components/Transition/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Transition' diff --git a/src/index.ts b/src/index.ts index 5313e85590..0a5d3f7fb0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -93,7 +93,7 @@ export { default as Status, StatusPropsWithDefaults, StatusProps } from './compo export { default as Text, TextProps } from './components/Text/Text' -export { default as Transition, TransitionProps } from './components/Transition/Transition' +export { default as Animation, AnimationProps } from './components/Animation/Animation' // // Accessibility diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index b02e53b138..ff31420305 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -52,4 +52,4 @@ export { default as Status } from './components/Status/statusStyles' export { default as Text } from './components/Text/textStyles' -export { default as Transition } from './components/Transition/transitionStyles' +export { default as Animation } from './components/Animation/animationStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index 06f8187743..eeb611e45a 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -47,4 +47,4 @@ export { default as Status } from './components/Status/statusVariables' export { default as Text } from './components/Text/textVariables' -export { default as Transition } from './components/Transition/transitionVariables' +export { default as Animation } from './components/Animation/animationVariables' diff --git a/src/themes/teams/components/Transition/transitionStyles.ts b/src/themes/teams/components/Animation/animationStyles.ts similarity index 100% rename from src/themes/teams/components/Transition/transitionStyles.ts rename to src/themes/teams/components/Animation/animationStyles.ts diff --git a/src/themes/teams/components/Transition/transitionVariables.ts b/src/themes/teams/components/Animation/animationVariables.ts similarity index 100% rename from src/themes/teams/components/Transition/transitionVariables.ts rename to src/themes/teams/components/Animation/animationVariables.ts diff --git a/test/specs/components/Animation/Animation-test.tsx b/test/specs/components/Animation/Animation-test.tsx new file mode 100644 index 0000000000..2f5774e02c --- /dev/null +++ b/test/specs/components/Animation/Animation-test.tsx @@ -0,0 +1,7 @@ +import { isConformant } from 'test/specs/commonTests' + +import Animation from 'src/components/Animation/Animation' + +describe('Animation', () => { + isConformant(Animation) +}) diff --git a/test/specs/components/Transition/Transition-test.tsx b/test/specs/components/Transition/Transition-test.tsx deleted file mode 100644 index e9fc493268..0000000000 --- a/test/specs/components/Transition/Transition-test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { isConformant } from 'test/specs/commonTests' - -import Transition from 'src/components/Transition/Transition' - -describe('Transition', () => { - isConformant(Transition) -}) From 54355821507e211e2d7d12f672da47b78868dd53 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 22 Nov 2018 12:38:39 +0100 Subject: [PATCH 3/7] -added Animation to the theme typings --- src/themes/types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/themes/types.ts b/src/themes/types.ts index d88c8f6806..9b2b9c8804 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -191,6 +191,7 @@ export interface ThemeComponentStylesInput { [key: string]: ComponentSlotStylesInput | undefined Accordion?: ComponentSlotStylesInput + Animation?: ComponentSlotStylesInput Attachment?: ComponentSlotStylesInput Avatar?: ComponentSlotStylesInput Button?: ComponentSlotStylesInput @@ -228,6 +229,7 @@ export interface ThemeComponentStylesPrepared { [key: string]: ComponentSlotStylesPrepared | undefined Accordion?: ComponentSlotStylesPrepared + Animation?: ComponentSlotStylesPrepared Attachment?: ComponentSlotStylesPrepared Avatar?: ComponentSlotStylesPrepared Button?: ComponentSlotStylesPrepared @@ -265,6 +267,7 @@ export interface ThemeComponentVariablesInput { [key: string]: any Accordion?: ComponentVariablesInput + Animation?: ComponentVariablesInput Attachment?: ComponentVariablesInput Avatar?: ComponentVariablesInput Button?: ComponentVariablesInput @@ -302,6 +305,7 @@ export interface ThemeComponentVariablesPrepared { [key: string]: any Accordion?: ComponentVariablesPrepared + Animation?: ComponentVariablesPrepared Attachment?: ComponentVariablesPrepared Avatar?: ComponentVariablesPrepared Button?: ComponentVariablesPrepared From 96828adba8303d6c869f4ef13d4cd6c73cfd5bae Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 22 Nov 2018 13:59:56 +0100 Subject: [PATCH 4/7] -updated changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 012f4638a5..98c7b1ea34 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,12 +17,18 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### BREAKING CHANGES +- rename `Transition` component to `Animation`, and `animationName` property to `name` @mnajdova ([#505](https://github.com/stardust-ui/react/pull/505)) + ### Features - Add `renderComponent` function in the public API @mnajdova ([#503](https://github.com/stardust-ui/react/pull/503)) ### Fixes - Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499)) +### Documentation +- add `Animations` guide as part of the `Theming` docs page @mnajdova ([#505](https://github.com/stardust-ui/react/pull/505)) + ## [v0.12.0](https://github.com/stardust-ui/react/tree/v0.12.0) (2018-11-19) [Compare changes](https://github.com/stardust-ui/react/compare/v0.11.0...v0.12.0) From 86668e5c9c462ca687b7d25a5392aec4665b76de Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 23 Nov 2018 12:13:55 +0100 Subject: [PATCH 5/7] -addressed PR comments -renamed Animation theme interface to AnimationProp, because of conflicts with the Animation component name --- docs/src/views/Theming.tsx | 13 ++++++++++--- src/components/Animation/Animation.tsx | 4 ++-- src/lib/commonPropInterfaces.ts | 4 ++-- src/lib/createAnimationStyles.tsx | 4 ++-- src/themes/types.ts | 2 +- 5 files changed, 17 insertions(+), 10 deletions(-) diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index be2192395c..25d166638c 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -283,24 +283,31 @@ export default () => ( prop.

+
+ Keyframes are static - Keyframes cannot be overridden using the properties. + If you want to add new keyframes or change some existing, please use the Provider{' '} + for this. The API for + using the animations doesn't provide any way for changing the keyframes. +
+ `, - ``, + ``, ].join('\n')} render={() => (
- +
)} />

The difference between using the Animation component versus the animation property is that, - the Animation component can be safely use for applying animations on{' '} + the Animation component can be safely used for applying animations on{' '} all components (Stardust, custom and third party components). For the Stardust components, we recommend using the animation property as there will be no wrapper element added just for the purpose of defining the animation. For more details, please see the diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx index aeab1df71c..d8e4a46da5 100644 --- a/src/components/Animation/Animation.tsx +++ b/src/components/Animation/Animation.tsx @@ -2,7 +2,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { UIComponent, customPropTypes, childrenExist } from '../../lib' -import { Animation as ThemeAnimation } from '../../themes/types' +import { AnimationProp } from '../../themes/types' import createAnimationStyles from '../../lib/createAnimationStyles' import { ChildrenComponentProps, StyledComponentProps } from '../../lib/commonPropInterfaces' import { styledComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' @@ -97,7 +97,7 @@ class Animation extends UIComponent { renderComponent({ ElementType, classes, rest, styles, variables, theme }) { const { children, name } = this.props - const animation: ThemeAnimation = { + const animation: AnimationProp = { name, duration: this.props.duration, delay: this.props.delay, diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts index 5219498303..22b831cf5a 100644 --- a/src/lib/commonPropInterfaces.ts +++ b/src/lib/commonPropInterfaces.ts @@ -1,4 +1,4 @@ -import { ComponentVariablesInput, ComponentSlotStyle, Animation } from '../themes/types' +import { ComponentVariablesInput, ComponentSlotStyle, AnimationProp } from '../themes/types' import { ShorthandValue, ReactChildren } from '../../types/utils' export interface StyledComponentProps { @@ -11,7 +11,7 @@ export interface StyledComponentProps { export interface AnimatedComponentProps { /** Generic animation property that can be used for applying different theme animations. */ - animation?: Animation + animation?: AnimationProp } export interface UIComponentProps extends StyledComponentProps, AnimatedComponentProps { diff --git a/src/lib/createAnimationStyles.tsx b/src/lib/createAnimationStyles.tsx index 96ed98bdfa..d0dca5e19f 100644 --- a/src/lib/createAnimationStyles.tsx +++ b/src/lib/createAnimationStyles.tsx @@ -1,7 +1,7 @@ -import { ThemePrepared, Animation } from '../themes/types' +import { ThemePrepared, AnimationProp } from '../themes/types' import { callable } from './index' -const createAnimationStyles = (animation: Animation, theme: ThemePrepared) => { +const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared) => { let animationCSSProp = {} const { animations = {} } = theme diff --git a/src/themes/types.ts b/src/themes/types.ts index 9b2b9c8804..e2cb1f04e7 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -115,7 +115,7 @@ export interface ComponentSlotStylesPrepared export interface ComponentSlotClasses extends ObjectOf {} export interface ComponentSlotClasses extends ObjectOf {} -export type Animation = +export type AnimationProp = | { name: string delay?: string From 5ec08a535adfe91526ad6a81164f634286fa72e9 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 26 Nov 2018 11:21:18 +0100 Subject: [PATCH 6/7] -removed unnecessary brackets --- .../components/Animation/Types/AnimationExampleDelay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx index c9743d009d..4ef1ce9411 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx @@ -3,7 +3,7 @@ import { Animation, Icon } from '@stardust-ui/react' const AnimationExampleDelay = () => (

- {'This animation will start after 5 seconds'} + This animation will start after 5 seconds
From f06bfe804ff8f82805ececf380d6d0eb73a968d6 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 26 Nov 2018 19:57:45 +0100 Subject: [PATCH 7/7] -added Provider with animations in the examples and theming guide page and removed it form the teams' theme --- .../Animation/Types/AnimationExample.tsx | 23 +++++-- .../Animation/Types/AnimationExampleDelay.tsx | 23 +++++-- .../Types/AnimationExampleDirection.tsx | 53 +++++++++----- .../Types/AnimationExampleDuration.tsx | 23 +++++-- .../Types/AnimationExampleFillMode.tsx | 49 ++++++++----- .../Types/AnimationExampleIterationCount.tsx | 53 +++++++++----- .../Types/AnimationExamplePlayState.tsx | 47 ++++++++----- .../Types/AnimationExampleTimingFunction.tsx | 69 +++++++++++-------- docs/src/views/Theming.tsx | 64 +++++++++++++---- src/themes/teams/index.ts | 24 ------- 10 files changed, 278 insertions(+), 150 deletions(-) diff --git a/docs/src/examples/components/Animation/Types/AnimationExample.tsx b/docs/src/examples/components/Animation/Types/AnimationExample.tsx index fa4dbdffdd..1401bcbaf6 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExample.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExample.tsx @@ -1,10 +1,25 @@ import * as React from 'react' -import { Animation, Icon } from '@stardust-ui/react' +import { Animation, Icon, Provider } from '@stardust-ui/react' + +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} const AnimationExample = () => ( - - - + + + + + ) export default AnimationExample diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx index 4ef1ce9411..870798c023 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx @@ -1,13 +1,28 @@ import * as React from 'react' -import { Animation, Icon } from '@stardust-ui/react' +import { Animation, Icon, Provider } from '@stardust-ui/react' + +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} const AnimationExampleDelay = () => (
This animation will start after 5 seconds
- - - + + + + +
) diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx index 0db89cbb91..5582331bab 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx @@ -1,25 +1,40 @@ import * as React from 'react' -import { Animation, Icon, Grid, Text } from '@stardust-ui/react' +import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react' + +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} const AnimationExampleDirection = () => ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ) export default AnimationExampleDirection diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx index 23b4160e68..a1792c9f13 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx @@ -1,10 +1,25 @@ import * as React from 'react' -import { Animation, Icon } from '@stardust-ui/react' +import { Animation, Icon, Provider } from '@stardust-ui/react' + +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} const AnimationExampleDuration = () => ( - - - + + + + + ) export default AnimationExampleDuration diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx index ebe56d5239..cf5712cf13 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx @@ -1,25 +1,36 @@ import * as React from 'react' -import { Animation, Icon, Grid, Text } from '@stardust-ui/react' +import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react' + +const colorChanger = { + keyframe: { + from: { color: 'red' }, + to: { color: 'blue' }, + }, + duration: '3s', + iterationCount: 'infinite', +} const AnimationExampleFillMode = () => ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ) export default AnimationExampleFillMode diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx index 9f55d0cae8..bfa4b025b7 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx @@ -1,25 +1,40 @@ import * as React from 'react' -import { Animation, Icon, Grid, Text } from '@stardust-ui/react' +import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react' + +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} const AnimationExampleIterationCount = () => ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ) export default AnimationExampleIterationCount diff --git a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx index a5a1016369..92c440c528 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx @@ -1,7 +1,20 @@ import React from 'react' -import { Icon, Button, Animation } from '@stardust-ui/react' +import { Icon, Button, Animation, Provider } from '@stardust-ui/react' -class IconExample extends React.Component { +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} + +class AnimationExamplePlayState extends React.Component { state = { playState: 'running', } @@ -14,21 +27,23 @@ class IconExample extends React.Component { render() { return ( -
-
+ +
+
+ ) } } -export default IconExample +export default AnimationExamplePlayState diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx index d62b1132af..1442b14d7f 100644 --- a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx +++ b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx @@ -1,33 +1,48 @@ import * as React from 'react' -import { Animation, Icon, Grid, Text } from '@stardust-ui/react' +import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react' + +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} const AnimationExampleTimingFunction = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) export default AnimationExampleTimingFunction diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index 25d166638c..5a5412daa5 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -6,6 +6,19 @@ import { Button, Divider, Icon, Provider, Text, Animation } from '@stardust-ui/r import DocPage from '../components/DocPage/DocPage' import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet' +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} + export default () => (
@@ -268,12 +281,14 @@ export default () => ( ``, ].join('\n')} render={() => ( -
- - - - -
+ +
+ + + + +
+ )} /> @@ -292,16 +307,37 @@ export default () => ( `, - ``, + ``, + ` `, + ` `, + ``, ].join('\n')} render={() => ( -
- - - - -
+ +
+ + + + +
+ )} /> diff --git a/src/themes/teams/index.ts b/src/themes/teams/index.ts index e349095a6d..24d24a1bca 100644 --- a/src/themes/teams/index.ts +++ b/src/themes/teams/index.ts @@ -34,29 +34,6 @@ Object.keys(fontIcons).forEach(iconName => { icons[iconName] = declareFontBased(fontIcons[iconName]) }) -const animations = { - spinner: { - keyframe: { - from: { - transform: 'rotate(0deg)', - }, - to: { - transform: 'rotate(360deg)', - }, - }, - duration: '5s', - iterationCount: 'infinite', - }, - colorChanger: { - keyframe: { - from: { color: 'red' }, - to: { color: 'blue' }, - }, - duration: '3s', - iterationCount: 'infinite', - }, -} - export default { siteVariables, componentVariables, @@ -64,5 +41,4 @@ export default { fontFaces, staticStyles, icons, - animations, } as ThemeInput