feat(select): add input for adding classes to the panel (#4629)

Adds the `panelClass` input, which allows consumers to set extra classes on a select's panel. Fixes #4485.
angular · May 30, 2017 · 99293d9 · 99293d9
1 parent 508b141
commit 99293d9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
@@ -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>

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -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', () => {
@@ -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>
@@ -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>;

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -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; }