Side Modal with success/error messaging

[andoyle]

Hey folks, I’m working on a feature that I think using a Side Modal would be suitable for. I want the user to update notification settings for auto recharge so showing the notification settings in the side modal in-context to the auto recharge form makes sense. However, when a user clicks “Save settings” I want to show a success/error message. Toast doesn’t seem appropriate in this situation, as it would appear over the modal.

I quickly put together this prototype to show an idea I had of an inline message of sorts. Any thoughts?

Thanks!

[andoyle]

FYI - I tried out a version with the modal closing after user has saved. I’ll use this for user testing and let youse know what feedback I get from it.

[kelseycavitt]

@andoyle great! Per our discussion in Slack, this use case for a side modal makes sense! In general, we do have some guidance for the use of toasts in our feedback and notifications pattern.

Like you've already tried here, we suggest closing the side modal on submit and then displaying a toast after the settings have been updated. This is so the message is accessible with the live region toasts have and also could work well if there was a system error if a user couldn't update.

Also, here's some related guidance we gave in a GH discussion a while back.

Let us know how the user testing goes!

[andoyle]

Testing went well overall. No issues with the side modal closing on save, from what I observed - unmoderated testing with no video.