Skip to content

Commit

Permalink
fix(expansion-panel): standalone panel shouldn't override margins (#5962
Browse files Browse the repository at this point in the history
)

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.
  • Loading branch information
crisbeto authored and andrewseguin committed Jul 27, 2017
1 parent fdded66 commit 81f1f97
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 11 deletions.
13 changes: 5 additions & 8 deletions src/lib/expansion/expansion-panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
]),
Expand All @@ -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. */
Expand Down
52 changes: 49 additions & 3 deletions src/lib/expansion/expansion.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ describe('MdExpansionPanel', () => {
MdExpansionModule
],
declarations: [
PanelWithContent
PanelWithContent,
PanelWithCustomMargin
],
});
TestBed.compileComponents();
Expand Down Expand Up @@ -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;
}

0 comments on commit 81f1f97

Please sign in to comment.