feat(tabs): add theming and ability to set background color

willshowell · willshowell · commit ad610ed83806 · 2017-07-10T12:40:21.000-04:00
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
@@ -3,9 +3,10 @@ <h1>Tab Nav Bar</h1>
 <button md-button (click)="tabLinks.shift()">Remove tab</button>
 <button md-button (click)="swapTabLinks()">Swap first two</button>
 <button md-button (click)="addToLabel()">Add to labels</button>
+<button md-button (click)="toggleBackground()">Toggle background</button>
 
 <div class="demo-nav-bar">
-  <nav md-tab-nav-bar aria-label="weather navigation links">
+  <nav md-tab-nav-bar aria-label="weather navigation links" [background]="tabNavBackground">
     <a md-tab-link
        *ngFor="let tabLink of tabLinks; let i = index"
        [routerLink]="tabLink.link"
@@ -248,3 +249,31 @@ <h1>Inverted tabs</h1>
     </div>
   </md-tab>
 </md-tab-group>
+
+<h1>Accent tabs</h1>
+<md-tab-group class="demo-tab-group" color="accent">
+  <md-tab label="Earth">
+    <div class="tab-content">
+      This tab is about the Earth!
+    </div>
+  </md-tab>
+  <md-tab label="Fire">
+    <div class="tab-content">
+      This tab is about combustion!
+    </div>
+  </md-tab>
+</md-tab-group>
+
+<h1>Tabs with background color</h1>
+<md-tab-group class="demo-tab-group" background="primary" color="accent">
+  <md-tab label="Earth">
+    <div class="tab-content">
+      This tab is about the Earth!
+    </div>
+  </md-tab>
+  <md-tab label="Fire">
+    <div class="tab-content">
+      This tab is about combustion!
+    </div>
+  </md-tab>
+</md-tab-group>
diff --git a/src/demo-app/tabs/tabs-demo.ts b/src/demo-app/tabs/tabs-demo.ts
@@ -16,6 +16,8 @@ export class TabsDemo {
     {label: 'Fog', link: 'foggy-tab'},
   ];
 
+  tabNavBackground: any = undefined;
+
   // Standard tabs demo
   tabs = [
     {
@@ -93,6 +95,10 @@ export class TabsDemo {
   addToLabel() {
     this.tabLinks.forEach(link => link.label += 'extracontent');
   }
+
+  toggleBackground() {
+    this.tabNavBackground = this.tabNavBackground ? undefined : 'primary';
+  }
 }
 
 
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
@@ -23,19 +23,120 @@
     }
   }
 
-  .mat-tab-label:focus {
-    background-color: mat-color($primary, lighter, 0.3);
+  .mat-tab-label, .mat-tab-link {
+    color: mat-color($foreground, text);
+
+    &.mat-tab-disabled {
+      color: mat-color($foreground, disabled-text);
+    }
   }
 
+  .mat-tab-header-pagination-chevron {
+    border-color: mat-color($foreground, text);
+  }
+
+  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+    border-color: mat-color($foreground, disabled-text);
+  }
+
+  .mat-tab-group, .mat-tab-nav-bar {
+    &.mat-primary {
+      @include _mat-tabs-color($primary);
+
+      &.mat-background-primary {
+        @include _mat-tabs-color($primary, $primary);
+      }
+
+      &.mat-background-accent {
+        @include _mat-tabs-color($primary, $accent);
+      }
+
+      &.mat-background-warn {
+        @include _mat-tabs-color($primary, $warn);
+      }
+    }
+
+    &.mat-accent {
+      @include _mat-tabs-color($accent);
+
+      &.mat-background-primary {
+        @include _mat-tabs-color($accent, $primary);
+      }
+
+      &.mat-background-accent {
+        @include _mat-tabs-color($accent, $accent);
+      }
+
+      &.mat-background-warn {
+        @include _mat-tabs-color($accent, $warn);
+      }
+    }
+
+    &.mat-warn {
+      @include _mat-tabs-color($warn);
+
+      &.mat-background-primary {
+        @include _mat-tabs-color($warn, $primary);
+      }
+
+      &.mat-background-accent {
+        @include _mat-tabs-color($warn, $accent);
+      }
+
+      &.mat-background-warn {
+        @include _mat-tabs-color($warn, $warn);
+      }
+    }
+  }
+}
+
+@mixin _mat-tabs-color($color, $background-color: null) {
+
+  $tab-focus-color: if($background-color, $background-color, $color);
+
+  // Focus the tab label
+  .mat-tab-label:focus, .mat-tab-link:focus {
+    background-color: mat-color($tab-focus-color, lighter, 0.3);
+  }
+
+  // Set the ink bar to the theme color or default-contrast if
+  // the theme color and background color are the same
   .mat-ink-bar {
-    background-color: mat-color($primary);
+    background-color: mat-color($color);
+
+    @if $background-color == $color {
+      background-color: mat-color($background-color, default-contrast);
+    }
   }
 
-  .mat-tab-label, .mat-tab-link {
-    color: mat-color($foreground, text);
+  @if $background-color {
+    // Set background color for the tab group
+    .mat-tab-header, .mat-tab-links {
+      background-color: mat-color($background-color);
+    }
 
-    &.mat-tab-disabled {
-      color: mat-color($foreground, disabled-text);
+    // Set labels to contrast against background
+    .mat-tab-label, .mat-tab-link {
+      color: mat-color($background-color, default-contrast);
+
+      &.mat-tab-disabled {
+        color: mat-color($background-color, default-contrast, 0.4);
+      }
+    }
+
+    // Set pagination chevrons to contrast background
+    .mat-tab-header-pagination-chevron {
+      border-color: mat-color($background-color, default-contrast);
+    }
+
+    .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+      border-color: mat-color($background-color, default-contrast, 0.4);
+    }
+
+    // Remove header border
+    .mat-tab-header {
+      border-bottom: none;
+      border-top: none;
     }
   }
 }
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
@@ -18,6 +18,7 @@ import {
   Renderer2,
 } from '@angular/core';
 import {coerceBooleanProperty} from '../core';
+import {CanColor, mixinColor, ThemePalette} from '../core/common-behaviors/color';
 import {Observable} from 'rxjs/Observable';
 import {MdTab} from './tab';
 import {map} from '../core/rxjs/index';
@@ -35,6 +36,12 @@ export class MdTabChangeEvent {
 /** Possible positions for the tab header. */
 export type MdTabHeaderPosition = 'above' | 'below';
 
+// Boilerplate for applying mixins to MdTabGroup.
+export class MdTabGroupBase {
+  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+}
+export const _MdTabGroupMixinBase = mixinColor(MdTabGroupBase, 'primary');
+
 /**
  * Material design tab-group component.  Supports basic tab pairs (label + content) and includes
  * animated ink-bar, keyboard navigation, and screen reader.
@@ -43,6 +50,7 @@ export type MdTabHeaderPosition = 'above' | 'below';
 @Component({
   moduleId: module.id,
   selector: 'md-tab-group, mat-tab-group',
+  inputs: ['color'],
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
   host: {
@@ -51,7 +59,7 @@ export type MdTabHeaderPosition = 'above' | 'below';
     '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
   }
 })
-export class MdTabGroup {
+export class MdTabGroup extends _MdTabGroupMixinBase implements CanColor {
   @ContentChildren(MdTab) _tabs: QueryList<MdTab>;
 
   @ViewChild('tabBodyWrapper') _tabBodyWrapper: ElementRef;
@@ -94,6 +102,22 @@ export class MdTabGroup {
   @Input()
   headerPosition: MdTabHeaderPosition = 'above';
 
+  /** Background color of the tab group. */
+  @Input()
+  get background(): ThemePalette { return this._background; }
+  set background(value: ThemePalette) {
+    let nativeElement = this._elementRef.nativeElement;
+
+    this._renderer.removeClass(nativeElement, `mat-background-${this.background}`);
+
+    if (value) {
+      this._renderer.addClass(nativeElement, `mat-background-${value}`);
+    }
+
+    this._background = value;
+  }
+  private _background: ThemePalette;
+
   /** Output to enable support for two-way binding on `[(selectedIndex)]` */
   @Output() get selectedIndexChange(): Observable<number> {
     return map.call(this.selectChange, event => event.index);
@@ -107,7 +131,9 @@ export class MdTabGroup {
 
   private _groupId: number;
 
-  constructor(private _renderer: Renderer2) {
+  constructor(_renderer: Renderer2,
+              elementRef: ElementRef) {
+    super(_renderer, elementRef);
     this._groupId = nextId++;
   }
 
diff --git a/src/lib/tabs/tab-header.scss b/src/lib/tabs/tab-header.scss
@@ -65,10 +65,6 @@
 .mat-tab-header-pagination-disabled {
   box-shadow: none;
   cursor: default;
-
-  .mat-tab-header-pagination-chevron {
-    border-color: #ccc;
-  }
 }
 
 .mat-tab-label-container {
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -17,6 +17,7 @@ import {
   NgZone,
   OnDestroy,
   Optional,
+  Renderer2,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -25,26 +26,34 @@ import {CanDisable, mixinDisabled} from '../../core/common-behaviors/disabled';
 import {MdRipple} from '../../core';
 import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 import {Directionality, MD_RIPPLE_GLOBAL_OPTIONS, Platform, RippleGlobalOptions} from '../../core';
+import {CanColor, mixinColor, ThemePalette} from '../../core/common-behaviors/color';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
 import {takeUntil, auditTime} from '../../core/rxjs/index';
 import {of as observableOf} from 'rxjs/observable/of';
 import {merge} from 'rxjs/observable/merge';
 import {fromEvent} from 'rxjs/observable/fromEvent';
 
+// Boilerplate for applying mixins to MdTabNav.
+export class MdTabNavBase {
+  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+}
+export const _MdTabNavMixinBase = mixinColor(MdTabNavBase, 'primary');
+
 /**
  * Navigation component matching the styles of the tab group header.
  * Provides anchored navigation with animated ink bar.
  */
 @Component({
   moduleId: module.id,
   selector: '[md-tab-nav-bar], [mat-tab-nav-bar]',
+  inputs: ['color'],
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
   host: {'class': 'mat-tab-nav-bar'},
   encapsulation: ViewEncapsulation.None,
 })
-export class MdTabNav implements AfterContentInit, OnDestroy {
+export class MdTabNav extends _MdTabNavMixinBase implements AfterContentInit, CanColor, OnDestroy {
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
 
@@ -56,7 +65,28 @@ export class MdTabNav implements AfterContentInit, OnDestroy {
   /** Subscription for window.resize event **/
   private _resizeSubscription: Subscription;
 
-  constructor(@Optional() private _dir: Directionality, private _ngZone: NgZone) { }
+  /** Background color of the tab nav. */
+  @Input()
+  get background(): ThemePalette { return this._background; }
+  set background(value: ThemePalette) {
+    let nativeElement = this._elementRef.nativeElement;
+
+    this._renderer.removeClass(nativeElement, `mat-background-${this.background}`);
+
+    if (value) {
+      this._renderer.addClass(nativeElement, `mat-background-${value}`);
+    }
+
+    this._background = value;
+  }
+  private _background: ThemePalette;
+
+  constructor(renderer: Renderer2,
+              elementRef: ElementRef,
+              private _ngZone: NgZone,
+              @Optional() private _dir: Directionality) {
+    super(renderer, elementRef);
+  }
 
   /** Notifies the component that the active link has been changed. */
   updateActiveLink(element: ElementRef) {

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@ export class TabsDemo {`
`16`	`16`	`{label: 'Fog', link: 'foggy-tab'},`
`17`	`17`	`];`
`18`	`18`
	`19`	`+ tabNavBackground: any = undefined;`
	`20`	`+`
`19`	`21`	`// Standard tabs demo`
`20`	`22`	`tabs = [`
`21`	`23`	`{`
`@@ -93,6 +95,10 @@ export class TabsDemo {`
`93`	`95`	`addToLabel() {`
`94`	`96`	`this.tabLinks.forEach(link => link.label += 'extracontent');`
`95`	`97`	`}`
	`98`	`+`
	`99`	`+ toggleBackground() {`
	`100`	`+ this.tabNavBackground = this.tabNavBackground ? undefined : 'primary';`
	`101`	`+ }`
`96`	`102`	`}`
`97`	`103`
`98`	`104`