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