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{' '} - component, or 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.

( @@ -244,7 +243,6 @@ export default () => ( - )} @@ -252,8 +250,7 @@ export default () => (

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 the animation 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,