Page MenuHomePhabricator

[Style guide] Toasts
Open, LowPublic

Assigned To
None
Authored By
OTichonova
Nov 2 2023, 2:47 PM
Referenced Files
F41560824: Toast.png
Dec 4 2023, 9:01 PM
F41560809: Added article.png
Dec 4 2023, 9:01 PM
F41560808: Be kind-1.png
Dec 4 2023, 9:01 PM
F41560807: Be kind.png
Dec 4 2023, 9:01 PM
F41560227: Toast.png
Dec 4 2023, 9:01 PM
F41546128: IMG_0276.PNG
Nov 29 2023, 2:50 PM
F41546127: IMG_0277.PNG
Nov 29 2023, 2:50 PM
F41546126: IMG_0278.PNG
Nov 29 2023, 2:50 PM

Description

What are we doing?

Updating the toast design in the app.

Toasts

  • Those that appear from the bottom of the app --> are temporary messages that do not require user confirmation. It is useful to communicate feedback for user actions, positive or negative.
  • Those that appear top of the app --> primarily used for system/ app messaging.
  • Only one may be displayed at a time.

Design

Toast bottomToast top
Screenshot 2023-11-02 at 14.15.16.png (1×2 px, 372 KB)
Screenshot 2023-11-07 at 10.56.21.png (878×1 px, 149 KB)

Figma file

Design checklist

  • Update designs in Figma

Event Timeline

OTichonova renamed this task from [Style guide] Toasts & snackbars to [Style guide] Toasts.Nov 2 2023, 2:47 PM
OTichonova created this task.

Hi @OTichonova! Here are our questions from engineering sync. We want to build a new component for this so we have a lot of baseline behavior questions.

  • I notice there is no X button, but the old toasts had it. How can a user dismiss this toast? Is it upon tap, swipe, scroll, etc?
  • Will you need these to be able to perform any other actions upon tap, like presenting another view, etc.
  • Our watchlist toast (adding to Watchlist from article toolbar) has a "View Watchlist" button. Do you need us to build in the possibility of a button like this? Can you provide a mock of what that button should look like?
  • How long should a toast remain on screen? Should it automatically dismiss after a few seconds, or only if a user does something to dismiss it? Should it only automatically dismiss for certain toast types (like maybe View Watchlist button toast should not automatically dismiss)?
  • Do you want to allow hyperlink-style text in the toast?
  • Do you have particular animation properties you would like used upon appearance and dismissal (curve, duration, spring, etc.).
  • Does this work include our "hint"-style toasts? They act and look a little differently (remain on screen for longer, different appearance animation, dismiss upon scroll). I have attached photos of some areas where you can trigger them:

IMG_0278.PNG (2×1 px, 136 KB)

IMG_0277.PNG (2×1 px, 253 KB)

IMG_0276.PNG (2×1 px, 359 KB)

Thanks!

Hi @Tsevener, great questions!

I noticed there is no X button, but the old toasts had it. How can a user dismiss this toast? Is it upon tap, swipe, scroll, etc?
How long should a toast remain on screen? Should it automatically dismiss after a few seconds, or only if a user does something to dismiss it? Should it only automatically dismiss for certain toast types (like maybe View Watchlist button toast should not automatically dismiss)?

Toast can be dismissed by swiping down and/or after 5 seconds (for those with links and without). I think it is okay to dismiss the 'View Watchlist' like toasts after the same amount of time as well because the toast pops up primarily to confirm that the page was added to your watchlist, the 'View Watchlist' is a secondary action.

Will you need these to be able to perform any other actions upon tap, like presenting another view, etc.Our watchlist toast (adding to Watchlist from article toolbar) has a "View Watchlist" button. Do you need us to build in the possibility of a button like this? Can you provide a mock of what that button should look like?

Yes, for now, we will keep supporting toasts with links/when upon tap they present another view (eg. adding an article to the reading list). In the future would like to minimize how frequently we use toasts to navigate to certain views/pages after the navigation updates. I feel like some actions achieved via toasts can be achieved via action sheets.

Toast.png (92×375 px, 11 KB)

Do you want to allow hyperlink-style text in the toast?

Yes, please.

Do you have particular animation properties you would like used upon appearance and dismissal (curve, duration, spring, etc.).

I think having it appear/dismissed from the bottom similar to how the toasts appear now works well.

Does this work include our "hint"-style toasts? They act and look a little differently (remain on screen for longer, different appearance animation, dismiss upon scroll). I have attached photos of some areas where you can trigger them:

Yes, it should include these as well.

Be kind.png (60×363 px, 5 KB)
Be kind-1.png (61×363 px, 5 KB)
Added article.png (120×363 px, 15 KB)
Toast.png (92×375 px, 11 KB)

@scblr this task already existed for standardizing Toasts (I had an action item to create one!). Please feel free to update it with your notes from T212318.