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

Commit f16bf46

Browse files
mnajdovamnajdova
authored
feat(Animation): add logic for mount/remove children (#2115)
* -added logic for removing/mounting elements in the Animation -spreading unhandled props in Animation and Popper components * -reverted changed to MenuItem and Popper * -added MenuItem example -improved duration type * -added callbacks -added example * -added react transition group as dependency -used Transition component inside the Animation -removed Animation root element * -reorder Animation -> Ref * -fixed type, added default for timeout prop * -fixed Animation test * -updated animation example * -added comments on the new props * -added @types * -merge conflicts * -addressed some PR comments * -example changes * -updated changelog * -updated changelog * -fixed caniuse-lite * Merge branch 'master' into feat/animation-remove-element # Conflicts: # CHANGELOG.md # packages/react/package.json # packages/react/src/components/Animation/Animation.tsx # packages/react/src/themes/teams/components/Animation/animationStyles.ts * -fixes -remove craft * -fixed tests -updated snapshots * -updated approve packages * -improved and fixed tests * -addressed PR comments * -changed callbacks
1 parent ffab117 commit f16bf46

File tree

20 files changed

+375
-117
lines changed

20 files changed

+375
-117
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
2424
- `FocusZoneMode` and `FOCUSZONE_WRAP_ATTRIBUTE` are no longer exported @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
2525
- Returned function from `useAccessibility` no longer keeps the same reference @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
2626
- Changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
27+
- Add logic for mounting/removing elements when they are shown/hidden using the `Animation` component; `Animation` component is not rendering element anymore, just applying classes to it's children @mnajdova ([#2115](https://github.com/microsoft/fluent-ui-react/pull/2115))
2728

2829
### Fixes
2930
- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))

‎build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
export default [
22
'@babel/[email protected]',
33
'@babel/[email protected]',
4+
'@babel/[email protected]',
45
'[email protected]',
56
'[email protected]',
67
'[email protected]',
78
'[email protected]',
9+
'[email protected]',
810
'[email protected]',
911
'[email protected]',
1012
'[email protected]',
@@ -78,6 +80,7 @@ export default [
7880
'[email protected]',
7981
'[email protected]',
8082
'[email protected]',
83+
'[email protected]',
8184
'[email protected]',
8285
'[email protected]',
8386
'[email protected]',

‎docs/src/examples/components/Animation/Performance/AnimationMinimal.perf.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { Animation } from '@fluentui/react'
22
import * as React from 'react'
33

4-
const AnimationMinimalPerf = () => <Animation />
4+
const AnimationMinimalPerf = () => (
5+
<Animation>
6+
<div />
7+
</Animation>
8+
)
59

610
AnimationMinimalPerf.iterations = 5000
711
AnimationMinimalPerf.filename = 'AnimationMinimal.perf.tsx'

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,26 @@ const AnimationExampleDirection = () => (
2121
<Text content="Reverse" />
2222
<Text content="Alternate" />
2323
<Text content="Alternate reverse" />
24-
<Animation name="spinner">
25-
<Icon name="mention" circular bordered />
26-
</Animation>
27-
<Animation name="spinner" direction="reverse">
28-
<Icon name="mention" circular bordered />
29-
</Animation>
30-
<Animation name="spinner" direction="alternate">
31-
<Icon name="mention" circular bordered />
32-
</Animation>
33-
<Animation name="spinner" direction="alternate-reverse">
34-
<Icon name="mention" circular bordered />
35-
</Animation>
24+
<div>
25+
<Animation name="spinner">
26+
<Icon name="mention" circular bordered />
27+
</Animation>
28+
</div>
29+
<div>
30+
<Animation name="spinner" direction="reverse">
31+
<Icon name="mention" circular bordered />
32+
</Animation>
33+
</div>
34+
<div>
35+
<Animation name="spinner" direction="alternate">
36+
<Icon name="mention" circular bordered />
37+
</Animation>
38+
</div>
39+
<div>
40+
<Animation name="spinner" direction="alternate-reverse">
41+
<Icon name="mention" circular bordered />
42+
</Animation>
43+
</div>
3644
</Grid>
3745
</Provider>
3846
)

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,26 @@ const AnimationExampleFillMode = () => (
1717
<Text content="Forwards" />
1818
<Text content="Backwards" />
1919
<Text content="Both" />
20-
<Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
21-
<Icon name="mention" circular bordered />
22-
</Animation>
23-
<Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
24-
<Icon name="mention" circular bordered />
25-
</Animation>
26-
<Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
27-
<Icon name="mention" circular bordered />
28-
</Animation>
29-
<Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
30-
<Icon name="mention" circular bordered />
31-
</Animation>
20+
<div>
21+
<Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
22+
<Icon name="mention" circular bordered />
23+
</Animation>
24+
</div>
25+
<div>
26+
<Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
27+
<Icon name="mention" circular bordered />
28+
</Animation>
29+
</div>
30+
<div>
31+
<Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
32+
<Icon name="mention" circular bordered />
33+
</Animation>
34+
</div>
35+
<div>
36+
<Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
37+
<Icon name="mention" circular bordered />
38+
</Animation>
39+
</div>
3240
</Grid>
3341
</Provider>
3442
)

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,26 @@ const AnimationExampleIterationCount = () => (
2121
<Text content="2 iterations" />
2222
<Text content="5 iterations" />
2323
<Text content="Infinite" />
24-
<Animation name="spinner" iterationCount="1">
25-
<Icon name="mention" circular bordered />
26-
</Animation>
27-
<Animation name="spinner" iterationCount="2">
28-
<Icon name="mention" circular bordered />
29-
</Animation>
30-
<Animation name="spinner" iterationCount="5">
31-
<Icon name="mention" circular bordered />
32-
</Animation>
33-
<Animation name="spinner" iterationCount="infinite">
34-
<Icon name="mention" circular bordered />
35-
</Animation>
24+
<div>
25+
<Animation name="spinner" iterationCount="1">
26+
<Icon name="mention" circular bordered />
27+
</Animation>
28+
</div>
29+
<div>
30+
<Animation name="spinner" iterationCount="2">
31+
<Icon name="mention" circular bordered />
32+
</Animation>
33+
</div>
34+
<div>
35+
<Animation name="spinner" iterationCount="5">
36+
<Icon name="mention" circular bordered />
37+
</Animation>
38+
</div>
39+
<div>
40+
<Animation name="spinner" iterationCount="infinite">
41+
<Icon name="mention" circular bordered />
42+
</Animation>
43+
</div>
3644
</Grid>
3745
</Provider>
3846
)

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

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,36 @@ const AnimationExampleTimingFunction = () => (
2323
<Text content="Ease out" />
2424
<Text content="Ease in out" />
2525
<Text content="Cubic bezier" />
26-
<Animation name="spinner" timingFunction="ease">
27-
<Icon name="mention" circular bordered />
28-
</Animation>
29-
<Animation name="spinner" timingFunction="linear">
30-
<Icon name="mention" circular bordered />
31-
</Animation>
32-
<Animation name="spinner" timingFunction="ease-in">
33-
<Icon name="mention" circular bordered />
34-
</Animation>
35-
<Animation name="spinner" timingFunction="ease-out">
36-
<Icon name="mention" circular bordered />
37-
</Animation>
38-
<Animation name="spinner" timingFunction="ease-in-out">
39-
<Icon name="mention" circular bordered />
40-
</Animation>
41-
<Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
42-
<Icon name="mention" circular bordered />
43-
</Animation>
26+
<div>
27+
<Animation name="spinner" timingFunction="ease">
28+
<Icon name="mention" circular bordered />
29+
</Animation>
30+
</div>
31+
<div>
32+
<Animation name="spinner" timingFunction="linear">
33+
<Icon name="mention" circular bordered />
34+
</Animation>
35+
</div>
36+
<div>
37+
<Animation name="spinner" timingFunction="ease-in">
38+
<Icon name="mention" circular bordered />
39+
</Animation>
40+
</div>
41+
<div>
42+
<Animation name="spinner" timingFunction="ease-out">
43+
<Icon name="mention" circular bordered />
44+
</Animation>
45+
</div>
46+
<div>
47+
<Animation name="spinner" timingFunction="ease-in-out">
48+
<Icon name="mention" circular bordered />
49+
</Animation>
50+
</div>
51+
<div>
52+
<Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
53+
<Icon name="mention" circular bordered />
54+
</Animation>
55+
</div>
4456
</Grid>
4557
</Provider>
4658
)

‎docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import * as React from 'react'
2+
import { Provider, Animation, Button, Icon } from '@fluentui/react'
3+
import { useLogKnob } from '@fluentui/docs-components'
4+
5+
const AnimationExampleVisible = () => {
6+
const [visible, setVisible] = React.useState(false)
7+
8+
const onEnter = useLogKnob('onEnter')
9+
const onEntering = useLogKnob('onEntering')
10+
const onEntered = useLogKnob('onEntered')
11+
12+
const onExit = useLogKnob('onExit')
13+
const onExiting = useLogKnob('onExiting')
14+
const onExited = useLogKnob('onExited')
15+
16+
return (
17+
<Provider
18+
theme={{
19+
animations: {
20+
fadeEnterSlow: {
21+
keyframe: {
22+
'0%': { opacity: 0 },
23+
'100%': { opacity: 1 },
24+
},
25+
duration: '500ms',
26+
timingFunction: 'cubic-bezier(0.33,0.00,0.67,1.00)',
27+
fillMode: 'forwards',
28+
},
29+
fadeExitSlow: {
30+
keyframe: {
31+
'0%': { opacity: 1 },
32+
'100%': { opacity: 0 },
33+
},
34+
duration: '500ms',
35+
timingFunction: 'cubic-bezier(0.33,0.00,0.67,1.00)',
36+
fillMode: 'forwards',
37+
},
38+
},
39+
}}
40+
>
41+
<Button onClick={() => setVisible(!visible)}>{visible ? 'Hide' : 'Show'}</Button>&emsp;
42+
{/* Children as function */}
43+
<Animation
44+
visible={visible}
45+
timeout={{
46+
enter: 1000,
47+
exit: 2000,
48+
}}
49+
onEnter={onEnter}
50+
onEntering={onEntering}
51+
onEntered={onEntered}
52+
onExit={onExit}
53+
onExiting={onExiting}
54+
onExited={onExited}
55+
name={visible ? 'fadeEnterSlow' : 'fadeExitSlow'}
56+
mountOnEnter
57+
unmountOnExit
58+
>
59+
{({ classes }) => <Icon name="mention" className={classes} />}
60+
</Animation>
61+
{/* Children as element */}
62+
<Animation
63+
visible={visible}
64+
timeout={{
65+
enter: 1000,
66+
exit: 2000,
67+
}}
68+
onEnter={onEnter}
69+
onEntering={onEntering}
70+
onEntered={onEntered}
71+
onExit={onExit}
72+
onExiting={onExiting}
73+
onExited={onExited}
74+
name={visible ? 'fadeEnterSlow' : 'fadeExitSlow'}
75+
mountOnEnter
76+
unmountOnExit
77+
>
78+
<Icon name="mention" />
79+
</Animation>
80+
</Provider>
81+
)
82+
}
83+
84+
export default AnimationExampleVisible

‎docs/src/examples/components/Animation/Usage/index.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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="Usage">
7+
<ComponentExample
8+
title="Visible/Not visible"
9+
description="An Animation can use the visible prop with combination of mountOnEnter or mountOnExit for adding/removing the element from the DOM."
10+
examplePath="components/Animation/Usage/AnimationExampleVisible"
11+
/>
12+
</ExampleSection>
13+
)
14+
15+
export default Types

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

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

45
const AnimationExamples = () => (
56
<div>
67
<Types />
8+
<Usage />
79
</div>
810
)
911

0 commit comments

Comments
 (0)