Skip to content

Commit

Permalink
feat(select): add input for adding classes to the panel (#4629)
Browse files Browse the repository at this point in the history
Adds the `panelClass` input, which allows consumers to set extra classes on a select's panel.

Fixes #4485.
  • Loading branch information
crisbeto authored and mmalerba committed May 30, 2017
1 parent 508b141 commit 99293d9
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 4 deletions.
6 changes: 3 additions & 3 deletions src/lib/select/select.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
<ng-template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
[offsetY]="_offsetY" (attach)="_onAttached()" (detach)="close()">
<div class="mat-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
(keydown)="_handlePanelKeydown($event)" [style.transformOrigin]="_transformOrigin"
[class.mat-select-panel-done-animating]="_panelDoneAnimating" [ngClass]="'mat-' + color">
<div class="mat-select-panel {{ 'mat-' + color }}" [ngClass]="panelClass" [@transformPanel]="'showing'"
(@transformPanel.done)="_onPanelDone()" (keydown)="_handlePanelKeydown($event)"
[style.transformOrigin]="_transformOrigin" [class.mat-select-panel-done-animating]="_panelDoneAnimating">
<div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
<ng-content></ng-content>
</div>
Expand Down
14 changes: 13 additions & 1 deletion src/lib/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,16 @@ describe('MdSelect', () => {
expect(event.defaultPrevented).toBe(true);
});

it('should be able to set extra classes on the panel', () => {
trigger.click();
fixture.detectChanges();

const panel = overlayContainerElement.querySelector('.mat-select-panel') as HTMLElement;

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

});

describe('selection logic', () => {
Expand Down Expand Up @@ -2142,7 +2152,8 @@ describe('MdSelect', () => {
template: `
<div [style.height.px]="heightAbove"></div>
<md-select placeholder="Food" [formControl]="control" [required]="isRequired"
[tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby">
[tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
[panelClass]="panelClass">
<md-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
{{ food.viewValue }}
</md-option>
Expand All @@ -2168,6 +2179,7 @@ class BasicSelect {
tabIndexOverride: number;
ariaLabel: string;
ariaLabelledby: string;
panelClass = ['custom-one', 'custom-two'];

@ViewChild(MdSelect) select: MdSelect;
@ViewChildren(MdOption) options: QueryList<MdOption>;
Expand Down
3 changes: 3 additions & 0 deletions src/lib/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
/** All of the defined select options. */
@ContentChildren(MdOption) options: QueryList<MdOption>;

/** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
@Input() panelClass: string|string[]|Set<string>|{[key: string]: any};

/** Placeholder to be shown if no value has been selected. */
@Input()
get placeholder() { return this._placeholder; }
Expand Down

0 comments on commit 99293d9

Please sign in to comment.