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
stackLimit
prop functionality as requested #1175Summary
Added a
stackLimit
prop to theToast
component 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
stacked
in the first place.Key Features
Toast
component to accept and handle a newstackLimit
prop.stackLimit
prop.stackLimit
setstackLimit
as an optionUsage example
stackLimit.demo.mov
Affected Files
src/types.ts
→ addstackLimit
type and descriptionsrc/components/ToastContainer.tsx
→stackLimit
logicplayground/src/components/App.tsx
→handleNumPicker
andstackLimit
optionplayground/src/components/ContainerCode.tsx
→stacked
,stackLimit
andlimit
options now displayedplayground/src/components/constants.ts
→ addstacked
src/core/toast.cy.tsx
→ new testsrc/addons/use-notification-center/NotificationCenter.cy.tsx
andsrc/addons/use-notification-center/useNotificationCenter.ts
→ use local files instead of 'react-toastify' importChecklist
Additional Information
handleNumPicker
function forlimit
andstackLimit
in playground to simplifyhandleRadioOrSelect
intohandleRadio
.limit
when > 0 andstackLimit
when > 1 inToastContainer
in playground.