bug: toast, cannot render only button and have container fit width

[EinfachHans]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

i really like the Toast Component, but in 99% of my apps i ending up implementing my own toast's, which has mostly two reasons:

• Swipeable feature (there exists a PR for that since a long time: #23124)
• Click handler on the toast itself - not a specific button

The second one is the one i want to target in here 😊

Describe the Use Case

It would be great beeing able to add a click handler to the whole toast. Two things i would use this for:

• "Undo" toast after an action
• In most apps i fetch push notifications when you are in app and present them via a toast - like instagram does.

For both cases the click handler would help a lot, as an extra button is not very nice here.

Describe Preferred Solution

This should work similar to the handler of e.g. an alert button: Called on click and you can return a boolean | Promise<boolean> that says if you should dismiss or don't dismiss the toast

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Do you have examples of apps that implement this behavior? Toasts are intended to be subtle notifications and should not require user interaction.

[EinfachHans]

For example in the github app, when you "done" a notification: You get the same toast that i described in use case 1 - a "undo" toast, where you can click on an undo the notification marking. 🤔

Also it's not really a requiring of a user interaction, it's more of adding a functionality if the user clicks on it

[liamdebeasi]

Thanks. Why does adding a button not work in this case?

[EinfachHans]

Adding a button kinda "would work", but if we take the undo toast as an example: Normally i would have a text like "undo" and the click function to the whole toast. If we add a button to it, what would be the solution? "undo" in the text and another "undo" in the button? No text - only a button? Both are not really nice options imo. 🤔

I think there are use cases where buttons are great, but if you only would have one button, a click handler on the toast itself would be better

[liamdebeasi]

Thanks, that makes sense. I think there is a way we can support this with just a button. The message prop is optional, yet the message container is still rendered. If we do not render the message container if it is not set (and make a few smaller tweaks), we should be able to get the desired result. A few things we need to adjust here:

1. Do not render .toast-content if the message is not set.
2. Find a better way of setting the margin-end on the .toast-button-group (or remove it altogether).
3. Users will need to set --width: fit-content on ion-toast to have the wrapper snap to fit the button as opposed to being full width.

[EinfachHans]

Wouldn't it be easier then to just add a click handler? 🤔 This would also give the advantage that it would work with header and message for example

[liamdebeasi]

The wrapper element itself is not a button, so it should not be clickable. It would definitely be easier, but having the container (with headers/messages) be clickable is not really how toast was intended to be used.