feat(react-motion): add support for params by layershifter · Pull Request #31566 · microsoft/fluentui

layershifter · 2024-06-04T16:02:35Z

New Behavior

Adds support for custom props (params) in motions to to createMotionComponent() & createPresenceComponent().

const Scale = createPresenceComponent<{ startFrom?: number }>(({ startFrom = 0.5 }) => {
  const keyframes = [
    { opacity: 0, transform: `scale(${startFrom})` },
    { opacity: 1, transform: 'scale(1)' },
  ];

  return {
    enter: {
      keyframes,
      duration: motionTokens.durationUltraSlow,
    },
    exit: {
      keyframes: [...keyframes].reverse(),
      duration: motionTokens.durationSlow,
    },
  };
});

Related Issue(s)

Fixes #31576.

fabricteam · 2024-06-04T16:09:16Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: entire library	`1.094 MB` `270.621 kB`	`1.094 MB` `270.67 kB`	`117 B` `49 B`
`react-dialog` Dialog (including children components)	`99.312 kB` `29.997 kB`	`99.369 kB` `30.021 kB`	`57 B` `24 B`
`react-toast` Toast (including Toaster)	`97.869 kB` `29.513 kB`	`97.926 kB` `29.538 kB`	`57 B` `25 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.141 kB` `20.157 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`212.636 kB` `61.23 kB`
`react-components` react-components: FluentProvider & webLightTheme	`44.442 kB` `14.607 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-timepicker-compat` TimePicker	`103.487 kB` `34.632 kB`

_{🤖 This report was generated against 9e51d124f38d84ea7072f25e7d4f3e4c5dd9c4b0}

fabricteam · 2024-06-04T16:16:39Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	644	616	5000
Button	mount	305	304	5000
Field	mount	1145	1168	5000
FluentProvider	mount	705	713	5000
FluentProviderWithTheme	mount	85	88	10
FluentProviderWithTheme	virtual-rerender	38	35	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	77	10
MakeStyles	mount	864	855	50000
Persona	mount	1760	1710	5000
SpinButton	mount	1444	1371	5000
SwatchPicker	mount	1533	1555	5000

packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts

robertpenner

Glad to see this useful feature be formalized.

packages/react-components/react-motion/src/types.ts

packages/react-components/react-motion/src/factories/createMotionComponent.ts

packages/react-components/react-motion/src/factories/createPresenceComponent.ts

…-and-drawer-compat * master: (43 commits) chore: remove react-alert from monorepo (microsoft#31642) docs(react-skeleton): extend Skeleton story with SkeletonItem examples (microsoft#31608) feat(react-motion): add support for params (microsoft#31566) applying package updates fix: show default title action in dialog body for modal dialogs (microsoft#31648) chore:(react-nav-preview)Remove redundant NavDrawerHeaderNav component. (microsoft#31646) Update Accordion Size story to allow collapsing (microsoft#31624) fix(react-accordion): deprecate navigation prop (microsoft#31587) fix: Drawer story accessibility fixes and docs update (microsoft#31570) feat:(react-nav-preview) Adds small size variant (microsoft#31589) feat: update divider to use element internals (microsoft#31627) chore(react-components): split react libraries in two (/library and /stories) - teams-prg /3rd batch (microsoft#31601) chore:(docs) Adding Jest testing document (microsoft#31554) chore(react-components): split react libraries in two (/library and /stories) - teams-prg /2nd batch (microsoft#31600) build(deps): bump tar from 6.1.11 to 6.2.1 (microsoft#31633) applying package updates fix: allow updating of CSS properties when they are already defined (microsoft#31629) fix: corrects the border-color for switch when in the checked state on rest (microsoft#31628) chore: update Switch to leverage ElementInternals via Checkbox (microsoft#31613) chore: update temporarily codeowners for split-in-two migrated packages to maintain proper PR review assignemnt for outdated branches (microsoft#31616) ...

* master: (43 commits) chore: remove react-alert from monorepo (microsoft#31642) docs(react-skeleton): extend Skeleton story with SkeletonItem examples (microsoft#31608) feat(react-motion): add support for params (microsoft#31566) applying package updates fix: show default title action in dialog body for modal dialogs (microsoft#31648) chore:(react-nav-preview)Remove redundant NavDrawerHeaderNav component. (microsoft#31646) Update Accordion Size story to allow collapsing (microsoft#31624) fix(react-accordion): deprecate navigation prop (microsoft#31587) fix: Drawer story accessibility fixes and docs update (microsoft#31570) feat:(react-nav-preview) Adds small size variant (microsoft#31589) feat: update divider to use element internals (microsoft#31627) chore(react-components): split react libraries in two (/library and /stories) - teams-prg /3rd batch (microsoft#31601) chore:(docs) Adding Jest testing document (microsoft#31554) chore(react-components): split react libraries in two (/library and /stories) - teams-prg /2nd batch (microsoft#31600) build(deps): bump tar from 6.1.11 to 6.2.1 (microsoft#31633) applying package updates fix: allow updating of CSS properties when they are already defined (microsoft#31629) fix: corrects the border-color for switch when in the checked state on rest (microsoft#31628) chore: update Switch to leverage ElementInternals via Checkbox (microsoft#31613) chore: update temporarily codeowners for split-in-two migrated packages to maintain proper PR review assignemnt for outdated branches (microsoft#31616) ...

github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 4, 2024

layershifter force-pushed the chore/motions-params branch from ec97398 to 3b9d802 Compare June 4, 2024 16:23

fabricteam reviewed Jun 4, 2024

View reviewed changes

packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts Show resolved Hide resolved

layershifter force-pushed the chore/motions-params branch 2 times, most recently from 0be9854 to cfc152d Compare June 7, 2024 08:24

layershifter marked this pull request as ready for review June 7, 2024 08:25

layershifter requested a review from a team as a code owner June 7, 2024 08:25

layershifter changed the title ~~feat(motions): add support for params~~ feat(react-motion): add support for params Jun 7, 2024

ling1726 approved these changes Jun 7, 2024

View reviewed changes

robertpenner approved these changes Jun 7, 2024

View reviewed changes

packages/react-components/react-motion/src/types.ts Show resolved Hide resolved

packages/react-components/react-motion/src/factories/createMotionComponent.ts Show resolved Hide resolved

robertpenner reviewed Jun 7, 2024

View reviewed changes

packages/react-components/react-motion/src/factories/createPresenceComponent.ts Outdated Show resolved Hide resolved

robertpenner approved these changes Jun 10, 2024

View reviewed changes

layershifter added 2 commits June 10, 2024 22:10

feat(motions): add support for params

86f7057

address PR review

54a83fa

layershifter force-pushed the chore/motions-params branch from 13369f1 to 54a83fa Compare June 10, 2024 20:10

layershifter merged commit 1b681fc into microsoft:master Jun 11, 2024

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024

feat(react-motion): add support for params (microsoft#31566)

2f8d23d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-motion): add support for params#31566

feat(react-motion): add support for params#31566
layershifter merged 2 commits intomicrosoft:masterfrom
layershifter:chore/motions-params

layershifter commented Jun 4, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 4, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 4, 2024 •

edited

Loading

Uh oh!

Uh oh!

robertpenner left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

layershifter commented Jun 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jun 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jun 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

Uh oh!

robertpenner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

layershifter commented Jun 4, 2024 •

edited

Loading

fabricteam commented Jun 4, 2024 •

edited

Loading

fabricteam commented Jun 4, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)