Payload CMS Release: 3.0.0-beta.45

TL;DR

PayloadCMS v3.0.0-beta.45 introduces a significant UI enhancement by replacing react-toastify with sonner for toast notifications, offering a cleaner and more modern notification system. This release also includes several important bug fixes for image processing, particularly for animated images, and field path handling. Developers using custom toast notifications will need to update their code to use the new toast API.

Highlight of the Release

• Replaced react-toastify with sonner for a more modern toast notification system
• Fixed image processing issues for animated images
• Corrected field path handling for various scenarios
• Improved toast UI with better padding and button placement

Migration Guide

Migrating from react-toastify to sonner

If you're using custom toast notifications in your PayloadCMS project, you'll need to update your code:

1. Import changes:

   // Before
   import { toast } from 'payload'; // (which used react-toastify)
   
   // After
   import { toast } from 'payload'; // (now uses sonner)
   

2. CSS Selector Changes: If you were styling toast notifications with custom CSS, update your selectors:

   /* Before */
   .Toastify { /* styles */ }
   
   /* After */
   .payload-toast-container { /* styles */ }
   .payload-toast-item { /* styles */ }
   .payload-toast-close-button { /* styles */ }
   
   /* Toast type classes */
   .toast-info { /* styles */ }
   .toast-warning { /* styles */ }
   .toast-success { /* styles */ }
   .toast-error { /* styles */ }
   

3. API Differences: While the basic toast API is similar, there may be differences if you were providing options to your toasts. Review the sonner documentation for specific API details.

4. Remove react-toastify: If you had explicitly installed react-toastify as a dependency, you can remove it if it's no longer needed elsewhere in your project.

Upgrade Recommendations

This release contains a breaking change related to the toast notification system. If you're using custom toast notifications in your project, you should plan for the migration work required.

For production environments: If you heavily rely on toast notifications with custom styling or functionality, consider testing the upgrade in a staging environment first to ensure compatibility.

For development environments: Upgrade at your convenience, but be prepared to update any custom toast implementations.

Urgency: Medium - While the breaking change is significant for projects using custom toast notifications, the benefits of the new system and the bug fixes make this a worthwhile upgrade for most users.

Bug Fixes

Image Processing Fixes

• Animated Image Support: Fixed an issue where sharp files were not being created correctly for animated images. Now, sharp files are properly created for both files with adjustments and animated images.

• Height Calculation for Images: Resolved a bug where non-animated webp/gif files were incorrectly using metadata.pages for height calculations. The system now only uses this property for animated images that actually contain this metadata.

• Field Path Handling: Fixed incorrect field path settings by properly accounting for all four possible scenarios:

  • Both parentPath & fieldName
  • Only parentPath
  • Only fieldName
  • Neither parentPath nor fieldName (top-level rows, etc.)

UI Improvements

• Toast Styling: Fixed padding and button placement issues in toast notifications by adjusting positioning by 1px for better visual alignment.

New Features

Toast System Upgrade

PayloadCMS has migrated from react-toastify to sonner for toast notifications. This change brings a more modern, cleaner notification system with improved animations and styling. The new implementation provides a better user experience with smoother transitions and a more consistent design language that aligns with PayloadCMS's UI principles.

You can see the new toast system in action in the demo video included with the release.

Security Updates

No security fixes were mentioned in this release.

Performance Improvements

No specific performance improvements were mentioned in this release. The focus was on feature enhancement with the new toast system and bug fixes for image processing and field paths.

Impact Summary

PayloadCMS v3.0.0-beta.45 brings a significant UI enhancement by replacing the toast notification system with a more modern alternative, along with several important bug fixes for image processing and field path handling.

The most notable change is the migration from react-toastify to sonner for toast notifications, which is a breaking change for developers who have implemented custom toast notifications in their projects. This requires updating code that uses toast notifications and potentially modifying CSS if custom styling was applied.

The bug fixes address several important issues:

1. Proper handling of animated images in the image processing pipeline
2. Correct height calculations for different image types
3. Fixed field path handling for various scenarios

Overall, this release improves both the developer and user experience with a more polished notification system and more reliable image processing capabilities. The breaking change is well-documented with clear migration instructions, making the upgrade process straightforward despite the required changes.

Full Release Notes