Skip to content

feat: stackLimit prop to limit number of toasts displayed when collapsed #1237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

jamestickle
Copy link

Feature

Adds stackLimit prop functionality as requested #1175

Summary

Added a stackLimit prop to the Toast 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

  • Updated Toast component to accept and handle a new stackLimit prop.
  • User defined value is used when greater than 1, otherwise default of 10. This prevents bad UX.
  • Updated TypeScript definitions to include the new stackLimit prop.
  • Additional test for existing stack behaviour with stackLimit set
  • Updated playground to display stackLimit as an option

Usage example

<ToastContainer autoClose={false} stacked stackLimit={2} />
stackLimit.demo.mov

Affected Files

  • src/types.ts → add stackLimit type and description
  • src/components/ToastContainer.tsxstackLimit logic
  • playground/src/components/App.tsx handleNumPicker and stackLimit option
  • playground/src/components/ContainerCode.tsxstacked, stackLimit and limit options now displayed
  • playground/src/components/constants.ts → add stacked
  • src/core/toast.cy.tsx → new test
  • src/addons/use-notification-center/NotificationCenter.cy.tsx and src/addons/use-notification-center/useNotificationCenter.ts → use local files instead of 'react-toastify' import

Checklist

  • Feature implemented and tested
  • Code follows the project's style guidelines
  • Used prettier before committing
  • No breaking changes introduced

Additional Information

  • Added handleNumPicker function for limit and stackLimit in playground to simplify handleRadioOrSelect into handleRadio.
  • Display both limit when > 0 and stackLimit when > 1 in ToastContainer in playground.
  • Use local files for imports in Notification Center tests.

update label for stacked in constants
…t is > 1 and limit is > 0

Display limit and stackLimit in brackets
refactor: rename radio handling method for clarity
default stackLimit value of 10. Use user defined value if > 1, otherwise use default. Hide those above the limit behind allowed toasts.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant