feat: stackLimit prop to limit number of toasts displayed when collapsed #1237
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.
Feature
Adds
stackLimitprop functionality as requested #1175Summary
Added a
stackLimitprop to theToastcomponent to allow users to define a maximum number of toasts to display when stacked, but display all when expanded. The additional toasts are hidden behind the visible stacked toasts, keeping existing behaviour of smooth collapsing and expanding.Why This Change?
This avoids bugs/issues like #1171 by default. Improves the user experience and flexibility of the stacked toast component by keeping the screen cleaner, which is likely the user's intention in using
stackedin the first place.Key Features
Toastcomponent to accept and handle a newstackLimitprop.stackLimitprop.stackLimitsetstackLimitas an optionUsage example
stackLimit.demo.mov
Affected Files
src/types.ts→ addstackLimittype and descriptionsrc/components/ToastContainer.tsx→stackLimitlogicplayground/src/components/App.tsx→handleNumPickerandstackLimitoptionplayground/src/components/ContainerCode.tsx→stacked,stackLimitandlimitoptions now displayedplayground/src/components/constants.ts→ addstackedsrc/core/toast.cy.tsx→ new testsrc/addons/use-notification-center/NotificationCenter.cy.tsxandsrc/addons/use-notification-center/useNotificationCenter.ts→ use local files instead of 'react-toastify' importChecklist
Additional Information
handleNumPickerfunction forlimitandstackLimitin playground to simplifyhandleRadioOrSelectintohandleRadio.limitwhen > 0 andstackLimitwhen > 1 inToastContainerin playground.