fix(progress-spinner): Rename ProgressCircle to ProgressSpinner (#2300)

* Rename ProgressCircle to ProgressSpinner

* Make old selectors work

* Added progres-circle file

Author: tinayuangao

e2e/components/progress-circle/progress-circle.e2e.ts

@@ -0,0 +1,17 @@
+import {browser, by, element} from 'protractor';
+
+describe('progress-spinner', () => {
+  beforeEach(() => browser.get('/progress-spinner'));
+
+  it('should render a determinate progress spinner', () => {
+    expect(element(by.css('md-progress-spinner')).isPresent()).toBe(true);
+  });
+
+  it('should render an indeterminate progress spinner', () => {
+    expect(element(by.css('md-progress-spinner[mode="indeterminate"]')).isPresent()).toBe(true);
+  });
+
+  it('should render a spinner', () => {
+    expect(element(by.css('md-spinner')).isPresent()).toBe(true);
+  });
+});

e2e/components/progress-spinner/progress-spinner.e2e.ts

@@ -16,7 +16,7 @@ import {CardDemo} from './card/card-demo';
 import {ChipsDemo} from './chips/chips-demo';
 import {RadioDemo} from './radio/radio-demo';
 import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
-import {ProgressCircleDemo} from './progress-circle/progress-circle-demo';
+import {ProgressSpinnerDemo} from './progress-spinner/progress-spinner-demo';
 import {TooltipDemo} from './tooltip/tooltip-demo';
 import {ListDemo} from './list/list-demo';
 import {BaselineDemo} from './baseline/baseline-demo';
@@ -74,7 +74,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     OverlayDemo,
     PortalDemo,
     ProgressBarDemo,
-    ProgressCircleDemo,
+    ProgressSpinnerDemo,
     ProjectionDemo,
     ProjectionTestComponent,
     RadioDemo,

src/demo-app/demo-app-module.ts

@@ -39,7 +39,7 @@ export class DemoApp {
     {name: 'Portal', route: 'portal'},
     {name: 'Projection', route: 'projection'},
     {name: 'Progress Bar', route: 'progress-bar'},
-    {name: 'Progress Circle', route: 'progress-circle'},
+    {name: 'Progress Spinner', route: 'progress-spinner'},
     {name: 'Radio', route: 'radio'},
     {name: 'Ripple', route: 'ripple'},
     {name: 'Select', route: 'select'},

src/demo-app/demo-app/demo-app.ts

@@ -15,7 +15,7 @@ import {CheckboxDemo} from '../checkbox/checkbox-demo';
 import {OverlayDemo} from '../overlay/overlay-demo';
 import {PortalDemo} from '../portal/portal-demo';
 import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
-import {ProgressCircleDemo} from '../progress-circle/progress-circle-demo';
+import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
 import {SelectDemo} from '../select/select-demo';
 import {SidenavDemo} from '../sidenav/sidenav-demo';
 import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
@@ -45,7 +45,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'sidenav', component: SidenavDemo},
   {path: 'slide-toggle', component: SlideToggleDemo},
   {path: 'slider', component: SliderDemo},
-  {path: 'progress-circle', component: ProgressCircleDemo},
+  {path: 'progress-spinner', component: ProgressSpinnerDemo},
   {path: 'progress-bar', component: ProgressBarDemo},
   {path: 'portal', component: PortalDemo},
   {path: 'projection', component: ProjectionDemo},

src/demo-app/demo-app/routes.ts

@@ -0,0 +1,21 @@
+<h1>Determinate</h1>
+<div class="demo-progress-spinner">
+  <md-progress-spinner mode="determinate"
+                      [value]="progressValue"
+                      class="md-primary"></md-progress-spinner>
+  <md-progress-spinner [value]="progressValue"
+                      color="accent"></md-progress-spinner>
+</div>
+<span>Value: {{progressValue}}</span>
+<button md-raised-button (click)="step(10)">Increase</button>
+<button md-raised-button (click)="step(-10)">Decrease</button>
+
+
+
+<h1>Indeterminate</h1>
+<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>
+</div>

src/demo-app/progress-circle/progress-circle-demo.html

@@ -1,7 +1,7 @@
-.demo-progress-circle {
+.demo-progress-spinner {
   width: 100%;
 
-  md-progress-circle,
+  md-progress-spinner,
   md-spinner {
     display: inline-block;
   }

src/demo-app/progress-spinner/progress-spinner-demo.html

@@ -3,11 +3,11 @@ import {Component} from '@angular/core';
 
 @Component({
   moduleId: module.id,
-  selector: 'progress-circle-demo',
-  templateUrl: 'progress-circle-demo.html',
-  styleUrls: ['progress-circle-demo.css'],
+  selector: 'progress-spinner-demo',
+  templateUrl: 'progress-spinner-demo.html',
+  styleUrls: ['progress-spinner-demo.css'],
 })
-export class ProgressCircleDemo {
+export class ProgressSpinnerDemo {
   progressValue: number = 40;
 
   step(val: number) {

src/demo-app/progress-circle/progress-circle-demo.scss renamed to src/demo-app/progress-spinner/progress-spinner-demo.scss

@@ -12,7 +12,7 @@ import {DialogE2E, TestDialog} from './dialog/dialog-e2e';
 import {GridListE2E} from './grid-list/grid-list-e2e';
 import {ListE2E} from './list/list-e2e';
 import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
-import {ProgressCircleE2E} from './progress-circle/progress-circle-e2e';
+import {ProgressSpinnerE2E} from './progress-spinner/progress-spinner-e2e';
 import {MaterialModule} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
@@ -38,7 +38,7 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
     GridListE2E,
     ListE2E,
     ProgressBarE2E,
-    ProgressCircleE2E,
+    ProgressSpinnerE2E,
     SlideToggleE2E
   ],
   bootstrap: [E2EApp],

src/demo-app/progress-circle/progress-circle-demo.ts renamed to src/demo-app/progress-spinner/progress-spinner-demo.ts

@@ -9,7 +9,7 @@
   <a md-list-item [routerLink]="['list']">List</a>
   <a md-list-item [routerLink]="['menu']">Menu</a>
   <a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
-  <a md-list-item [routerLink]="['progress-circle']">Progress circle</a>
+  <a md-list-item [routerLink]="['progress-spinner']">Progress Spinner</a>
   <a md-list-item [routerLink]="['radio']">Radios</a>
   <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
   <a md-list-item [routerLink]="['tabs']">Tabs</a>

src/e2e-app/e2e-app-module.ts

@@ -10,7 +10,7 @@ import {DialogE2E} from '../dialog/dialog-e2e';
 import {GridListE2E} from '../grid-list/grid-list-e2e';
 import {ListE2E} from '../list/list-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
-import {ProgressCircleE2E} from '../progress-circle/progress-circle-e2e';
+import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
 import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
@@ -25,6 +25,6 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'grid-list', component: GridListE2E},
   {path: 'list', component: ListE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
-  {path: 'progress-circle', component: ProgressCircleE2E},
+  {path: 'progress-spinner', component: ProgressSpinnerE2E},
   {path: 'slide-toggle', component: SlideToggleE2E}
 ];

src/e2e-app/e2e-app/e2e-app.html

@@ -0,0 +1,3 @@
+<md-progress-spinner [value]="57"></md-progress-spinner>
+<md-progress-spinner mode="indeterminate"></md-progress-spinner>
+<md-spinner></md-spinner>

src/e2e-app/e2e-app/routes.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'progress-spinner-e2e',
+  templateUrl: 'progress-spinner-e2e.html',
+})
+export class ProgressSpinnerE2E { }

src/e2e-app/progress-circle/progress-circle-e2e.html

@@ -13,7 +13,7 @@
 @import '../../list/list-theme';
 @import '../../menu/menu-theme';
 @import '../../progress-bar/progress-bar-theme';
-@import '../../progress-circle/progress-circle-theme';
+@import '../../progress-spinner/progress-spinner-theme';
 @import '../../radio/radio-theme';
 @import '../../select/select-theme';
 @import '../../sidenav/sidenav-theme';
@@ -40,7 +40,7 @@
   @include md-list-theme($theme);
   @include md-menu-theme($theme);
   @include md-progress-bar-theme($theme);
-  @include md-progress-circle-theme($theme);
+  @include md-progress-spinner-theme($theme);
   @include md-radio-theme($theme);
   @include md-select-theme($theme);
   @include md-sidenav-theme($theme);

src/e2e-app/progress-circle/progress-circle-e2e.ts

@@ -13,7 +13,7 @@ export * from './input/index';
 export * from './list/index';
 export * from './menu/index';
 export * from './progress-bar/index';
-export * from './progress-circle/index';
+export * from './progress-spinner/index';
 export * from './radio/index';
 export * from './select/index';
 export * from './sidenav/index';

src/e2e-app/progress-spinner/progress-spinner-e2e.html

@@ -24,7 +24,7 @@ import {MdGridListModule} from './grid-list/index';
 import {MdCardModule} from './card/index';
 import {MdChipsModule} from './chips/index';
 import {MdIconModule} from './icon/index';
-import {MdProgressCircleModule} from './progress-circle/index';
+import {MdProgressSpinnerModule} from './progress-spinner/index';
 import {MdProgressBarModule} from './progress-bar/index';
 import {MdInputModule} from './input/index';
 import {MdSnackBarModule} from './snack-bar/snack-bar';
@@ -50,7 +50,7 @@ const MATERIAL_MODULES = [
   MdListModule,
   MdMenuModule,
   MdProgressBarModule,
-  MdProgressCircleModule,
+  MdProgressSpinnerModule,
   MdRadioModule,
   MdRippleModule,
   MdSelectModule,
@@ -82,7 +82,7 @@ const MATERIAL_MODULES = [
     MdInputModule.forRoot(),
     MdListModule.forRoot(),
     MdProgressBarModule.forRoot(),
-    MdProgressCircleModule.forRoot(),
+    MdProgressSpinnerModule.forRoot(),
     MdRippleModule.forRoot(),
     MdSelectModule.forRoot(),
     MdSidenavModule.forRoot(),

src/e2e-app/progress-spinner/progress-spinner-e2e.ts

@@ -2,12 +2,12 @@
 @import '../core/theming/theming';
 
 
-@mixin md-progress-circle-theme($theme) {
+@mixin md-progress-spinner-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
-  md-progress-circle, md-spinner {
+  md-progress-spinner, md-progress-circle, md-spinner {
     path {
       stroke: md-color($primary, 600);
     }

src/lib/core/theming/_all-theme.scss

@@ -0,0 +1,2 @@
+export * from './progress-circle';
+export * from './progress-spinner';

src/lib/index.ts

@@ -0,0 +1,4 @@
+/** @deprecated */
+export {MdProgressSpinner as MdProgressCircle} from './progress-spinner';
+/** @deprecated */
+export {MdProgressSpinnerModule as MdProgressCircleModule} from './progress-spinner';

src/lib/module.ts

@@ -2,22 +2,22 @@
 
 
 // Animation Durations
-$md-progress-circle-duration: 5250ms !default;
-$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;
-$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;
+$md-progress-spinner-duration: 5250ms !default;
+$md-progress-spinner-constant-rotate-duration: $md-progress-spinner-duration * 0.55 !default;
+$md-progress-spinner-sporadic-rotate-duration: $md-progress-spinner-duration !default;
 
 // Component sizing
-$md-progress-circle-stroke-width: 10px !default;
-// Height and weight of the viewport for md-progress-circle.
-$md-progress-circle-viewport-size: 100px !default;
+$md-progress-spinner-stroke-width: 10px !default;
+// Height and weight of the viewport for md-progress-spinner.
+$md-progress-spinner-viewport-size: 100px !default;
 
 
 :host {
   display: block;
-  // Height and width are provided for md-progress-circle to act as a default.
+  // Height and width are provided for md-progress-spinner to act as a default.
   // The height and width are expected to be overwritten by application css.
-  height: $md-progress-circle-viewport-size;
-  width: $md-progress-circle-viewport-size;
+  height: $md-progress-spinner-viewport-size;
+  width: $md-progress-spinner-viewport-size;
   overflow: hidden;
 
   // SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
@@ -34,15 +34,15 @@ $md-progress-circle-viewport-size: 100px !default;
     fill: transparent;
 
     // Stroke width of 10px defines stroke as 10% of the viewBox.
-    stroke-width: $md-progress-circle-stroke-width;
+    stroke-width: $md-progress-spinner-stroke-width;
   }
 
 
   &[mode='indeterminate'] svg {
-    animation-duration: $md-progress-circle-sporadic-rotate-duration,
-                        $md-progress-circle-constant-rotate-duration;
-    animation-name: md-progress-circle-sporadic-rotate,
-                    md-progress-circle-linear-rotate;
+    animation-duration: $md-progress-spinner-sporadic-rotate-duration,
+                        $md-progress-spinner-constant-rotate-duration;
+    animation-name: md-progress-spinner-sporadic-rotate,
+                    md-progress-spinner-linear-rotate;
     animation-timing-function: $ease-in-out-curve-function,
                                linear;
     animation-iteration-count: infinite;
@@ -52,11 +52,11 @@ $md-progress-circle-viewport-size: 100px !default;
 
 
 // Animations for indeterminate mode
-@keyframes md-progress-circle-linear-rotate {
+@keyframes md-progress-spinner-linear-rotate {
   0%       { transform: rotate(0deg); }
   100%     { transform: rotate(360deg); }
 }
-@keyframes md-progress-circle-sporadic-rotate {
+@keyframes md-progress-spinner-sporadic-rotate {
   12.5%    { transform: rotate( 135deg); }
   25%      { transform: rotate( 270deg); }
   37.5%    { transform: rotate( 405deg); }