Provide option to allow new toasts to be added at back of stack, instead of front

[marshmn]

HeroUI does a good job of handling multiple toasts, by allowing them to stack and providing a nice UI to display them (e.g. by hover on the stack).

The current behaviour, however, is that new toasts are added to the front of the stack, covering up older ones—which can, in my opinion, lead to undesirable UX in some scenarios.

For example, consider a scenario where multiple toasts are added to the stack within a short timeframe (say less than a second), each with a timeout of 6 seconds:

1. First toast is shown on screen
2. Second toast appears less than a second later, covering up the first one
3. When the first toast expires after six seconds, it disappears from the back of the stack
4. The second toast then disappears shortly afterwards

In this scenario, the user has very little opportunity to see the first toast—unless they take an action such as hovering on the stack or dismissing the second toast early.

In my opinion, for scenarios like this it would be a better user experience if the newer toasts were added to the back of the stack, and that any timer is only started once a toast comes to the front of the stack.

With the above, this would mean:

1. First toast is shown on screen
2. Second toast is added to the back of the stack
3. When the first toast expires after six seconds, it disappears, promoting the second toast to the front of the stack
4. The second toast timer now starts and expires after another six seconds

Proposal

In order to achieve the above, without introducing a breaking change to existing defaults, I'd suggest adding new props:

• addToBack: Adds toast to back of stack instead of front (defaults to false to maintain backward-compatibility)
• delayTimer: Delays start of timer until toast is at front of stack (defaults to false to maintain backward-compatibility)