feat(snack-bar): align with 2018 material design spec

[crisbeto]

Aligns the snack bar component with the latest Material Design spec.

[josephperrott]

Is there a reason to move away from using the AnimationDurations?

[crisbeto]

I based the timing on the new tooltip animation which looks very similar to this one.

[josephperrott]

I think we likely can use the same timings as dialog here.

Additionally, we should be able to use accelerate and decelerate easing here

[crisbeto]

Done.

[jelbourn]

LGTM

[jelbourn]

What's the contrast ratio on the text color to background now? Just from the screenshot it doesn't look great

[crisbeto]

Yeah, it's not great, but it's what's in the designs. This is the reason why I kept the old text color for the dark-themed snackbar where the contrast was even worse.

[jelbourn]

Is the ratio an A by W3C guidelines?

[crisbeto]

I haven't looked at the exact ratio and I'm not sure what I'm supposed to use to measure it either.

[jelbourn]

It's based on the text color and the background color. I always use this tool: https://contrast-ratio.com/

[crisbeto]

According to the tool, it's an AAA contrast (7.15). The text color is rgba(255, 255, 255, 0.7) and the background is #323232.

[jelbourn]

Ah, that's perfect then.

[ngbot]

I see that you just added the pr: merge ready label, but the following checks are still failing:
     status "continuous-integration/travis-ci/pr" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[josephperrott]

Does it make sense to have styles in the transition() calls?

Could this just be:

 snackBarState: trigger('state', [
    state('void', style({
      opacity: 0,
      transform: 'scale(0.8)'
    })),
    state('visible', style({
      transform: 'scale(1)',
      opacity: 1,
    })),
    transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
    transition('* => void', animate('75ms cubic-bezier(0.4, 0.0, 1, 1)')),
  ])

[crisbeto]

Not exactly. The code above will cause it to scale away for the exit animation, but we only want it to fade out. This means that we need a style({opacity: 0}) on the * => void. I've updated it with some tweaks.

[josephperrott]

We should not need to check the from state. If we don't take action in cases where we go to void from void then it results in leaving the snackbar-container in the DOM indefinitely.

We should be able to just to if (toState === 'void') {

[crisbeto]

This isn't something I introduced in this PR, I just had to rework the condition. If I remember correctly, the case where we could get the fromState and toState to both be void was on enter, which shouldn't be an issue for this PR.

Here's the commit for reference: crisbeto@8e77261

[josephperrott]

Hmm, in my testing I didn't see any issue with removing the fromState check. I think the difference now is that we are using void instead of hidden for our hiding state.

[crisbeto]

I'm inclined to keep it just because it shouldn't hurt anything and these changes are dangerous enough as they are.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}