Skip to content

feat(motion): add collapse motion for Tree#32163

Merged
pixel-perfectionist merged 1 commit into
microsoft:masterfrom
pixel-perfectionist:feat/tree-collpse-animation
Aug 1, 2024
Merged

feat(motion): add collapse motion for Tree#32163
pixel-perfectionist merged 1 commit into
microsoft:masterfrom
pixel-perfectionist:feat/tree-collpse-animation

Conversation

@pixel-perfectionist

@pixel-perfectionist pixel-perfectionist commented Jul 30, 2024

Copy link
Copy Markdown
Member

Previous Behavior

renderTree didn't have a collapse animation

New Behavior

  • renderTree gets the new slot for collapse motion: collapseMotion

Motion slots allow to customize or replace built-in motion, see examples in #31984.

Design Specs

Fluent Motion Component Defaults

Related issues

@fabricteam

fabricteam commented Jul 30, 2024

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.094 MB
270.277 kB
1.095 MB
270.363 kB
284 B
86 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
217.326 kB
63.005 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
106.751 kB
35.596 kB
🤖 This report was generated against 20d3c8295ef770eca3562b760d78d1b9649cb7e0

@pixel-perfectionist
pixel-perfectionist marked this pull request as ready for review July 30, 2024 18:12
@pixel-perfectionist
pixel-perfectionist requested a review from a team as a code owner July 30, 2024 18:12
@pixel-perfectionist
pixel-perfectionist force-pushed the feat/tree-collpse-animation branch from f53b605 to f687c5c Compare July 30, 2024 23:37
@fabricteam

fabricteam commented Jul 31, 2024

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 75 79 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 646 633 5000
Button mount 300 306 5000
Field mount 1177 1156 5000
FluentProvider mount 710 709 5000
FluentProviderWithTheme mount 79 88 10
FluentProviderWithTheme virtual-rerender 36 36 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 79 10 Possible regression
MakeStyles mount 859 859 50000
Persona mount 1787 1778 5000
SpinButton mount 1421 1387 5000
SwatchPicker mount 1652 1692 5000

@pixel-perfectionist
pixel-perfectionist requested review from a team and micahgodbolt as code owners July 31, 2024 15:06
@pixel-perfectionist
pixel-perfectionist force-pushed the feat/tree-collpse-animation branch 3 times, most recently from f2cc19d to 5c1a24a Compare July 31, 2024 15:20
@layershifter
layershifter removed request for a team and micahgodbolt July 31, 2024 15:21
@pixel-perfectionist
pixel-perfectionist force-pushed the feat/tree-collpse-animation branch 2 times, most recently from 28f8dc7 to 1b86ebb Compare July 31, 2024 15:25

@bsunderhus bsunderhus left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM: we'd need to update #31548 to follow up on this new motions

@bsunderhus

Copy link
Copy Markdown
Contributor

This PR might be affected by #32173

@robertpenner robertpenner left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's link to the relevant motion design specs: the Collapse spec in Loop, and the Tree motion spec when it's ready (probably this week). Otherwise, looking good.

@pixel-perfectionist
pixel-perfectionist force-pushed the feat/tree-collpse-animation branch from 1b86ebb to 6bb51af Compare August 1, 2024 13:43
@pixel-perfectionist
pixel-perfectionist merged commit 3d0d61f into microsoft:master Aug 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Development

Successfully merging this pull request may close these issues.

Tree motion: open/close

5 participants