diff --git a/CHANGELOG.md b/CHANGELOG.md index c609df70ed..cf730215e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### BREAKING CHANGES - Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222)) +- Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239)) ### Fixes - Fix event lister leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227)) diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index 0891b5eff3..c0597d6867 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -221,8 +221,7 @@ export default () => (
This is done with the Provider's theme
prop. The animations are then applied
based on their name by using the animation
property available on all Fluent UI component. Here's
- how we can use them in our components.
+ component. Here's how we can use them in our components.
You can also override some of the defined animation
properties, by providing
- additional properties to the Animation
component, or the animation
{' '}
- prop.
+ additional properties to the Animation
component.
@@ -283,26 +280,13 @@ export default () => (- + + )} /> - -+ - The difference between using the Animation component versus the animation property is that, - the Animation component can be safely used for applying animations on{' '} - all components (Fluent UI, custom and third party components). For the Fluent UI - 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 theanimation
property in any of the Fluent UI components. -{ )(theme.siteVariables) : resolvedComponentVariables[displayName] - const animationStyles = props.animation - ? createAnimationStyles(props.animation, theme) - : undefined - // Resolve styles using resolved variables, merge results, allow props.styles to override const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles( theme.componentStyles[displayName], props.design && withDebugId({ root: props.design }, 'props.design'), props.styles && withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'), - animationStyles && withDebugId({ root: animationStyles }, 'props.animation'), ) const styleParam: ComponentStyleFunctionParam = { diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 7a2e636ee9..4886306882 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -13,7 +13,6 @@ export default { color, important, timestamp, - animation, truncated, disabled, error, @@ -28,8 +27,6 @@ export default { const colors = v.colorScheme[getColorSchemeKey(color)] return { ...(color && { color: colors.foreground }), - // animations are not working with span, unless display is set to 'inline-block' - ...(animation && as === 'span' && { display: 'inline-block' }), ...(atMention === true && { color: v.atMentionOtherColor }), ...(truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }), ...(disabled && { color: v.disabledColor }), diff --git a/packages/react/src/utils/commonPropInterfaces.ts b/packages/react/src/utils/commonPropInterfaces.ts index 5282965f92..ac4d6d4469 100644 --- a/packages/react/src/utils/commonPropInterfaces.ts +++ b/packages/react/src/utils/commonPropInterfaces.ts @@ -1,7 +1,6 @@ -import { ComponentAnimationProp, ComponentDesignProp } from '@fluentui/react-bindings' +import { ComponentDesignProp } from '@fluentui/react-bindings' import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles' import * as React from 'react' - import { ReactChildren } from '../types' export interface StyledComponentProps { @@ -12,14 +11,7 @@ export interface StyledComponentProps
{ variables?: ComponentVariablesInput } -export interface AnimatedComponentProps { - /** Generic animation property that can be used for applying different theme animations. */ - animation?: ComponentAnimationProp -} - -export interface UIComponentProps
- extends StyledComponentProps
, - AnimatedComponentProps { +export interface UIComponentProps
extends StyledComponentProps
{ /** Additional CSS class name(s) to apply. */ className?: string design?: ComponentDesignProp diff --git a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap index 819dd55629..73b9a98b65 100644 --- a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap +++ b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap @@ -12,10 +12,15 @@ exports[`felaRenderer CSS fallback values are rendered 1`] = ` `; exports[`felaRenderer animations are not applied if animations are disabled 1`] = ` -" +".a { + display: inline-block; +} +
- +; " `; @@ -58,12 +63,17 @@ exports[`felaRenderer array returned by keyframe results in CSS fallback values } } .a { + display: inline-block; +} +.b { animation-name: k1; }+ +- +; " `; @@ -104,15 +114,20 @@ exports[`felaRenderer keyframe colors are rendered 1`] = ` } } .a { - animation-name: k1; + display: inline-block; } .b { + animation-name: k1; +} +.c { animation-duration: 5s; }+ +- +; " `; diff --git a/packages/react/test/specs/utils/felaRenderer-test.tsx b/packages/react/test/specs/utils/felaRenderer-test.tsx index 052400b716..bc776f781c 100644 --- a/packages/react/test/specs/utils/felaRenderer-test.tsx +++ b/packages/react/test/specs/utils/felaRenderer-test.tsx @@ -2,9 +2,38 @@ import * as React from 'react' import { createSnapshot } from 'jest-react-fela' import { EmptyThemeProvider } from 'test/utils' import Box from 'src/components/Box/Box' +import Animation from 'src/components/Animation/Animation' import Provider from 'src/components/Provider/Provider' import Text from 'src/components/Text/Text' import { felaRenderer } from 'src/utils' +import { + ComponentAnimationProp, + unstable_createAnimationStyles as createAnimationStyles, +} from '@fluentui/react-bindings' + +// Animation component depends on theme styles 💣 +// Issue: https://github.com/microsoft/fluent-ui-react/issues/2247 +// This adds required styles when needed. +const AnimationComponentStyles = { + root: () => ({ + display: 'inline-block', + }), + children: ({ props: p, theme }) => { + const animation: ComponentAnimationProp = { + name: p.name, + keyframeParams: p.keyframeParams, + duration: p.duration, + delay: p.delay, + iterationCount: p.iterationCount, + direction: p.direction, + fillMode: p.fillMode, + playState: p.playState, + timingFunction: p.timingFunction, + } + + return createAnimationStyles(animation, theme) + }, +} describe('felaRenderer', () => { test('basic styles are rendered', () => { @@ -47,8 +76,15 @@ describe('felaRenderer', () => { } const snapshot = createSnapshot( -+ +- + + , {}, felaRenderer, @@ -71,8 +107,15 @@ describe('felaRenderer', () => { } const snapshot = createSnapshot( -+ + - + + , {}, felaRenderer, @@ -95,8 +138,16 @@ describe('felaRenderer', () => { } const snapshot = createSnapshot( -+ + - + + , {}, felaRenderer,+ +