Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: Component CSS Transitions/Animations on mount/unmount #27328

Merged

Conversation

marcosmoura
Copy link
Contributor

@marcosmoura marcosmoura commented Mar 27, 2023

RFC to add support for CSS Animation and Transition to mount/unmount of elements. Please refer to the RFC document this PR creates.

A full implementation and live examples of this approach can be found here:
Drawer motion

@github-actions github-actions bot added the Type: RFC Request for Feedback label Mar 27, 2023
@marcosmoura marcosmoura changed the title RFC: Component CSS Transitions on mount/unmount WIP: RFC: Component CSS Transitions on mount/unmount Mar 27, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 27, 2023

📊 Bundle size report

🤖 This report was generated against afcfb2ebe322e2a8e204ac192e68f48f1164107f

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 27, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 17f0406:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Mar 27, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 64fec9dade3f8c033b05332207c33479c26bacb4 (build)

@marcosmoura marcosmoura marked this pull request as ready for review March 29, 2023 12:48
@marcosmoura marcosmoura requested a review from a team as a code owner March 29, 2023 12:48
@marcosmoura marcosmoura changed the title WIP: RFC: Component CSS Transitions on mount/unmount RFC: Component CSS Transitions on mount/unmount Mar 29, 2023
@marcosmoura marcosmoura marked this pull request as draft April 4, 2023 13:40
@marcosmoura marcosmoura mentioned this pull request Apr 4, 2023
46 tasks
@marcosmoura marcosmoura marked this pull request as ready for review June 22, 2023 16:59
@marcosmoura marcosmoura changed the title RFC: Component CSS Transitions on mount/unmount RFC: Component CSS Transitions/Animations on mount/unmount Jun 28, 2023
@behowell
Copy link
Contributor

@spmonahan will review from @microsoft/cxe-red

@tudorpopams tudorpopams assigned marcosmoura and unassigned spmonahan Aug 8, 2023
@marcosmoura marcosmoura requested a review from a team August 21, 2023 12:53
marcosmoura and others added 2 commits August 22, 2023 17:27
…nt-or-unmount.md

Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
…nt-or-unmount.md

Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
@marcosmoura marcosmoura enabled auto-merge (squash) August 23, 2023 19:02
@marcosmoura marcosmoura merged commit fa10a47 into microsoft:master Aug 23, 2023
23 checks passed
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 23, 2023
* master: (27 commits)
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  applying package updates
  bugfix: ensure interop between assertSlots and old API (microsoft#28957)
  chore: rename imports from react-tree to react-components (microsoft#28946)
  applying package updates
  fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)
  Accordion : updated styles for accordion header cursor (microsoft#28850)
  Additional VR tests Charting Library (microsoft#28777)
  feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)
  chore: updates generator to use new slot API (microsoft#28916)
  chore: bumps version of esbuild-loader to v3.2.0 (microsoft#28878)
  ...
@marcosmoura marcosmoura deleted the rfc/mount-unmount-transitions branch August 24, 2023 00:51
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 25, 2023
…e-motion

* feat/use-motion-presence-hook: (25 commits)
  fix: revert changes to CODEOWNERS
  fix: remove duplicated code due to a merge conflict
  fix: upgrade tests
  fix: set motion as active when animations are disabled
  fix: remove debug function
  feat: refactor useMotion to a much more clean/performant logic
  fix:  use correct type for MotionOptions
  fix: improve typings and documentation
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  fix: use correct boolean values
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  fix: remove outdated changefile
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: RFC Request for Feedback
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants