From 81f1f97b7d7515314e47e2f06a5795ef790ac9c8 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 27 Jul 2017 19:44:45 +0300
Subject: [PATCH] fix(expansion-panel): standalone panel shouldn't override
 margins (#5962)

Previously, a standalone expansion panel would transition from `margin: 0` not no set margin, which causes inconsistent behavior of the consumer specified a custom margin on it. These changes make it so it doesn't override the margin at all, unless it's a part of an accordion.

Fixes #5949.
---
 src/lib/expansion/expansion-panel.ts | 13 +++----
 src/lib/expansion/expansion.spec.ts  | 52 ++++++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 8bdc8c1758ba..4b2b83717187 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -65,9 +65,8 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
       transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
     trigger('displayMode', [
-      state('collapsed', style({margin: '0'})),
+      state('flat, collapsed', style({margin: '0'})),
       state('default', style({margin: '16px 0'})),
-      state('flat', style({margin: '0'})),
       transition('flat <=> collapsed, default <=> collapsed, flat <=> default',
                  animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
@@ -93,14 +92,12 @@ export class MdExpansionPanel extends AccordionItem {
   }
 
   /** Gets the panel's display mode. */
-  _getDisplayMode(): MdAccordionDisplayMode | MdExpansionPanelState {
-    if (!this.expanded) {
-      return this._getExpandedState();
-    }
+  _getDisplayMode(): MdAccordionDisplayMode | MdExpansionPanelState | 'void' {
     if (this.accordion) {
-      return this.accordion.displayMode;
+      return this.expanded ? this.accordion.displayMode : this._getExpandedState();
     }
-    return this._getExpandedState();
+
+    return 'void';
   }
 
   /** Gets the expanded state string. */
diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts
index 160fc96fca73..89e4470958af 100644
--- a/src/lib/expansion/expansion.spec.ts
+++ b/src/lib/expansion/expansion.spec.ts
@@ -13,7 +13,8 @@ describe('MdExpansionPanel', () => {
         MdExpansionModule
       ],
       declarations: [
-        PanelWithContent
+        PanelWithContent,
+        PanelWithCustomMargin
       ],
     });
     TestBed.compileComponents();
@@ -76,19 +77,64 @@ describe('MdExpansionPanel', () => {
     button.focus();
     expect(document.activeElement).not.toBe(button, 'Expected button to no longer be focusable.');
   }));
+
+  it('should not override the panel margin if it is not inside an accordion', fakeAsync(() => {
+    let fixture = TestBed.createComponent(PanelWithCustomMargin);
+    fixture.detectChanges();
+
+    let panel = fixture.debugElement.query(By.css('md-expansion-panel'));
+    let styles = getComputedStyle(panel.nativeElement);
+
+    expect(panel.componentInstance._getDisplayMode()).toBe('void');
+    expect(styles.marginTop).toBe('13px');
+    expect(styles.marginBottom).toBe('13px');
+    expect(styles.marginLeft).toBe('37px');
+    expect(styles.marginRight).toBe('37px');
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    tick(250);
+
+    styles = getComputedStyle(panel.nativeElement);
+
+    expect(panel.componentInstance._getDisplayMode()).toBe('void');
+    expect(styles.marginTop).toBe('13px');
+    expect(styles.marginBottom).toBe('13px');
+    expect(styles.marginLeft).toBe('37px');
+    expect(styles.marginRight).toBe('37px');
+  }));
 });
 
 
-@Component({template: `
+@Component({
+  template: `
   <md-expansion-panel [expanded]="expanded"
                       (opened)="openCallback()"
                       (closed)="closeCallback()">
     <md-expansion-panel-header>Panel Title</md-expansion-panel-header>
     <p>Some content</p>
     <button>I am a button</button>
-  </md-expansion-panel>`})
+  </md-expansion-panel>`
+})
 class PanelWithContent {
   expanded: boolean = false;
   openCallback = jasmine.createSpy('openCallback');
   closeCallback = jasmine.createSpy('closeCallback');
 }
+
+
+@Component({
+  styles: [
+    `md-expansion-panel {
+      margin: 13px 37px;
+    }`
+  ],
+  template: `
+  <md-expansion-panel [expanded]="expanded">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores officia, aliquam dicta
+    corrupti maxime voluptate accusamus impedit atque incidunt pariatur.
+  </md-expansion-panel>`
+})
+class PanelWithCustomMargin {
+  expanded: boolean = false;
+}