feat(select): align panel appearance and animation with 2018 material design spec

Aligns the `mat-select` animation, elevation and border radius with the most-recent Material Design spec. This is the first step towards aligning the component. The next step is to reduce the font size and add some padding to the select panel. The font size and padding changes weren't done in this PR, because they require changes to the positioning logic and reworking the positioning tests.

Author: crisbeto

src/demo-app/select/select-demo.scss

@@ -12,3 +12,7 @@
     padding-right: 0.25em;
   }
 }
+
+.demo-card {
+  margin-bottom: 30px;
+}

src/lib/select/_select-theme.scss

@@ -11,10 +11,6 @@
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
-  .mat-select-content, .mat-select-panel-done-animating {
-    background: mat-color($background, card);
-  }
-
   .mat-select-value {
     color: mat-color($foreground, text);
   }
@@ -32,6 +28,8 @@
   }
 
   .mat-select-panel {
+    background: mat-color($background, card);
+
     .mat-option.mat-selected:not(.mat-option-multiple) {
       background: mat-color($background, hover, 0.12);
     }

src/lib/select/select-animations.ts

@@ -13,9 +13,6 @@ import {
   style,
   transition,
   trigger,
-  query,
-  animateChild,
-  group,
 } from '@angular/animations';
 
 /**
@@ -39,7 +36,7 @@ export const matSelectAnimations: {
    */
   transformPanel: trigger('transformPanel', [
     state('void', style({
-      transform: 'scaleY(0)',
+      transform: 'scaleY(0.8)',
       minWidth: '100%',
       opacity: 0
     })),
@@ -53,19 +50,16 @@ export const matSelectAnimations: {
       minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
       transform: 'scaleY(1)'
     })),
-    transition('void => *', group([
-      query('@fadeInContent', animateChild()),
-      animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-    ])),
-    transition('* => void', [
-      animate('250ms 100ms linear', style({opacity: 0}))
-    ])
+    transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
+    transition('* => void', animate('100ms 25ms linear', style({opacity: 0})))
   ]),
 
   /**
    * This animation fades in the background color and text content of the
    * select's options. It is time delayed to occur 100ms after the overlay
    * panel has transformed in.
+   * @deprecated Not used anymore. To be removed.
+   * @breaking-change 8.0.0
    */
   fadeInContent: trigger('fadeInContent', [
     state('showing', style({opacity: 1})),

src/lib/select/select.html

@@ -37,15 +37,8 @@
     [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
     (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
     [style.transformOrigin]="_transformOrigin"
-    [class.mat-select-panel-done-animating]="_panelDoneAnimating"
     [style.font-size.px]="_triggerFontSize"
     (keydown)="_handleKeydown($event)">
-
-    <div
-      class="mat-select-content"
-      [@fadeInContent]="'showing'"
-      (@fadeInContent.done)="_onFadeInDone()">
-      <ng-content></ng-content>
-    </div>
+    <ng-content></ng-content>
   </div>
 </ng-template>

src/lib/select/select.scss

@@ -83,11 +83,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-select-panel {
-  @include mat-menu-base(8);
+  @include mat-menu-base(4);
   padding-top: 0;
   padding-bottom: 0;
   max-height: $mat-select-panel-max-height;
   min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
+  border-radius: 4px;
 
   @include cdk-high-contrast {
     outline: solid 1px;

src/lib/select/select.spec.ts

@@ -1672,14 +1672,11 @@ describe('MatSelect', () => {
 
     describe('animations', () => {
       let fixture: ComponentFixture<BasicSelect>;
-      let trigger: HTMLElement;
       let formField: HTMLElement;
 
       beforeEach(fakeAsync(() => {
         fixture = TestBed.createComponent(BasicSelect);
         fixture.detectChanges();
-
-        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
         formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
       }));
 
@@ -1702,19 +1699,6 @@ describe('MatSelect', () => {
             'Expected placeholder to animate back down to normal position.');
       }));
 
-      it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
-        trigger.click();
-        fixture.detectChanges();
-
-        const panel = overlayContainerElement.querySelector('.mat-select-panel')!;
-
-        expect(panel.classList).not.toContain('mat-select-panel-done-animating');
-
-        flush();
-        fixture.detectChanges();
-
-        expect(panel.classList).toContain('mat-select-panel-done-animating');
-      }));
     });
 
     describe('keyboard scrolling', () => {

src/lib/select/select.ts

@@ -218,8 +218,7 @@ export class MatSelectTrigger {}
     '(blur)': '_onBlur()',
   },
   animations: [
-    matSelectAnimations.transformPanel,
-    matSelectAnimations.fadeInContent
+    matSelectAnimations.transformPanel
   ],
   providers: [
     {provide: MatFormFieldControl, useExisting: MatSelect},
@@ -280,9 +279,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** The value of the select panel's transform-origin property. */
   _transformOrigin: string = 'top';
 
-  /** Whether the panel's animation is done. */
-  _panelDoneAnimating: boolean = false;
-
   /** Emits when the panel element is finished transforming in. */
   _panelDoneAnimatingStream = new Subject<string>();
 
@@ -520,7 +516,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
           this.openedChange.emit(true);
         } else {
           this.openedChange.emit(false);
-          this._panelDoneAnimating = false;
           this.overlayDir.offsetX = 0;
           this._changeDetectorRef.markForCheck();
         }
@@ -743,15 +738,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     }
   }
 
-  /**
-   * When the panel content is done fading in, the _panelDoneAnimating property is
-   * set so the proper class can be added to the panel.
-   */
-  _onFadeInDone(): void {
-    this._panelDoneAnimating = this.panelOpen;
-    this._changeDetectorRef.markForCheck();
-  }
-
   _onFocus() {
     if (!this.disabled) {
       this._focused = true;

src/material-examples/select-panel-class/select-panel-class-example.css

@@ -1,11 +1,11 @@
-.example-panel-red .mat-select-content {
+.example-panel-red .mat-select-panel {
   background: rgba(255, 0, 0, 0.5);
 }
 
-.example-panel-green .mat-select-content {
+.example-panel-green .mat-select-panel {
   background: rgba(0, 255, 0, 0.5);
 }
 
-.example-panel-blue .mat-select-content {
+.example-panel-blue .mat-select-panel {
   background: rgba(0, 0, 255, 0.5);
 }