From 9b2ed30b61658138a8705ed25dbb288f4751f204 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 17 Feb 2017 00:41:13 +0100
Subject: [PATCH] docs: test colors for progress components in demo-app (#2841)

* Refactors the progress-bar and progress-spinner demos to have a dynamic `color` binding in the demo.
  This is useful to test if the colors are properly applied to the progress-bar and `progress-spinner` components.

* Also clamps the values in the `progress-bar` and `progress-spinner` demos to make the demo feel better.
---
 .../progress-bar/progress-bar-demo.html       | 58 +++++++++++--------
 .../progress-bar/progress-bar-demo.scss       | 10 +++-
 .../progress-bar/progress-bar-demo.ts         | 11 +++-
 .../progress-spinner-demo.html                | 33 ++++++-----
 .../progress-spinner-demo.scss                |  4 ++
 .../progress-spinner/progress-spinner-demo.ts |  3 +-
 6 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/src/demo-app/progress-bar/progress-bar-demo.html b/src/demo-app/progress-bar/progress-bar-demo.html
index 3e669913063..7c1e558e8c3 100644
--- a/src/demo-app/progress-bar/progress-bar-demo.html
+++ b/src/demo-app/progress-bar/progress-bar-demo.html
@@ -1,37 +1,45 @@
+<md-button-toggle-group class="demo-progress-bar-controls" [(ngModel)]="color">
+  <md-button-toggle value="primary">Primary Color</md-button-toggle>
+  <md-button-toggle value="accent">Accent Color</md-button-toggle>
+  <md-button-toggle value="warn">Warn Color</md-button-toggle>
+</md-button-toggle-group>
+
 <h1>Determinate</h1>
-<div class="demo-progress-bar-container">
-  <md-progress-bar mode="determinate"
-                   [value]="determinateProgressValue"
-                   color="primary"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+
+<div class="demo-progress-bar-controls">
+  <span>Value: {{determinateProgressValue}}</span>
+  <button md-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
+  <button md-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
 </div>
-<span>Value: {{determinateProgressValue}}</span>
-<button md-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
-<button md-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
+
+<div class="demo-progress-bar-container">
+  <md-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color">
+  </md-progress-bar>
+</div>
+
 <h1>Buffer</h1>
-<div class="demo-progress-bar-container">
-  <md-progress-bar [value]="bufferProgressValue"
-                   [bufferValue]="bufferBufferValue"
-                   mode="buffer"
-                   color="warn"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+
+<div class="demo-progress-bar-controls">
+  <span>Value: {{bufferProgressValue}}</span>
+  <button md-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
+  <button md-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
+  <span class="demo-progress-bar-spacer"></span>
+  <span>Buffer Value: {{bufferBufferValue}}</span>
+  <button md-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
+  <button md-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
+</div>
+
+<div class="demo-progress-bar-container">
+  <md-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
+                   [color]="color"></md-progress-bar>
 </div>
-<span>Value: {{bufferProgressValue}}</span>
-<button md-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
-<button md-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
-<span class="demo-progress-bar-spacer"></span>
-<span>Buffer Value: {{bufferBufferValue}}</span>
-<button md-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
-<button md-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
 
 <h1>Indeterminate</h1>
 <div class="demo-progress-bar-container">
-  <md-progress-bar mode="indeterminate"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+  <md-progress-bar mode="indeterminate" [color]="color"></md-progress-bar>
 </div>
 
 <h1>Query</h1>
 <div class="demo-progress-bar-container">
-  <md-progress-bar mode="query"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+  <md-progress-bar mode="query" [color]="color"></md-progress-bar>
 </div>
diff --git a/src/demo-app/progress-bar/progress-bar-demo.scss b/src/demo-app/progress-bar/progress-bar-demo.scss
index b6de28f90cb..8f038cad031 100644
--- a/src/demo-app/progress-bar/progress-bar-demo.scss
+++ b/src/demo-app/progress-bar/progress-bar-demo.scss
@@ -1,12 +1,16 @@
 .demo-progress-bar-container {
   width: 100%;
-}
 
-.demo-progress-bar-margins {
-  margin: 20px 0;
+  md-progress-bar {
+    margin: 20px 0;
+  }
 }
 
 .demo-progress-bar-spacer {
   display: inline-block;
   width: 50px;
+}
+
+.demo-progress-bar-controls {
+  margin: 10px 0;
 }
\ No newline at end of file
diff --git a/src/demo-app/progress-bar/progress-bar-demo.ts b/src/demo-app/progress-bar/progress-bar-demo.ts
index 5e150165130..a3eb4f1ca71 100644
--- a/src/demo-app/progress-bar/progress-bar-demo.ts
+++ b/src/demo-app/progress-bar/progress-bar-demo.ts
@@ -10,19 +10,24 @@ import {Component} from '@angular/core';
   styleUrls: ['progress-bar-demo.css'],
 })
 export class ProgressBarDemo {
+  color: string = 'primary';
   determinateProgressValue: number = 30;
   bufferProgressValue: number = 30;
   bufferBufferValue: number = 40;
 
   stepDeterminateProgressVal(val: number) {
-    this.determinateProgressValue += val;
+    this.determinateProgressValue = this.clampValue(val + this.determinateProgressValue);
   }
 
   stepBufferProgressVal(val: number) {
-    this.bufferProgressValue += val;
+    this.bufferProgressValue = this.clampValue(val + this.bufferProgressValue);
   }
 
   stepBufferBufferVal(val: number) {
-    this.bufferBufferValue += val;
+    this.bufferBufferValue = this.clampValue(val + this.bufferBufferValue);
+  }
+
+  private clampValue(value: number) {
+    return Math.max(0, Math.min(100, value));
   }
 }
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.html b/src/demo-app/progress-spinner/progress-spinner-demo.html
index 64431bf2398..3abea5c81d1 100644
--- a/src/demo-app/progress-spinner/progress-spinner-demo.html
+++ b/src/demo-app/progress-spinner/progress-spinner-demo.html
@@ -1,21 +1,26 @@
 <h1>Determinate</h1>
-<div class="demo-progress-spinner">
-  <md-progress-spinner mode="determinate"
-                      [value]="progressValue"
-                      class="mat-primary"></md-progress-spinner>
-  <md-progress-spinner [value]="progressValue"
-                      color="accent"></md-progress-spinner>
+
+<div class="demo-progress-spinner-controls">
+  <p>Value: {{progressValue}}</p>
+  <button md-raised-button (click)="step(10)">Increase</button>
+  <button md-raised-button (click)="step(-10)">Decrease</button>
 </div>
-<span>Value: {{progressValue}}</span>
-<button md-raised-button (click)="step(10)">Increase</button>
-<button md-raised-button (click)="step(-10)">Decrease</button>
-
 
+<div class="demo-progress-spinner">
+  <md-progress-spinner mode="determinate" [value]="progressValue" color="primary"></md-progress-spinner>
+  <md-progress-spinner [value]="progressValue" color="accent"></md-progress-spinner>
+</div>
 
 <h1>Indeterminate</h1>
+
+<md-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
+  <md-button-toggle value="primary">Primary Color</md-button-toggle>
+  <md-button-toggle value="accent">Accent Color</md-button-toggle>
+  <md-button-toggle value="warn">Warn Color</md-button-toggle>
+</md-button-toggle-group>
+
 <div class="demo-progress-spinner">
-  <md-progress-spinner mode="indeterminate"></md-progress-spinner>
-  <md-progress-spinner mode="indeterminate"
-                      color="accent"></md-progress-spinner>
-  <md-spinner></md-spinner>
+  <md-progress-spinner mode="indeterminate" [color]="color"></md-progress-spinner>
+  <md-progress-spinner mode="indeterminate" [color]="color"></md-progress-spinner>
+  <md-spinner [color]="color"></md-spinner>
 </div>
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.scss b/src/demo-app/progress-spinner/progress-spinner-demo.scss
index 92525a01e5c..8bb5ac7b346 100644
--- a/src/demo-app/progress-spinner/progress-spinner-demo.scss
+++ b/src/demo-app/progress-spinner/progress-spinner-demo.scss
@@ -7,3 +7,7 @@
   }
 
 }
+
+.demo-progress-spinner-controls {
+  margin: 10px 0;
+}
\ No newline at end of file
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.ts b/src/demo-app/progress-spinner/progress-spinner-demo.ts
index 03f68a3206f..c11cedc5f57 100644
--- a/src/demo-app/progress-spinner/progress-spinner-demo.ts
+++ b/src/demo-app/progress-spinner/progress-spinner-demo.ts
@@ -9,9 +9,10 @@ import {Component} from '@angular/core';
 })
 export class ProgressSpinnerDemo {
   progressValue: number = 40;
+  color: string = 'primary';
 
   step(val: number) {
-    this.progressValue += val;
+    this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
   }
 
 }