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

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);
 }