From 32456e3d7ccc0e5915634b1045b645788e8f9eb6 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 24 Aug 2018 16:55:40 +0200
Subject: [PATCH] feat(datepicker): align with 2018 material design spec
 (#12693)

Aligns the datepicker panel with the latest Material Design spec. Note that this only handles the datepicker in popup mode, the touch mode will be handled when we align the dialog.
---
 src/lib/datepicker/datepicker-animations.ts | 22 +++++++++++----------
 src/lib/datepicker/datepicker-content.scss  |  4 ++--
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/lib/datepicker/datepicker-animations.ts b/src/lib/datepicker/datepicker-animations.ts
index dc396c1e9c2..a84f8b4149c 100644
--- a/src/lib/datepicker/datepicker-animations.ts
+++ b/src/lib/datepicker/datepicker-animations.ts
@@ -12,9 +12,6 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
-  group,
-  query,
-  animateChild,
 } from '@angular/animations';
 
 /** Animations used by the Material datepicker. */
@@ -24,12 +21,14 @@ export const matDatepickerAnimations: {
 } = {
   /** Transforms the height of the datepicker's calendar. */
   transformPanel: trigger('transformPanel', [
-    state('void', style({opacity: 0, transform: 'scale(1, 0)'})),
-    state('enter', style({opacity: 1, transform: 'scale(1, 1)'})),
-    transition('void => enter', group([
-      query('@fadeInCalendar', animateChild()),
-      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-    ])),
+    state('void', style({
+      opacity: 0,
+      transform: 'scale(1, 0.8)'
+    })),
+    transition('void => enter',  animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
+      opacity: 1,
+      transform: 'scale(1, 1)'
+    }))),
     transition('* => void', animate('100ms linear', style({opacity: 0})))
   ]),
 
@@ -37,6 +36,9 @@ export const matDatepickerAnimations: {
   fadeInCalendar: trigger('fadeInCalendar', [
     state('void', style({opacity: 0})),
     state('enter', style({opacity: 1})),
-    transition('void => *', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+
+    // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
+    // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
+    transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
   ])
 };
diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss
index cba88c32e08..c3c4b03aafc 100644
--- a/src/lib/datepicker/datepicker-content.scss
+++ b/src/lib/datepicker/datepicker-content.scss
@@ -25,10 +25,10 @@ $mat-datepicker-touch-max-height: 788px;
 
 
 .mat-datepicker-content {
-  @include mat-elevation(8);
+  @include mat-elevation(4);
 
   display: block;
-  border-radius: 2px;
+  border-radius: 4px;
 
   .mat-calendar {
     width: $mat-datepicker-non-touch-calendar-width;