Skip to content

Commit

Permalink
feat(overlay): support setting multiple panel classes (#6326)
Browse files Browse the repository at this point in the history
Allows for more than one class to be added via the `panelClass` option.

Fixes #6318.
  • Loading branch information
crisbeto authored and mmalerba committed Aug 7, 2017
1 parent 18c6689 commit a190de7
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 10 deletions.
7 changes: 6 additions & 1 deletion src/lib/core/overlay/overlay-ref.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,12 @@ export class OverlayRef implements PortalHost {
}

if (this._state.panelClass) {
this._pane.classList.add(this._state.panelClass);
// We can't do a spread here, because IE doesn't support setting multiple classes.
if (Array.isArray(this._state.panelClass)) {
this._state.panelClass.forEach(cls => this._pane.classList.add(cls));
} else {
this._pane.classList.add(this._state.panelClass);
}
}

// Only emit the `attachments` event once all other setup is done.
Expand Down
2 changes: 1 addition & 1 deletion src/lib/core/overlay/overlay-state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export class OverlayState {
scrollStrategy: ScrollStrategy = new NoopScrollStrategy();

/** Custom class to add to the overlay pane. */
panelClass?: string = '';
panelClass?: string | string[] = '';

/** Whether the overlay has a backdrop. */
hasBackdrop?: boolean = false;
Expand Down
25 changes: 18 additions & 7 deletions src/lib/core/overlay/overlay.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -395,18 +395,29 @@ describe('Overlay', () => {
});

describe('panelClass', () => {
let config: OverlayState;
config = new OverlayState();
config.panelClass = 'custom-panel-class';

it('should apply a custom overlay pane class', () => {
let overlayRef = overlay.create(config);
overlayRef.attach(componentPortal);
const config = new OverlayState();

config.panelClass = 'custom-panel-class';
overlay.create(config).attach(componentPortal);
viewContainerFixture.detectChanges();

let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.classList).toContain('custom-panel-class');
});

it('should be able to apply multiple classes', () => {
const config = new OverlayState();

config.panelClass = ['custom-class-one', 'custom-class-two'];
overlay.create(config).attach(componentPortal);
viewContainerFixture.detectChanges();

const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;

expect(pane.classList).toContain('custom-class-one');
expect(pane.classList).toContain('custom-class-two');
});
});

describe('scroll strategy', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/dialog/dialog-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class MdDialogConfig {
role?: DialogRole = 'dialog';

/** Custom class for the overlay pane. */
panelClass?: string = '';
panelClass?: string | string[] = '';

/** Whether the dialog has a backdrop. */
hasBackdrop?: boolean = true;
Expand Down

0 comments on commit a190de7

Please sign in to comment.