fluentui
fluentui copied to clipboard
feat(Collapse): create CollapseDelayed variant
Previous Behavior
-
Collapseanimates size (height or width) and opacity in sync: they start together and have the same duration.
New Behavior
-
CollapseDelayedis 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
CollapseDelayedexample in Storybook.
Refactoring
- Extracted
Collapsemotion atom objects to reusable factory functions and moved them to a separate file. - Moved
Collapsetypes to a separate file as well.
Related Issue(s)
- Fixes #33068
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-accordion Accordion (including children components) |
105.317 kB32.37 kB |
106.678 kB32.689 kB |
1.361 kB 319 B |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
219.108 kB63.51 kB |
220.469 kB63.821 kB |
1.361 kB 311 B |
| react-components react-components: entire library |
1.157 MB289.896 kB |
1.159 MB290.234 kB |
1.361 kB 338 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react-components react-components: Button, FluentProvider & webLightTheme |
69.14 kB20.137 kB |
| react-components react-components: FluentProvider & webLightTheme |
44.447 kB14.59 kB |
| react-portal-compat PortalCompatProvider |
8.39 kB2.64 kB |
| react-timepicker-compat TimePicker |
107.387 kB35.758 kB |
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 |
/azp run license/cla
No pipelines are associated with this pull request.
/azp run
Azure Pipelines successfully started running 4 pipeline(s).
