From b9651dfa4c0bb5431a7fd5a58d2f7590a42ddb99 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 17 Aug 2018 03:05:46 +0200
Subject: [PATCH] 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`.
---
 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 68e17046804..e7aa0600b40 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/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;
   }
 
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
index 0f68421edf5..e032d4d1865 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 05d044198c0..686204329c9 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(() => {