Just copy pasting a link to a new OOUI component that is related: T226719

@schoenbaechler Is it ready for dev now? (Since you're still claiming this ticket)

I’d say so @cooltey! While working on T232455, it might be interesting to consider a larger snackbar:

I think it’s going to depend on the final copy for it as it allows two/three more words.

I see, thanks @schoenbaechler.

If we are going to use the large Snackbar, should we still need to apply the pulsing animation on the navigation icon?

Also, as the screenshot in the task description, the "Snackbar" looks like a custom one (white background), not sure should we follow the standard snackbar component or a custom one.

(...) screenshot in the task description, the "Snackbar" looks like a custom one (white background), not sure should we follow the standard snackbar component or a custom one.

Replaced the screenshot, it’s now using the standard snackbar. Please check out the screens on Zeplin for the latest designs.

If we are going to use the large Snackbar, should we still need to apply the pulsing animation on the navigation icon?

Let’s go with the standard, smaller snackbar for now. And yes, please add the pulse animation.

Thanks @cooltey

Will do it, thanks @schoenbaechler

@schoenbaechler
Not sure how what's your preferences about showing the pulsing animation, and here's my implementation of it.
https://www.youtube.com/watch?v=Ztyn_zKaSek

And here are the configs:

Circle 1:
Start time: start immediately
Color: accent90
Duration: 1.5 second

Circle 2:
Start time: delayed start after 0.8 second
Color: accent75 with 0.8 alpha
Duration: 1.5 second

Please let me know if anything needs to be changed.

Looks already pretty good @cooltey. It’s a tad too subtle yet, so how about this:

Icon: color_group_40
Inner circle: color_group_52 at 0.5 opacity for all themes, 36dp width/height, static/no animation
Outer circle: color_group_4 at 1.0 opacity, 52dp width/height, immediate start time

Quickly tried it out in light and black theme, these colors should work well:

Light	Black
Zeplin	Zeplin

Btw, is it possible to time start animating it exactly at the same time as the snackbar appears @cooltey? The snackbar should disappear after 10 seconds but the pulse animation can stay on the icon until users tap on it the first time.

Thanks, @schoenbaechler

Here's the new demo video based on the styles you've recommended.
https://www.youtube.com/watch?v=cZ7TgAtmTBE

Btw, is it possible to time start animating it exactly at the same time as the snackbar appears @cooltey? The snackbar should disappear after 10 seconds but the pulse animation can stay on the icon until users tap on it the first time.

Yes we can do this.

Looks good @cooltey, the animation is... perfect! It’s great to see that this kind of onboarding “hack” really works in practice. Two minor optimizations:

1. Can we make the snackbar permanent until users interact with it? The 10 seconds seem to short to really read it and I think the newly added Suggested edits tab bar icon profits from more background. Also, in my case, it disappeared before I actually saw it because it was in competition with the “Sync reading lists” dialog (it overlapped the snackbar at first).

2. Design vs implementation (see Zeplin):

• Different top and bottom padding/margin than specified. Can we adjust it globall to top and bottom margin/padding of 14sp?
• Font-size and line-height are different than specified. Can we adjust it globally to font size 14sp and line height 20sp?

Thanks!

Hi @schoenbaechler

Can we make the snackbar permanent until users interact with it? The 10 seconds seem to short to really read it and I think the newly added Suggested edits tab bar icon profits from more background. Also, in my case, it disappeared before I actually saw it because it was in competition with the “Sync reading lists” dialog (it overlapped the snackbar at first).

Sure!

Different top and bottom padding/margin than specified. Can we adjust it globall to top and bottom margin/padding of 14sp?

I checked the original code of the Snackbar, and looks like the padding will adjust depend on its text lines. I would recommend keeping as it is instead of writing extra code to do it.

Font-size and line-height are different than specified. Can we adjust it globally to font size 14sp and line height 20sp?

Yes! I followed the Suggested edits survey Snackbar settings and bring it as a global one.

Thanks & sounds good @cooltey

Looking good to me on 2.750300-alpha-2019-10-15