From a82ffe840fbe24acfff1eeb89f21d82a9fc3b684 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 8 Aug 2018 21:10:14 +0200
Subject: [PATCH] feat(autocomplete): align with 2018 material design

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`.
---
 src/lib/autocomplete/autocomplete-trigger.ts | 10 ++++++++++
 src/lib/autocomplete/autocomplete.scss       | 14 +++++++++++---
 src/lib/autocomplete/autocomplete.spec.ts    |  6 ++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index cb33570705f1..4abc3ae7b8c8 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -579,6 +579,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;
   }
 
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
index 0f68421edf56..e032d4d1865d 100644
--- a/src/lib/autocomplete/autocomplete.scss
+++ b/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;
+}
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 1101eb98d851..1d3133052d9b 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1377,6 +1377,7 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       zone.simulateZoneExit();
+      fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
       const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
@@ -1384,6 +1385,7 @@ describe('MatAutocomplete', () => {
 
       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,6 +1432,7 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       zone.simulateZoneExit();
+      fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
       const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
@@ -1437,6 +1440,9 @@ describe('MatAutocomplete', () => {
 
       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(() => {