fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

feat(Collapse): create CollapseDelayed variant

Open robertpenner opened this issue 1 year ago • 2 comments

Previous Behavior

  • Collapse animates size (height or width) and opacity in sync: they start together and have the same duration.

New Behavior

  • CollapseDelayed is a new variant that animates size and opacity separately:
    • Enter: size expands immediately, while the fade-in starts after a delay.
    • Exit: fade-out first, then size collapses after a delay.

Documentation

  • Added a CollapseDelayed example in Storybook.

Refactoring

  • Extracted Collapse motion atom objects to reusable factory functions and moved them to a separate file.
  • Moved Collapse types to a separate file as well.

Related Issue(s)

  • Fixes #33068

robertpenner avatar Oct 17 '24 07:10 robertpenner

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
105.317 kB
32.37 kB
106.678 kB
32.689 kB
1.361 kB
319 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
219.108 kB
63.51 kB
220.469 kB
63.821 kB
1.361 kB
311 B
react-components
react-components: entire library
1.157 MB
289.896 kB
1.159 MB
290.234 kB
1.361 kB
338 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.14 kB
20.137 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
107.387 kB
35.758 kB
🤖 This report was generated against 54a28ec2c872c9cbcb3a05204568510429cf0031

fabricteam avatar Oct 17 '24 07:10 fabricteam

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 664 615 5000
Button mount 300 295 5000
Field mount 1119 1117 5000
FluentProvider mount 719 737 5000
FluentProviderWithTheme mount 88 76 10
FluentProviderWithTheme virtual-rerender 32 38 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 72 10
MakeStyles mount 875 871 50000
Persona mount 1773 1740 5000
SpinButton mount 1378 1376 5000
SwatchPicker mount 1684 1671 5000

fabricteam avatar Oct 17 '24 07:10 fabricteam

/azp run license/cla

robertpenner avatar Oct 21 '24 17:10 robertpenner

No pipelines are associated with this pull request.

azure-pipelines[bot] avatar Oct 21 '24 17:10 azure-pipelines[bot]

/azp run

robertpenner avatar Oct 21 '24 17:10 robertpenner

Azure Pipelines successfully started running 4 pipeline(s).

azure-pipelines[bot] avatar Oct 21 '24 17:10 azure-pipelines[bot]