Page MenuHomePhabricator

ToastNotification: Add ToastNotification component to Codex
Open, Needs TriagePublic

Assigned To
Authored By
Mar 11 2022, 2:55 PM
Referenced Files
F35021269: Superuser receives message.png
Mar 23 2022, 2:55 PM
F35020199: Captura de pantalla 2022-03-22 a las 18.32.50.png
Mar 22 2022, 5:36 PM
F35020100: image.png
Mar 22 2022, 4:22 PM
F35020087: image.png
Mar 22 2022, 4:22 PM
F35020090: image.png
Mar 22 2022, 4:22 PM
F35020096: image.png
Mar 22 2022, 4:22 PM
F35020102: image.png
Mar 22 2022, 4:22 PM



Various projects are already using a ToastNotification component, a message that pops in and is displayed temporarily:

  • WikiLambda (see code)
  • MachineVision (see code and this task that includes a design artifact)
  • Mobile

The WikiLambda component looks like the Message component, while the MachineVision and mobile versions simply have a black background with white text.

This seems like a good candidate to add to our design system via the governance model process.

To do

  • Link to WikiLambda designs
  • Figure out where the toast lives in MobileFrontEnd (or possibly MinervaNeue?) code
  • Determine whether we want to add this component to the design system. If so...
  • Name the component (Toast? ToastNotification?)
  • Build out this task with process details and acceptance criteria for design, implementation, and QA

Event Timeline

@aishwaryavardhana Do you have a design spec for the WikiLambda toast notification that you could share here?

@Volker_E Do you know what the toast used on mobile is called and where that code live? I'm assuming it's in MobileFrontEnd, but couldn't figure out exactly what it was by looking through the code or at the storybook.

Hi @AnneT - in case it's useful, as I mentioned in T284843, the Growth features currently have pretty toast-y message that comes up after a user makes an "Suggested edit" in the Growth feature, that is accompanied by a suggested next article to edit (as a separate element).

We have basically tried to replicate the success/notice message style so far (success if the person successfully published an edit, notice style if they didn't actually make a change but reviewed links/image suggested and did some work on it by rejecting the suggestion). This task T301603: Newcomer tasks: increased flexibility at post-edit dialog is where I detail how we want to make changes to separate the toast/message element from the next suggested edit.

I will note that it was a conscious decision to use the same styling on both mobile and desktop, rather than the two different messages that come up on Minerva vs Desktop VE when someone successfully edits, which I had captured earlier as being a little different depending on wiki and context:

Desktop VE (Betalabs)
image.png (1×2 px, 509 KB)
Desktop VE (Testwiki)
image.png (1×1 px, 468 KB)
Mobile (testwiki)
image.png (1×684 px, 127 KB)

Another place I have encountered two different toast-like messages is on Commons, when you attempt to edit whilst logged out. IMO this message is an ideal case for having component and best practice guidelines around the suitability and a11y of links (esp. multiple links) in a transient message, vs a version which has a more explicit close action.

image.png (1×752 px, 187 KB)
image.png (654×1 px, 137 KB)

@RHo thank you for all these examples, I understand now the use and functionality of toast message and viewing all these examples I agree with @AnneT that we need to create both components in Message and Toast (instead of mixing both in the Message component).

Some points to note about the examples @RHo has sent:

Captura de pantalla 2022-03-22 a las 18.32.50.png (1×732 px, 411 KB)

  • We can't use this black toast as this is more an app style than a web style.
  • We need to apply the same states that we have in the Message component (green for success, yellow for warning, red for error and gray for notice).
  • We need to define the possible positions of the toast: should it appear always in the same position (e.g. bottom-centered) or do we want to define different positions (e.g. bottom-centered, bottom-right, bottom-left, top-centered, etc.)?

@RHo thanks for all the examples, this is really helpful!

Sorry for the delayed response! Here are specs of how I'm using the toast, on mobile and responsive.

This is for when a Wikifunctions editor is editing a function called Negate


User receives a message that they've disabled implementations.png (1×1 px, 64 KB)


Superuser receives message.png (812×375 px, 41 KB)

No problem, thanks, @aishwaryavardhana! How should the toasts enter and leave—fading in/out, sliding in/out, etc? Or is that an open question?

User receives a message that they've disabled implementations.png (1×1 px, 64 KB)

@aishpant not sure if you should use a toast here since toast component appears to give feedback to the user when he does an specific action. In this case (tell me if I'm wrong) it seems that the message should be a fixed message to explain what will happen when he publish changes (maybe it should be a message closer to the publish button). Could you send me the link to Figma to understand better the context?

Hi all! Barbara and I discussed yesterday and I realized it is not a toast but a message! So it should behave however messages behave in the DS. I'll send an update of the mockup later today.

AnneT renamed this task from Consider designing and building a Toast component in Codex to Consider designing and building a ToastNotification component in Codex.Feb 14 2023, 5:39 PM
AnneT updated the task description. (Show Details)
CCiufo-WMF renamed this task from Consider designing and building a ToastNotification component in Codex to ToastNotification: Add ToastNotification component to Codex.Fri, Mar 15, 10:29 PM