ionic-framework
ionic-framework copied to clipboard
bug: toast, cannot render only button and have container fit width
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
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.
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
Thanks. Why does adding a button not work in this case?
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
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:
- Do not render
.toast-content
if the message is not set. - Find a better way of setting the margin-end on the
.toast-button-group
(or remove it altogether). - Users will need to set
--width: fit-content
onion-toast
to have the wrapper snap to fit the button as opposed to being full width.
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
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.