Skip to content

Renaming some of the animation props#7477

Merged
PavelVanecek merged 4 commits into
mainfrom
rename
Jun 20, 2026
Merged

Renaming some of the animation props#7477
PavelVanecek merged 4 commits into
mainfrom
rename

Conversation

@PavelVanecek

@PavelVanecek PavelVanecek commented Jun 20, 2026

Copy link
Copy Markdown
Collaborator

Renaming to better match the new structure. This is not a breaking change because none of these components are published to npm yet

Summary by CodeRabbit

  • Refactor

    • Renamed animation management configuration from animationManager to animationController across animation components and updated the way components receive and run animations.
    • Introduced a new AnimationControllerProvider and corresponding hook to select the controller from props or fall back to context.
    • Updated animation contracts and the CSS transition animation class naming to the new state-machine-based API.
  • Tests

    • Updated animation tests to use animationController and the new animation/controller wiring.

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1ca4f6f9-ce41-48f1-97dc-aa4e34c8b8c4

📥 Commits

Reviewing files that changed from the base of the PR and between ec432d3 and ef92fe4.

📒 Files selected for processing (2)
  • src/animation/AnimationStateMachine.ts
  • src/animation/JavascriptAnimate.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/animation/JavascriptAnimate.tsx
  • src/animation/AnimationStateMachine.ts

Walkthrough

Renames the core animation interface from RechartsAnimation to AnimationStateMachine and the CSS transition class from CSSTransition to CSSTransitionAnimation. Replaces useAnimationManager/AnimationManagerContext with a new useAnimationController/AnimationControllerProvider. Renames the animationManager prop to animationController in both animation components and propagates all changes through controllers, test helpers, specs, and build snapshots.

Changes

Animation API rename: RechartsAnimation → AnimationStateMachine

Layer / File(s) Summary
Core animation contract rename
src/animation/AnimationStateMachine.ts
Exports AnimationState, renames the public interface from RechartsAnimation to AnimationStateMachine, updates RechartsAnimationImpl to implement the renamed interface, and renames the exported class from CSSTransition to CSSTransitionAnimation.
AnimationController and AnimationControllerImpl type updates
src/animation/AnimationController.ts, src/animation/AnimationControllerImpl.ts
Updates the AnimationController type alias and animationControllerImpl function to accept AnimationStateMachine<T, E> instead of RechartsAnimation<T, E> as the animationHandle parameter.
New useAnimationController hook; removal of useAnimationManager
src/animation/useAnimationController.tsx
Adds AnimationControllerContext, AnimationControllerProvider, and useAnimationController hook with memoized prop-or-context resolution. Removes the old useAnimationManager.tsx and its AnimationManagerContext.
Component prop and hook swap
src/animation/CSSTransitionAnimate.tsx, src/animation/JavascriptAnimate.tsx
Both components replace useAnimationManager with useAnimationController, rename the optional prop from animationManager to animationController, switch CSSTransition(...) to CSSTransitionAnimation(...), and update useEffect dependency arrays.
Test mocks, helpers, and provider swap
test/animation/CompositeAnimationManager.ts, test/animation/MockProgressAnimationManager.ts, test/animation/mockAnimationController.ts, test/helper/createSelectorTestCase.tsx, test/polar/Radar.animation.spec.tsx
Updates all test mock types to AnimationStateMachine, tightens visibility of CompositeAnimationManager internals, and replaces AnimationManagerContext.Provider with AnimationControllerProvider throughout test helpers.
Test spec prop renames and snapshot updates
test/animation/CSSTransitionAnimate.timing.spec.tsx, test/animation/JavascriptAnimate.*.spec.tsx, test/animation/RechartsAnimation.spec.ts, test/animation/AnimationControllerImpl.spec.ts, scripts/snapshots/*Files.txt
Updates all spec files to pass animationController prop instead of animationManager, uses CSSTransitionAnimation in place of CSSTransition, and updates build snapshot lists to reflect renamed files.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • recharts/recharts#7457: Directly related — introduces the earlier phase of the same animation refactor, modifying AnimationController.ts/AnimationControllerImpl.ts and React wiring, which this PR continues by completing the rename from RechartsAnimation to AnimationStateMachine and swapping useAnimationManager for useAnimationController.

Suggested labels

typescript

Suggested reviewers

  • ckifer
🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (1 warning, 2 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'Renaming some of the animation props' is vague and only partially captures the scope of changes, which include renaming interfaces, classes, hooks, and context providers throughout the animation system. Provide a more specific title that clearly describes the main refactoring, such as 'Refactor animation system: rename RechartsAnimation to AnimationStateMachine and update related components'.
Description check ❓ Inconclusive The PR description is minimal and lacks required template sections including motivation, testing details, and types of changes. While it provides some context, it does not fully explain the scope or impact of the refactoring. Complete the description template with sections for Motivation and Context, How Has This Been Tested, and mark the appropriate change type checkbox (likely 'Breaking change' given the public interface renaming).
✅ Passed checks (2 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch rename

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov

codecov Bot commented Jun 20, 2026

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 7.01kB (0.13%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.43MB 1.26kB (0.09%) ⬆️
recharts/bundle-es6 1.25MB 1.21kB (0.1%) ⬆️
recharts/bundle-umd 586.0kB 18 bytes (0.0%) ⬆️
recharts/bundle-treeshaking-cartesian 714.93kB 1.15kB (0.16%) ⬆️
recharts/bundle-treeshaking-polar 471.69kB 1.11kB (0.24%) ⬆️
recharts/bundle-treeshaking-treemap 385.78kB 1.15kB (0.3%) ⬆️
recharts/bundle-treeshaking-sankey 372.69kB 1.11kB (0.3%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
animation/AnimationStateMachine.js (New) 7.14kB 7.14kB 100.0% 🚀
animation/CSSTransitionAnimate.js 43 bytes 4.54kB 0.96%
animation/JavascriptAnimate.js 25 bytes 3.8kB 0.66%
animation/useAnimationController.js (New) 1.69kB 1.69kB 100.0% 🚀
animation/RechartsAnimation.js (Deleted) -7.13kB 0 bytes -100.0% 🗑️
animation/useAnimationManager.js (Deleted) -562 bytes 0 bytes -100.0% 🗑️
view changes for bundle: recharts/bundle-treeshaking-sankey

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 1.11kB 372.69kB 0.3%
view changes for bundle: recharts/bundle-treeshaking-polar

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 1.11kB 471.69kB 0.24%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
animation/AnimationStateMachine.js (New) 7.4kB 7.4kB 100.0% 🚀
animation/CSSTransitionAnimate.js 45 bytes 4.84kB 0.94%
animation/JavascriptAnimate.js 36 bytes 4.08kB 0.89%
animation/useAnimationController.js (New) 1.93kB 1.93kB 100.0% 🚀
animation/RechartsAnimation.js (Deleted) -7.36kB 0 bytes -100.0% 🗑️
animation/useAnimationManager.js (Deleted) -787 bytes 0 bytes -100.0% 🗑️
view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 18 bytes 586.0kB 0.0%
view changes for bundle: recharts/bundle-treeshaking-treemap

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 1.15kB 385.78kB 0.3%
view changes for bundle: recharts/bundle-treeshaking-cartesian

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 1.15kB 714.93kB 0.16%

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
src/animation/AnimationStateMachine.ts (1)

15-23: ⚡ Quick win

Update JSDoc comments to reflect the renamed interface.

The JSDoc comments still reference "RechartsAnimation" instead of "AnimationStateMachine" in the state descriptions (lines 17-20). For consistency and clarity, these should be updated to match the renamed interface.

📝 Proposed JSDoc update
   /**
    * Returns the state machine current state
-   * - `init`:       RechartsAnimation had just been created. It immediately calls `onAnimationStart`
-   * - `pending`:    RechartsAnimation is now paused for `animationBegin` milliseconds until the transition begins
-   * - `active`:     RechartsAnimation is transitioning items on screen
-   * - `completed`:  RechartsAnimation has completed its transition and executed `onAnimationEnd`.
+   * - `init`:       AnimationStateMachine had just been created. It immediately calls `onAnimationStart`
+   * - `pending`:    AnimationStateMachine is now paused for `animationBegin` milliseconds until the transition begins
+   * - `active`:     AnimationStateMachine is transitioning items on screen
+   * - `completed`:  AnimationStateMachine has completed its transition and executed `onAnimationEnd`.
    *                 This state is final and the animation is no longer allowed to transition to other states.
    */
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/animation/AnimationStateMachine.ts` around lines 15 - 23, Update the
JSDoc comments for the getState() method in AnimationStateMachine to replace the
outdated references to "RechartsAnimation" with "AnimationStateMachine".
Specifically, update lines 17-20 in the comment block where it describes the
different animation states (init, pending, active, completed) to ensure the
comments refer to AnimationStateMachine instead of the old RechartsAnimation
name for consistency and clarity.
src/animation/JavascriptAnimate.tsx (1)

57-57: ⚡ Quick win

Rename local variable for consistency with CSSTransitionAnimate.

The local variable is still named animationManager, but the prop and hook have been renamed to animationController. In the parallel file CSSTransitionAnimate.tsx (line 68), the local variable was renamed to match the new naming. For consistency within this PR and to align variable names with prop/hook names, consider renaming this variable to animationController.

♻️ Proposed refactor
-  const animationManager = useAnimationController(props.animationController);
+  const animationController = useAnimationController(props.animationController);
   const [style, setStyle] = useState<number>(isActive ? from : to);

And update the usage and dependency array:

-    return animationManager(timeoutController, animation, setStyle);
-  }, [animationManager, animationId, isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd]);
+    return animationController(timeoutController, animation, setStyle);
+  }, [animationController, animationId, isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd]);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/animation/JavascriptAnimate.tsx` at line 57, The local variable
`animationManager` assigned from the `useAnimationController` hook call should
be renamed to `animationController` to maintain consistency with the prop name
and hook name, aligning with the changes already made in the parallel file
`CSSTransitionAnimate.tsx`. Find the variable declaration of `animationManager`
at the `useAnimationController(props.animationController)` call and rename it to
`animationController` throughout the component, including all references to this
variable and any dependency arrays that include this variable.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/animation/AnimationStateMachine.ts`:
- Around line 15-23: Update the JSDoc comments for the getState() method in
AnimationStateMachine to replace the outdated references to "RechartsAnimation"
with "AnimationStateMachine". Specifically, update lines 17-20 in the comment
block where it describes the different animation states (init, pending, active,
completed) to ensure the comments refer to AnimationStateMachine instead of the
old RechartsAnimation name for consistency and clarity.

In `@src/animation/JavascriptAnimate.tsx`:
- Line 57: The local variable `animationManager` assigned from the
`useAnimationController` hook call should be renamed to `animationController` to
maintain consistency with the prop name and hook name, aligning with the changes
already made in the parallel file `CSSTransitionAnimate.tsx`. Find the variable
declaration of `animationManager` at the
`useAnimationController(props.animationController)` call and rename it to
`animationController` throughout the component, including all references to this
variable and any dependency arrays that include this variable.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a7c45171-24bc-47c5-b707-d7bf441b7ced

📥 Commits

Reviewing files that changed from the base of the PR and between a1b89c6 and ec432d3.

📒 Files selected for processing (20)
  • scripts/snapshots/es6Files.txt
  • scripts/snapshots/libFiles.txt
  • scripts/snapshots/typesFiles.txt
  • src/animation/AnimationController.ts
  • src/animation/AnimationControllerImpl.ts
  • src/animation/AnimationStateMachine.ts
  • src/animation/CSSTransitionAnimate.tsx
  • src/animation/JavascriptAnimate.tsx
  • src/animation/useAnimationController.tsx
  • src/animation/useAnimationManager.tsx
  • test/animation/AnimationControllerImpl.spec.ts
  • test/animation/CSSTransitionAnimate.timing.spec.tsx
  • test/animation/CompositeAnimationManager.ts
  • test/animation/JavascriptAnimate.progress.spec.tsx
  • test/animation/JavascriptAnimate.timing.spec.tsx
  • test/animation/MockProgressAnimationManager.ts
  • test/animation/RechartsAnimation.spec.ts
  • test/animation/mockAnimationController.ts
  • test/helper/createSelectorTestCase.tsx
  • test/polar/Radar.animation.spec.tsx
💤 Files with no reviewable changes (1)
  • src/animation/useAnimationManager.tsx

@chromatic-com

chromatic-com Bot commented Jun 20, 2026

Copy link
Copy Markdown

Tip

All tests passed and all changes approved!

🟢 UI Tests: 198 tests unchanged
🟢 UI Review: 198 stories published -- no changes
Storybook icon Storybook Publish: 198 stories published

@codecov

codecov Bot commented Jun 20, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.41%. Comparing base (a1b89c6) to head (ef92fe4).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7477   +/-   ##
=======================================
  Coverage   88.41%   88.41%           
=======================================
  Files         602      602           
  Lines       13906    13907    +1     
  Branches     3513     3514    +1     
=======================================
+ Hits        12295    12296    +1     
  Misses       1428     1428           
  Partials      183      183           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@github-actions

Copy link
Copy Markdown
Contributor

1 similar comment
@github-actions

Copy link
Copy Markdown
Contributor

@PavelVanecek
PavelVanecek merged commit 410cf5c into main Jun 20, 2026
65 checks passed
@PavelVanecek
PavelVanecek deleted the rename branch June 20, 2026 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant