From 2a9e8fe60b830fff9bfd8d22a8f378fa5f9e0a7c Mon Sep 17 00:00:00 2001 From: Jon S Date: Tue, 14 Jan 2020 10:14:38 -0800 Subject: [PATCH 1/6] Remove the animation prop and update the docs --- docs/src/views/Theming.tsx | 26 ++++--------------- .../react/src/utils/commonPropInterfaces.ts | 12 ++------- 2 files changed, 7 insertions(+), 31 deletions(-) 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. -

- { @@ -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 From 015206bc815f6f38e82985eb96612439ce547f88 Mon Sep 17 00:00:00 2001 From: Jon S Date: Tue, 14 Jan 2020 10:44:16 -0800 Subject: [PATCH 2/6] remove animations from hook --- packages/react-bindings/src/styles/getStyles.ts | 6 ------ .../react/src/themes/teams/components/Text/textStyles.ts | 3 --- 2 files changed, 9 deletions(-) diff --git a/packages/react-bindings/src/styles/getStyles.ts b/packages/react-bindings/src/styles/getStyles.ts index e255592463..a046eb897a 100644 --- a/packages/react-bindings/src/styles/getStyles.ts +++ b/packages/react-bindings/src/styles/getStyles.ts @@ -15,7 +15,6 @@ import { import cx from 'classnames' import * as _ from 'lodash' -import createAnimationStyles from './createAnimationStyles' import resolveStylesAndClasses from './resolveStylesAndClasses' import { ComponentDesignProp, @@ -69,16 +68,11 @@ const getStyles = (options: GetStylesOptions): GetStylesResult => { )(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 }), From bafec08184965a204860a7963dd230b0dc9a5793 Mon Sep 17 00:00:00 2001 From: Jon S Date: Tue, 14 Jan 2020 11:22:29 -0800 Subject: [PATCH 3/6] update change file --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c609df70ed..7a37274437 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)) From 13aa82ad539e9bf2ee4554f1f22ad34e9a2439f2 Mon Sep 17 00:00:00 2001 From: Jon S Date: Tue, 14 Jan 2020 11:59:49 -0800 Subject: [PATCH 4/6] update snapshots --- .../__snapshots__/felaRenderer-test.tsx.snap | 85 +++---------------- .../test/specs/utils/felaRenderer-test.tsx | 13 ++- 2 files changed, 21 insertions(+), 77 deletions(-) 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..231037922c 100644 --- a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap +++ b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap @@ -15,55 +15,20 @@ exports[`felaRenderer animations are not applied if animations are disabled 1`] "

-
+
+
+
; " `; exports[`felaRenderer array returned by keyframe results in CSS fallback values 1`] = ` -"@-webkit-keyframes k1 { - 0% { - color: blue; - color: red; - color: yellow; - } - 100% { - color: blue; - color: red; - color: yellow; - } -} -@-moz-keyframes k1 { - 0% { - color: blue; - color: red; - color: yellow; - } - 100% { - color: blue; - color: red; - color: yellow; - } -} -@keyframes k1 { - 0% { - color: blue; - color: red; - color: yellow; - } - 100% { - color: blue; - color: red; - color: yellow; - } -} -.a { - animation-name: k1; -} - +"
-
+
+
+
; " `; @@ -79,40 +44,12 @@ exports[`felaRenderer basic styles are rendered 1`] = ` `; exports[`felaRenderer keyframe colors are rendered 1`] = ` -"@-webkit-keyframes k1 { - from { - color: red; - } - to { - color: blue; - } -} -@-moz-keyframes k1 { - from { - color: red; - } - to { - color: blue; - } -} -@keyframes k1 { - from { - color: red; - } - to { - color: blue; - } -} -.a { - animation-name: k1; -} -.b { - 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..fee199f98b 100644 --- a/packages/react/test/specs/utils/felaRenderer-test.tsx +++ b/packages/react/test/specs/utils/felaRenderer-test.tsx @@ -2,6 +2,7 @@ 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' @@ -48,7 +49,9 @@ describe('felaRenderer', () => { const snapshot = createSnapshot( - + + + , {}, felaRenderer, @@ -72,7 +75,9 @@ describe('felaRenderer', () => { const snapshot = createSnapshot( - + + + , {}, felaRenderer, @@ -96,7 +101,9 @@ describe('felaRenderer', () => { const snapshot = createSnapshot( - + + + , {}, felaRenderer, From 5888d697b101af0ffb939ad17e5550b45545e7cc Mon Sep 17 00:00:00 2001 From: Jon S Date: Tue, 14 Jan 2020 12:55:24 -0800 Subject: [PATCH 5/6] update changelog to be correct --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a37274437..cf730215e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +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) +- 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)) From dc576ef8245e6b0931f7979c71c5e37ddeb211bf Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 15 Jan 2020 16:09:30 +0100 Subject: [PATCH 6/6] - fix fela snapshot tests --- .../__snapshots__/felaRenderer-test.tsx.snap | 94 +++++++++++++++++-- .../test/specs/utils/felaRenderer-test.tsx | 50 +++++++++- 2 files changed, 133 insertions(+), 11 deletions(-) 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 231037922c..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,13 @@ exports[`felaRenderer CSS fallback values are rendered 1`] = ` `; exports[`felaRenderer animations are not applied if animations are disabled 1`] = ` -" +".a { + display: inline-block; +} +
-
+
; @@ -23,11 +26,53 @@ exports[`felaRenderer animations are not applied if animations are disabled 1`] `; exports[`felaRenderer array returned by keyframe results in CSS fallback values 1`] = ` -" +"@-webkit-keyframes k1 { + 0% { + color: blue; + color: red; + color: yellow; + } + 100% { + color: blue; + color: red; + color: yellow; + } +} +@-moz-keyframes k1 { + 0% { + color: blue; + color: red; + color: yellow; + } + 100% { + color: blue; + color: red; + color: yellow; + } +} +@keyframes k1 { + 0% { + color: blue; + color: red; + color: yellow; + } + 100% { + color: blue; + color: red; + color: yellow; + } +} +.a { + display: inline-block; +} +.b { + animation-name: k1; +} +
-
-
+
+
; " @@ -44,11 +89,44 @@ exports[`felaRenderer basic styles are rendered 1`] = ` `; exports[`felaRenderer keyframe colors are rendered 1`] = ` -" +"@-webkit-keyframes k1 { + from { + color: red; + } + to { + color: blue; + } +} +@-moz-keyframes k1 { + from { + color: red; + } + to { + color: blue; + } +} +@keyframes k1 { + from { + color: red; + } + to { + color: blue; + } +} +.a { + 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 fee199f98b..bc776f781c 100644 --- a/packages/react/test/specs/utils/felaRenderer-test.tsx +++ b/packages/react/test/specs/utils/felaRenderer-test.tsx @@ -6,6 +6,34 @@ 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', () => { @@ -48,7 +76,12 @@ describe('felaRenderer', () => { } const snapshot = createSnapshot( - + @@ -74,7 +107,12 @@ describe('felaRenderer', () => { } const snapshot = createSnapshot( - + @@ -100,7 +138,13 @@ describe('felaRenderer', () => { } const snapshot = createSnapshot( - +