Toast position when inside iframe

[rpresb]

In the image below you can see the toast position when inside the iframe:

The layout indicates it should be at the top: 0 of the iframe, like the below example:

I think having a prop to remove the top positioning should solve for now.

I could suggest another way of doing it (and make it global) is to use the postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to send data from iframe to parent and implement the toast only on the parent window.

This way we could push toast messages in the global context and leave it there, even when navigating to another page inside the iframe.

[TheSisb]

Hi @rpresb,

Paste is used in a variety of products, not just Console, so we don't necessarily want to couple any Console specific behavior like postMessage into our Toaster component. That said, we directly export the Toast component so you can roll a modified version of our Toaster to solve your needs. This may require some coordination with console platform.

[TheSisb]

cc @hharnisc any plans to support a central solution for these types of concerns?

[rpresb]

@TheSisb thanks for answering but I've received a confirmation from UX that this is the expected behaviour when inside the iframe for console.

[bchicca]

I'm also keen to know more about the placement of toast, is there any guideline about where to display error toasts?

[TheSisb]

Currently all toasts in Paste appear on the top-right hand side of the browser window.

[bchicca]

Thanks @TheSisb, is there a specific guidance about the position relative to other elements in the UI? e.g. does it overlay the top bar nav/it shouldn't overlay it, relative position to the margins of the page, etc.

[TheSisb]

Hi @bchicca,

The Toast can/should overlay everything, even the Topbar. Our ToastContainer component is positioned at space40 from the right of the window and space90 from the top of the window.

You are free to modify this based on product needs, but it would require more dev cycles as you would need to implement your own ToastContainer. Most folks just use these preset defaults.

Toasts are not positioned relative to other elements as they communicate immediate feedback in response to a user action, and so they need to be consistently visible in the same place.

[bchicca]

@TheSisb got it, makes sense.
Thanks!