Skip to content

feat(motion): add collapse motion for Accordion#32086

Merged
pixel-perfectionist merged 2 commits into
microsoft:masterfrom
pixel-perfectionist:feat/accordion-collpse-animation
Jul 29, 2024
Merged

feat(motion): add collapse motion for Accordion#32086
pixel-perfectionist merged 2 commits into
microsoft:masterfrom
pixel-perfectionist:feat/accordion-collpse-animation

Conversation

@pixel-perfectionist

Copy link
Copy Markdown
Member
  • Updated dependencies in package.json
  • Enhanced useAccordionHeader.tsx for collapse motion
  • Added AccordionMotion.ts
  • Updated types and rendering logic in Accordion components
  • Styled useAccordionPanelStyles.styles.ts for animations
  • Created stories custom motion Accordion

Previous Behavior

AccordionPanel didn't have a collapse animation

New Behavior

  • AccordionPanel gets collapseMotion slot

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

Related issues

@fabricteam

fabricteam commented Jul 23, 2024

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
99.137 kB
30.201 kB
104.333 kB
32.092 kB
5.196 kB
1.891 kB
react-components
react-components: Button, FluentProvider & webLightTheme
0 B
0 B
69.141 kB
20.157 kB
🆕 New entry
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
0 B
0 B
217.326 kB
63.005 kB
🆕 New entry
react-components
react-components: FluentProvider & webLightTheme
0 B
0 B
44.442 kB
14.607 kB
🆕 New entry
react-components
react-components: entire library
0 B
0 B
1.098 MB
271.528 kB
🆕 New entry
react-portal-compat
PortalCompatProvider
0 B
0 B
8.39 kB
2.64 kB
🆕 New entry
react-timepicker-compat
TimePicker
0 B
0 B
106.611 kB
35.546 kB
🆕 New entry

🤖 This report was generated against ceacd96379e6d7268d1807a318a9b6f7c48f519b

@pixel-perfectionist
pixel-perfectionist force-pushed the feat/accordion-collpse-animation branch from afd34e3 to cb1f612 Compare July 23, 2024 22:23
@pixel-perfectionist
pixel-perfectionist force-pushed the feat/accordion-collpse-animation branch from cb1f612 to 8e0a4d6 Compare July 24, 2024 12:31
@fabricteam

fabricteam commented Jul 24, 2024

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 646 620 5000
Button mount 304 313 5000
Field mount 1154 1147 5000
FluentProvider mount 710 718 5000
FluentProviderWithTheme mount 86 79 10
FluentProviderWithTheme virtual-rerender 36 33 10
FluentProviderWithTheme virtual-rerender-with-unmount 76 69 10
MakeStyles mount 862 863 50000
Persona mount 1805 1723 5000
SpinButton mount 1434 1436 5000
SwatchPicker mount 1663 1647 5000

Comment thread change/@fluentui-react-accordion-67ff3ccc-c9c6-47c5-9a09-68e6d9bfe110.json Outdated
Comment thread packages/react-components/react-accordion/library/package.json Outdated
Comment thread packages/react-components/react-accordion/stories/src/Accordion/index.stories.tsx Outdated
@pixel-perfectionist
pixel-perfectionist force-pushed the feat/accordion-collpse-animation branch 3 times, most recently from 9ac27a7 to cb9a64f Compare July 26, 2024 17:03
@pixel-perfectionist
pixel-perfectionist marked this pull request as ready for review July 29, 2024 13:57
@pixel-perfectionist
pixel-perfectionist requested a review from a team as a code owner July 29, 2024 13:57
pixel-perfectionist and others added 2 commits July 29, 2024 10:37
- Updated dependencies in `package.json`
- Enhanced `useAccordionHeader.tsx` for collapse motion
- Added `AccordionMotion.ts`
- Updated types and rendering logic in Accordion components
- Styled `useAccordionPanelStyles.styles.ts` for animations
- Created stories custom motion Accordion
@pixel-perfectionist
pixel-perfectionist force-pushed the feat/accordion-collpse-animation branch from 61cd189 to aac3254 Compare July 29, 2024 14:38
@pixel-perfectionist
pixel-perfectionist merged commit d33f993 into microsoft:master Jul 29, 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.

Accordion motion: open/close

4 participants