BUG: Custom ToastBar makes 'bottom-center' position to slide from top instead of sliding from bottom

[Puspendert]

[BUG REPORT]

I followed the docs example for adding a dismiss button. The prop set on Toaster is position="bottom-center", and toast does appear on the button center but the animation gets disturbed. Ideally bottom-center toast slide from the bottom but it is sliding from the top.

Here is a CodeSandbox

https://user-images.githubusercontent.com/16055344/123509181-9bf41a00-d691-11eb-943c-58e97b4070f0.mov

[timolins]

Thanks for reporting. By default, the Toaster passes its position to the ToastBar via the position prop. This does not happen automatically when rolling your own.

A quick fix would be to add your current position to your ToastBar manually:

<ToastBar position="bottom-center"/>

This could be solved by passing it down via a React Context. I'll take this into consideration for future releases.

[Puspendert]

A quick fix would be to add your current position to your ToastBar manually:

<ToastBar position="bottom-center"/>

@timolins Thanks for reply. I already tried that before reporting the bug. I came here after reading the documentation. But <ToastBar position="bottom-center"/> displays toatbar at the top, not bottom. I have changed this into the codesandbox, please verify.

[timolins]

The position prop on the ToastBar is only used to apply the correct animation direction, not for the positioning itself.

You'd have to set the position on the Toaster as well.