Added reusable animation components to FidesUI

[gilluminate]

Ticket ENG-2154

Description Of Changes

Migrated from framer-motion to motion package and added two reusable animation components to fidesui: ExitGrid and ExpandCollapse. These components provide smooth animations for the Action Center UI, specifically for the confidence level cards and expandable rows.

Loom demo

Code Changes

• Installed motion package (v12.23.26) in fidesui
• Added Tailwind base styles to fidesui for transition support
• Created ExitGrid component for grid items with exit animations (slide up and fade out when removed)
• Created ExpandCollapse component for smooth height and opacity transitions
• Replaced direct framer-motion usage with new ExpandCollapse component in MonitorResult
• Refactored ConfidenceRow to use ExitGrid instead of Ant List for better animation support
• Updated chevron icon to use CSS rotation animation for expand/collapse states
• Removed loading skeleton states from Action Center monitor results since they never get used
• Added Discovery Monitor Results to invalidation tags
• Updated success message for bulk field confirmation with celebratory copy

Steps to Confirm

1. Navigate to Data Discovery Action Center page
2. Click to expand/collapse the confidence row on a monitor result using the Findings button
3. Confirm the expand/collapse animation is smooth with proper chevron rotation
4. Perform a "Confirm" action on high confidence level cards and verify everything animates smoothly
5. Note the more robust, celebratory message in the toast

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Dec 16, 2025 5:21pm
fides-privacy-center	Ignored		Dec 16, 2025 5:21pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR successfully migrates from framer-motion to the motion package and introduces two reusable animation components (ExitGrid and ExpandCollapse) to the FidesUI design system. The changes enhance the Action Center UI with smooth animations for confidence level cards and expandable rows. The migration includes installing the motion package, adding Tailwind base styles for animation support, and refactoring existing components to use the new animation wrappers. The PR also includes minor improvements like better cache invalidation, improved success messaging, and cleaner loading state handling. These changes establish a foundation for consistent animations across the Fides application while maintaining the existing functionality.

Important Files Changed

Filename	Score	Overview
clients/fidesui/src/components/animation/ExitGrid.tsx	4/5	New reusable grid component with exit animations using dynamic Tailwind classes
clients/fidesui/src/components/animation/ExpandCollapse.tsx	5/5	New expand/collapse animation wrapper with comprehensive TypeScript interfaces
clients/admin-ui/src/features/data-discovery-and-detection/action-center/ConfidenceRow.tsx	4/5	Refactored from Ant List to ExitGrid component with proper memoization
clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx	4/5	Replaced framer-motion usage with ExpandCollapse component and improved chevron animation
clients/admin-ui/src/pages/data-discovery/action-center/index.tsx	4/5	Simplified loading state handling by removing skeleton functionality
clients/fidesui/package.json	5/5	Added motion package dependency (v12.23.26)
clients/fidesui/src/tailwind.css	5/5	Added Tailwind base styles for animation support
clients/fidesui/src/index.ts	5/5	Exported new animation components and types
clients/fidesui/src/components/animation/index.ts	5/5	Simple index file exporting animation components
clients/admin-ui/src/features/data-discovery-and-detection/action-center/action-center.slice.ts	5/5	Added Discovery Monitor Results to invalidation tags for proper cache management
clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/useConfirmAllFields.tsx	4/5	Updated success message to be more celebratory and increased display duration
CHANGELOG.md	5/5	Added entry documenting the new animation components
clients/.cursor/rules/frontend.mdc	5/5	Updated guidelines to allow Tailwind animation classes

Confidence score: 4/5

• This PR introduces well-architected animation components with minimal risk to existing functionality
• Score reflects minor concerns with dynamic Tailwind class generation and the scope of changes across multiple UI components
• Pay close attention to the ExitGrid component's dynamic Tailwind classes and ConfidenceRow refactoring from Ant List to custom grid implementation

[greptile-apps]

Additional Comments (1)

1. clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx, line 47 (link)

   style: Dead code: showSkeleton is still in the interface (line 47), destructured (line 53), and used (line 112), but is no longer passed from the parent component. Consider removing completely if skeleton loading is intentionally removed.

_{13 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[gilluminate]

@greptileai

[greptile-apps]

_{13 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[lucanovera]

The animation and message look great! Properly implemented animations with the new library. Approved!