Skip to content

feat(motion): add Collapse motion component#31982

Merged
pixel-perfectionist merged 6 commits intomicrosoft:masterfrom
pixel-perfectionist:feat/collapse-component
Jul 15, 2024
Merged

feat(motion): add Collapse motion component#31982
pixel-perfectionist merged 6 commits intomicrosoft:masterfrom
pixel-perfectionist:feat/collapse-component

Conversation

@pixel-perfectionist
Copy link
Member

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

Fixes #31982.

  • Implemented Collapse component in react-motion-components-preview
  • Added unit tests for Collapse component
  • Created stories for different scenarios including Default, Exaggerated, Snappy and Custom.
  • Enhanced index and utility files to support new component.
  • Documented usage and configuration in Storybook

New Behavior

PR adds Collapse motion component:

import { Collapse } from '@fluentui/react-motion-components-preview';

function Component({ visible }) {
  return (
    <Collapse visible={visible}>
      <div style={{ background: 'lightblue' }}>Content</div>
    </Collapse>
  );
}

The Collapse component manages content presence, using a height expand/collapse motion.

@pixel-perfectionist pixel-perfectionist self-assigned this Jul 11, 2024
@pixel-perfectionist pixel-perfectionist linked an issue Jul 11, 2024 that may be closed by this pull request
@pixel-perfectionist pixel-perfectionist marked this pull request as ready for review July 11, 2024 21:25
@pixel-perfectionist pixel-perfectionist requested review from a team as code owners July 11, 2024 21:25
@pixel-perfectionist pixel-perfectionist changed the title feat(motion): add Collapse component with comprehensive tests and stories feat(motion): add Collapse motion component Jul 11, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 11, 2024

📊 Bundle size report

✅ No changes found

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 11, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 623 612 5000
Button mount 304 311 5000
Field mount 1145 1103 5000
FluentProvider mount 706 710 5000
FluentProviderWithTheme mount 84 100 10
FluentProviderWithTheme virtual-rerender 36 33 10
FluentProviderWithTheme virtual-rerender-with-unmount 82 82 10
MakeStyles mount 878 844 50000
Persona mount 1810 1715 5000
SpinButton mount 1392 1392 5000
SwatchPicker mount 1648 1652 5000

- Implemented Collapse component in React Motion Library.
- Added unit tests for Collapse component.
- Created stories for different scenarios including custom, default, exaggerated, override, and snappy collapses.
- Updated package.json to include new dependencies and scripts.
- Enhanced index and utility files to support new component.
- Documented usage and configuration in Custom.stories.md and Description.md.
@layershifter layershifter requested review from a team as code owners July 15, 2024 12:34
@layershifter layershifter force-pushed the feat/collapse-component branch 6 times, most recently from da4132a to 8fef16e Compare July 15, 2024 12:50
@layershifter layershifter removed request for a team July 15, 2024 12:50
pixel-perfectionist and others added 3 commits July 15, 2024 09:29
- Implemented Collapse component in React Motion Library.
- Added unit tests for Collapse component.
- Created stories for different scenarios including custom, default, exaggerated, override, and snappy collapses.
- Updated package.json to include new dependencies and scripts.
- Enhanced index and utility files to support new component.
- Documented usage and configuration in Custom.stories.md and Description.md.
@pixel-perfectionist pixel-perfectionist force-pushed the feat/collapse-component branch 2 times, most recently from 0b6119d to f7a0908 Compare July 15, 2024 14:35
@pixel-perfectionist pixel-perfectionist force-pushed the feat/collapse-component branch 2 times, most recently from e31a28f to f3dbbbc Compare July 15, 2024 15:13
@pixel-perfectionist pixel-perfectionist merged commit 8082468 into microsoft:master Jul 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Collapse motion component

3 participants