feat(autocomplete): align with 2018 material design (#12570)

Aligns the autocomplete with the most-recent Material design spec. These changes are based on the menu designs since there isn't any concrete design for an autocomplete. Note that the changes only cover the adjustments to the autocomplete panel. The design changes for the options will come together with `mat-select` since the two components both use `mat-option`.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -589,6 +589,16 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
         {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}
       ]);
 
+    // The overlay edge connected to the trigger should have squared corners, while
+    // the opposite end has rounded corners. We apply a CSS class to swap the
+    // border-radius based on the overlay position.
+    this._positionStrategy.positionChanges.subscribe(({connectionPair}) => {
+      if (this.autocomplete) {
+        this.autocomplete._classList['mat-autocomplete-panel-above'] =
+            connectionPair.originY === 'top';
+      }
+    });
+
     return this._positionStrategy;
   }
 

src/lib/autocomplete/autocomplete.scss

@@ -3,18 +3,20 @@
 
 /**
  * The max-height of the panel, currently matching mat-select value.
- * TODO: Check value with MD team.
  */
 $mat-autocomplete-panel-max-height: 256px !default;
+$mat-autocomplete-panel-border-radius: 4px !default;
 
 .mat-autocomplete-panel {
-  @include mat-menu-base(8);
-  visibility: hidden;
+  @include mat-menu-base(4);
 
+  visibility: hidden;
   max-width: none;
   max-height: $mat-autocomplete-panel-max-height;
   position: relative;
   width: 100%;
+  border-bottom-left-radius: $mat-autocomplete-panel-border-radius;
+  border-bottom-right-radius: $mat-autocomplete-panel-border-radius;
 
   &.mat-autocomplete-visible {
     visibility: visible;
@@ -28,3 +30,9 @@ $mat-autocomplete-panel-max-height: 256px !default;
     outline: solid 1px;
   }
 }
+
+.mat-autocomplete-panel-above {
+  border-radius: 0;
+  border-top-left-radius: $mat-autocomplete-panel-border-radius;
+  border-top-right-radius: $mat-autocomplete-panel-border-radius;
+}

src/lib/autocomplete/autocomplete.spec.ts

@@ -1377,13 +1377,15 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       zone.simulateZoneExit();
+      fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
       const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
           .toEqual(Math.floor(panelTop), `Expected panel top to match input bottom by default.`);
+      expect(panel.classList).not.toContain('mat-autocomplete-panel-above');
     }));
 
     it('should reposition the panel on scroll', () => {
@@ -1430,13 +1432,17 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       zone.simulateZoneExit();
+      fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
       const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
           .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
+
+      expect(panel.querySelector('.mat-autocomplete-panel')!.classList)
+          .toContain('mat-autocomplete-panel-above');
     }));
 
     it('should allow the panel to expand when the number of results increases', fakeAsync(() => {