This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Snackbar transitions: Replace framer-motion with React transition group #8920
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The release ZIP for this PR is accessible via: TypeScript Errors Report
packages/checkout/components/store-notices-container/index.tsx
packages/checkout/components/store-notices-container/snackbar-notices.tsx |
|
Size Change: -30.8 kB (-3%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
opr
approved these changes
Apr 4, 2023
mikejolley
added a commit
that referenced
this pull request
Apr 4, 2023
mikejolley
added a commit
that referenced
this pull request
Apr 5, 2023
mikejolley
added a commit
that referenced
this pull request
Apr 5, 2023
* Notice banner component * Snackbar support * Switch to new components * Finish snackbar implementation * Summary notice * Styling issues * Fix text wrap in shipping calculator * Storybook entries * Docs and tests for NoticeBanner * Framer motion to avoid components dependency * Snackbar list stories * Docs for snackbar list * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Types/docblocks * Docs * Update notice type * Use NoticeBannerProps for type of noticeProps * Raw html to fix notice encoding * getClassNameFromStatus is unused * Update position text * Clarify notice text * Fix hover style in whisper TT3 theme * remove div styles * Add new templates for legacy buyer notices in WooCommerce core (#8732) * Add templates for legacy core notices * Update src/Domain/Services/Notices.php Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Remove debugging code * DRY get_notices_template * Simplify error template * Fix padding * Only include new notices if using block cart/checkout --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Fix view box tag * Hover and focus styles * Styling when notices added via ajax * Remove margin change * Implement react-transition-group instead of framer (#8920) * Add screenshots to docs --------- Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Based on #8659, this replaces framer motion with React transition group.
https://bundlephobia.com/package/react-transition-group@4.4.5
React transition group is lighter weight, and since we're only using it for animations of snackbars on the frontend, I wanted to see what impact this makes on bundle size.
This was suggested by @senadir
Testing
Automated Tests
User Facing Testing