feat(material-experimental/mdc-autocomplete): add panel animation (#21525)

* feat(material-experimental/mdc-autocomplete): add panel animation

* fixup! feat(material-experimental/mdc-autocomplete): add panel animation

* fixup! feat(material-experimental/mdc-autocomplete): add panel animation

* fixup! feat(material-experimental/mdc-autocomplete): add panel animation

Co-authored-by: Andrew Seguin <andrewjs@google.com>

Author: mmalerba

src/material-experimental/mdc-autocomplete/animations.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {
+  animate,
+  AnimationTriggerMetadata,
+  group,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+
+// Animation values come from
+// https://github.com/material-components/material-components-web/blob/master/packages/mdc-menu-surface/_mixins.scss
+// TODO(mmalerba): Ideally find a way to import the values from MDC's code.
+export const panelAnimation: AnimationTriggerMetadata = trigger('panelAnimation', [
+  state('void, hidden', style({
+    opacity: 0,
+    transform: 'scale(0.8)',
+  })),
+  transition(':enter, hidden => visible', [
+    group([
+        animate('0.03s linear', style({ opacity: 1 })),
+        animate('0.12s cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' })),
+    ]),
+  ]),
+  transition(':leave, visible => hidden', [
+    animate('0.075s linear', style({ opacity: 0 })),
+  ]),
+]);

src/material-experimental/mdc-autocomplete/autocomplete.html

@@ -6,6 +6,7 @@
     [ngClass]="_classList"
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby(formFieldId)"
+    [@panelAnimation]="isOpen ? 'visible' : 'hidden'"
     #panel>
     <ng-content></ng-content>
   </div>

src/material-experimental/mdc-autocomplete/autocomplete.scss

@@ -13,6 +13,9 @@
   max-height: 256px; // Prevents lists with a lot of option from growing too high.
   position: static; // MDC uses `absolute` by default which will throw off our positioning.
   visibility: hidden;
+  // MDC sets the transform-origin programatically based on whether the dropdown is above or below
+  // the input. We use our own positioning logic, so we need to set this ourselves.
+  transform-origin: center top;
 
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
@@ -29,6 +32,9 @@
   .mat-mdc-autocomplete-panel-above & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    // MDC sets the transform-origin programatically based on whether the dropdown is above or below
+    // the input. We use our own positioning logic, so we need to set this ourselves.
+    transform-origin: center bottom;
   }
 
   // These classes are used to toggle the panel visibility depending on whether it has any options.

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -180,6 +180,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       zone.simulateZoneExit();
       dispatchFakeEvent(document, 'click');
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
@@ -192,6 +193,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       zone.simulateZoneExit();
       dispatchFakeEvent(document, 'auxclick');
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
@@ -219,6 +221,7 @@ describe('MDC-based MatAutocomplete', () => {
       const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
       option.click();
       fixture.detectChanges();
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected clicking an option to set the panel state to closed.`);
@@ -251,25 +254,27 @@ describe('MDC-based MatAutocomplete', () => {
       options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected clicking a new option to set the panel state to closed.`);
       expect(overlayContainerElement.textContent)
           .toEqual('', `Expected clicking a new option to close the panel.`);
     }));
 
-    it('should close the panel programmatically', () => {
+    it('should close the panel programmatically', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
       fixture.componentInstance.trigger.closePanel();
       fixture.detectChanges();
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected closing programmatically to set the panel state to closed.`);
       expect(overlayContainerElement.textContent)
           .toEqual('', `Expected closing programmatically to close the panel.`);
-    });
+    }));
 
     it('should not throw when attempting to close the panel of a destroyed autocomplete', () => {
       const trigger = fixture.componentInstance.trigger;
@@ -1032,6 +1037,7 @@ describe('MDC-based MatAutocomplete', () => {
       flush();
       fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
       fixture.detectChanges();
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected panel state to read closed after ENTER key.`);
@@ -1248,6 +1254,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       dispatchKeyboardEvent(input, 'keydown', TAB);
       fixture.detectChanges();
+      tick();
 
       expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel'))
           .toBeFalsy('Expected panel to be removed.');

src/material-experimental/mdc-autocomplete/autocomplete.ts

@@ -7,20 +7,20 @@
  */
 
 import {
-  Component,
-  ViewEncapsulation,
   ChangeDetectionStrategy,
+  Component,
   ContentChildren,
   QueryList,
+  ViewEncapsulation,
 } from '@angular/core';
-import {_MatAutocompleteBase} from '@angular/material/autocomplete';
 import {
-  MAT_OPTION_PARENT_COMPONENT,
   MAT_OPTGROUP,
+  MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
   MatOption,
 } from '@angular/material-experimental/mdc-core';
-
+import {_MatAutocompleteBase} from '@angular/material/autocomplete';
+import {panelAnimation} from './animations';
 
 @Component({
   selector: 'mat-autocomplete',
@@ -35,7 +35,8 @@ import {
   },
   providers: [
     {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}
-  ]
+  ],
+  animations: [panelAnimation],
 })
 export class MatAutocomplete extends _MatAutocompleteBase {
   @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;

src/material/autocomplete/testing/shared.spec.ts

@@ -5,6 +5,7 @@ import {Component} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 /**
  * Function that can be used to run the shared autocomplete harness tests for either the non-MDC or
@@ -19,7 +20,10 @@ export function runHarnessTests(
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [autocompleteModule],
+      imports: [
+          NoopAnimationsModule,
+          autocompleteModule
+      ],
       declarations: [AutocompleteHarnessTest],
     }).compileComponents();