@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.

There is no toast component on mobile. We use the mediawiki core mw.notify method with some style overrides:

https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/377f0e9c723d8b1a7dbc19e900a4649532697f8d/skinStyles/mobile.startup/toast.less#L4

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)	Desktop VE (Testwiki)	Mobile (testwiki)

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.

Mobile

Desktop

@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:

• 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

Desktop

Mobile

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

@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.

See also T42307: mw.notification Usability Improvements, which is approaching the same question from the other direction.

For a potential use case for a Codex toast, see T363484: Update ParserMigration notice, which is a user notification related to the roll out of the new Parsoid wikitext parser/renderer.

{F49825409}

Code: css / js / resource loader

One desideratum that came up during the design review for T363484 was the ability to anchor the toast to some UX element, ie to pop up a notice that says "this new thing is happening, and if you want to know more, this menu item or indicator is the place to go".

In T303612#9764190, @cscott wrote:

See also T42307: mw.notification Usability Improvements, which is approaching the same question from the other direction.

For a potential use case for a Codex toast, see T363484: Update ParserMigration notice, which is a user notification related to the roll out of the new Parsoid wikitext parser/renderer.

Thanks for surfacing this! I'm realizing this component is not on our roadmap despite being labelled as a "Planned New Component". I'm correcting that now.

{F49825409}

This screenshot isn't displaying for me, could you try re-attaching it?

One desideratum that came up during the design review for T363484 was the ability to anchor the toast to some UX element, ie to pop up a notice that says "this new thing is happening, and if you want to know more, this menu item or indicator is the place to go".

That makes sense but is probably outside the scope of this particular component. The need here seems to be more of a general notice about something that just happened on the page. What you're describing sounds like it belongs in a general suite of tools for "onboarding" a user onto a specific feature or UI change. As far as I'm aware there has not been an attempt to unify an approach to these user/feature onboarding experiences. Last it was discussed within Design-System-Team was for the Growth team's OnboardingDialog (T332767), where it was determined that at least for now, it would not make sense to bring it or other onboarding related components into Codex.