Skip to content

feat(react-motion): add support to provide duration to useMotion hook#29655

Merged
marcosmoura merged 11 commits into
microsoft:masterfrom
marcosmoura:feat/react-motion/useMotionDuration-hook
Oct 26, 2023
Merged

feat(react-motion): add support to provide duration to useMotion hook#29655
marcosmoura merged 11 commits into
microsoft:masterfrom
marcosmoura:feat/react-motion/useMotionDuration-hook

Conversation

@marcosmoura

Copy link
Copy Markdown
Contributor

This PR introduces a new option to useMotion hook: duration
A Storybook documentation will be added in a follow-up PR.

Description

The idea is to have a hook that returns Motion with a predefined hardcoded duration, avoiding the need to compute the styles to infer the duration.
With the addition of this option, we enable the following:

  • When duration is not provided (default), the hook will call a native browser API to compute the styles and determine the duration of a CSS Transition or Animation.
  • When duration is provided, and it is higher than 0, the hook will skip the computation and use the duration to determine when a transition/animation will end.

Usage

const [open, setOpen] = React.useState(false);
const motion = useMotion(open, { duration: 300 });

@marcosmoura marcosmoura added the Package: motion react-motion related changes label Oct 26, 2023
@marcosmoura marcosmoura self-assigned this Oct 26, 2023
@marcosmoura marcosmoura requested a review from a team as a code owner October 26, 2023 10:49
@marcosmoura marcosmoura changed the title feat(react-motion): implement useMotionDuration hook feat(react-motion): add support to provide duration to useMotion hook Oct 26, 2023
@fabricteam

fabricteam commented Oct 26, 2023

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.002 kB
20.161 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.417 kB
59.289 kB
react-components
react-components: FluentProvider & webLightTheme
42.286 kB
14 kB
react-portal-compat
PortalCompatProvider
6.651 kB
2.252 kB
🤖 This report was generated against 01912382b9a202b132f32a78fe8c67db5348b281

@fabricteam

fabricteam commented Oct 26, 2023

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 657 616 5000
Button mount 317 328 5000
Field mount 1094 1134 5000
FluentProvider mount 701 731 5000
FluentProviderWithTheme mount 77 89 10
FluentProviderWithTheme virtual-rerender 61 58 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 74 10
MakeStyles mount 846 851 50000
Persona mount 1745 1751 5000
SpinButton mount 1387 1343 5000

@codesandbox-ci

codesandbox-ci Bot commented Oct 26, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 508f31d:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor

size-auditor Bot commented Oct 26, 2023

Copy link
Copy Markdown

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 01912382b9a202b132f32a78fe8c67db5348b281 (build)

@marcosmoura marcosmoura enabled auto-merge (squash) October 26, 2023 12:45
@marcosmoura marcosmoura merged commit 1865fb7 into microsoft:master Oct 26, 2023
@marcosmoura marcosmoura deleted the feat/react-motion/useMotionDuration-hook branch October 26, 2023 13:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Package: motion react-motion related changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants