Skip to content

Commit 294b8ee

Browse files
annieywannieyw
authored
prototype(progress-spinner): create prototype progress-spinner based on MDC Web (#20048)
* add files for MDC-based MatProgressSpinner * add demo of mdc-based MatProgressSpinner at localhost:4200/mdc-progress-spinner * copy MDC DOM and add MDC styles * set up MDC foundation for MDC-based MatProgressSpinner * (wip) add adapter and fill in API * copy over existing demo to MDC-based demo * serverside rendering, refactor * add tests (adapter class wip) * remove separate class for MatSpinner * add e2e tests * add harness * add user documantation README * add codeowner, theme dep * address CI failures * export MatSpinner as const to avoid build error * fix missing e2e import * fix nits * remove changes to _all-themes to keep PR merge-safe (add back in followup)
1 parent d945b27 commit 294b8ee

40 files changed

+1257
-0
lines changed

‎.github/CODEOWNERS

+2
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
/src/dev-app/mdc-list/** @mmalerba
179179
/src/dev-app/mdc-menu/** @crisbeto
180180
/src/dev-app/mdc-progress-bar/** @crisbeto
181+
/src/dev-app/mdc-progress-spinner/** @annieyw @mmalerba
181182
/src/dev-app/mdc-radio/** @mmalerba
182183
/src/dev-app/mdc-snack-bar/** @andrewseguin
183184
/src/dev-app/mdc-sidenav/** @crisbeto
@@ -237,6 +238,7 @@
237238
/src/e2e-app/mdc-input/** @devversion
238239
/src/e2e-app/mdc-menu/** @crisbeto
239240
/src/e2e-app/mdc-progress-bar/** @crisbeto
241+
/src/e2e-app/mdc-progress-spinner/** @annieyw @mmalerba
240242
/src/e2e-app/mdc-radio/** @mmalerba
241243
/src/e2e-app/mdc-slider/** @andrewseguin
242244
/src/e2e-app/mdc-slide-toggle/** @crisbeto

‎rollup-globals.bzl

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ ROLLUP_GLOBALS = {
4141
"@material/auto-init": "mdc.autoInit",
4242
"@material/base": "mdc.base",
4343
"@material/checkbox": "mdc.checkbox",
44+
"@material/circular-progress": "mdc.circularProgress",
4445
"@material/chips": "mdc.chips",
4546
"@material/dialog": "mdc.dialog",
4647
"@material/dom": "mdc.dom",

‎src/dev-app/BUILD.bazel

+2
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ ng_module(
5454
"//src/dev-app/mdc-list",
5555
"//src/dev-app/mdc-menu",
5656
"//src/dev-app/mdc-progress-bar",
57+
"//src/dev-app/mdc-progress-spinner",
5758
"//src/dev-app/mdc-radio",
5859
"//src/dev-app/mdc-sidenav",
5960
"//src/dev-app/mdc-slide-toggle",
@@ -130,6 +131,7 @@ filegroup(
130131
"@npm//:node_modules/@material/base/dist/mdc.base.js",
131132
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
132133
"@npm//:node_modules/@material/chips/dist/mdc.chips.js",
134+
"@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
133135
"@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
134136
"@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
135137
"@npm//:node_modules/@material/dom/dist/mdc.dom.js",

‎src/dev-app/dev-app/dev-app-layout.ts

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export class DevAppLayout {
8383
{name: 'MDC Menu', route: '/mdc-menu'},
8484
{name: 'MDC Radio', route: '/mdc-radio'},
8585
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
86+
{name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
8687
{name: 'MDC Tabs', route: '/mdc-tabs'},
8788
{name: 'MDC Sidenav', route: '/mdc-sidenav'},
8889
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},

‎src/dev-app/dev-app/routes.ts

+5
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,11 @@ export const DEV_APP_ROUTES: Routes = [
8383
{path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
8484
{path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
8585
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
86+
{
87+
path: 'mdc-progress-spinner',
88+
loadChildren:
89+
'mdc-progress-spinner/mdc-progress-spinner-demo-module#MdcProgressSpinnerDemoModule'
90+
},
8691
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
8792
{path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
8893
{

‎src/dev-app/mdc-progress-spinner/BUILD.bazel

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "mdc-progress-spinner",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"mdc-progress-spinner-demo.html",
10+
":mdc_progress_spinner_demo_scss",
11+
],
12+
deps = [
13+
"//src/material-experimental/mdc-progress-spinner",
14+
"//src/material/button",
15+
"//src/material/button-toggle",
16+
"//src/material/checkbox",
17+
"@npm//@angular/forms",
18+
"@npm//@angular/router",
19+
],
20+
)
21+
22+
sass_binary(
23+
name = "mdc_progress_spinner_demo_scss",
24+
src = "mdc-progress-spinner-demo.scss",
25+
)

‎src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
11+
import {RouterModule} from '@angular/router';
12+
import {MdcProgressSpinnerDemo} from './mdc-progress-spinner-demo';
13+
import {MatButtonModule} from '@angular/material/button';
14+
import {MatCheckboxModule} from '@angular/material/checkbox';
15+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
16+
import {FormsModule} from '@angular/forms';
17+
18+
@NgModule({
19+
imports: [
20+
MatButtonModule,
21+
MatCheckboxModule,
22+
MatButtonToggleModule,
23+
FormsModule,
24+
MatProgressSpinnerModule,
25+
RouterModule.forChild([{path: '', component: MdcProgressSpinnerDemo}]),
26+
],
27+
declarations: [MdcProgressSpinnerDemo],
28+
})
29+
export class MdcProgressSpinnerDemoModule {}

‎src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<h1>Determinate</h1>
2+
3+
<div class="demo-progress-spinner-controls">
4+
<p>Value: {{progressValue}}</p>
5+
<button mat-raised-button (click)="step(10)">Increase</button>
6+
<button mat-raised-button (click)="step(-10)">Decrease</button>
7+
<mat-checkbox [(ngModel)]="isDeterminate">Is determinate</mat-checkbox>
8+
</div>
9+
10+
<div class="demo-progress-spinner">
11+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
12+
[value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
13+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
14+
[value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
15+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
16+
[value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
17+
</div>
18+
19+
<h1>Indeterminate</h1>
20+
21+
<mat-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
22+
<mat-button-toggle value="primary">Primary Color</mat-button-toggle>
23+
<mat-button-toggle value="accent">Accent Color</mat-button-toggle>
24+
<mat-button-toggle value="warn">Warn Color</mat-button-toggle>
25+
</mat-button-toggle-group>
26+
27+
<div class="demo-progress-spinner">
28+
<mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
29+
<mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
30+
<mat-spinner [color]="color"></mat-spinner>
31+
</div>
32+

‎src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.demo-progress-spinner {
2+
width: 100%;
3+
4+
.mat-mdc-progress-spinner,
5+
.mat-mdc-spinner {
6+
display: inline-block;
7+
}
8+
}
9+
10+
.demo-progress-spinner-controls {
11+
margin: 10px 0;
12+
}

‎src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {ThemePalette} from '@angular/material/core';
11+
12+
13+
@Component({
14+
selector: 'mdc-progress-spinner-demo',
15+
templateUrl: 'mdc-progress-spinner-demo.html',
16+
styleUrls: ['mdc-progress-spinner-demo.css'],
17+
})
18+
export class MdcProgressSpinnerDemo {
19+
progressValue = 60;
20+
color: ThemePalette = 'primary';
21+
isDeterminate = true;
22+
23+
step(val: number) {
24+
this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
25+
}
26+
}

‎src/e2e-app/BUILD.bazel

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ ng_module(
4040
"//src/material-experimental/mdc-input",
4141
"//src/material-experimental/mdc-menu",
4242
"//src/material-experimental/mdc-progress-bar",
43+
"//src/material-experimental/mdc-progress-spinner",
4344
"//src/material-experimental/mdc-radio",
4445
"//src/material-experimental/mdc-slide-toggle",
4546
"//src/material-experimental/mdc-slider",

‎src/e2e-app/devserver-configure.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ require.config({
1313
'@material/base': '@material/base/dist/mdc.base',
1414
'@material/checkbox': '@material/checkbox/dist/mdc.checkbox',
1515
'@material/chips': '@material/chips/dist/mdc.chips',
16+
'@material/circular-progress': '@material/circular-progress/dist/mdc.circularProgress',
1617
'@material/dialog': '@material/dialog/dist/mdc.dialog',
1718
'@material/dom': '@material/dom/dist/mdc.dom',
1819
'@material/drawer': '@material/drawer/dist/mdc.drawer',

‎src/e2e-app/e2e-app/e2e-app-layout.html

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<a mat-list-item [routerLink]="['mdc-table']">MDC Table</a>
3535
<a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
3636
<a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
37+
<a mat-list-item [routerLink]="['mdc-progress-spinner']">MDC Progress spinner</a>
3738
</mat-nav-list>
3839

3940
<main>

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

+2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {MdcSliderE2e} from '../mdc-slider/mdc-slider-e2e';
2323
import {MdcTableE2e} from '../mdc-table/mdc-table-e2e';
2424
import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
2525
import {MdcProgressBarE2E} from '../mdc-progress-bar/mdc-progress-bar-e2e';
26+
import {MdcProgressSpinnerE2e} from '../mdc-progress-spinner/mdc-progress-spinner-e2e';
2627
import {MenuE2E} from '../menu/menu-e2e';
2728
import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
2829
import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -61,6 +62,7 @@ export const E2E_APP_ROUTES: Routes = [
6162
{path: 'mdc-tabs', component: MdcTabsE2e},
6263
{path: 'mdc-table', component: MdcTableE2e},
6364
{path: 'mdc-progress-bar', component: MdcProgressBarE2E},
65+
{path: 'mdc-progress-spinner', component: MdcProgressSpinnerE2e},
6466
{path: 'menu', component: MenuE2E},
6567
{path: 'progress-bar', component: ProgressBarE2E},
6668
{path: 'progress-spinner', component: ProgressSpinnerE2E},

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

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {TabsE2eModule} from './tabs/tabs-e2e-module';
4040
import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
4141
import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
4242
import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-module';
43+
import {MdcProgressSpinnerE2eModule} from './mdc-progress-spinner/mdc-progress-spinner-module';
4344

4445
@NgModule({
4546
imports: [
@@ -72,6 +73,7 @@ import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-m
7273
MdcTableE2eModule,
7374
MdcTabsE2eModule,
7475
MdcProgressBarE2eModule,
76+
MdcProgressSpinnerE2eModule,
7577
MenuE2eModule,
7678
ProgressBarE2eModule,
7779
ProgressSpinnerE2eModule,

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<mat-progress-spinner [value]="value" [strokeWidth]="strokeWidth"></mat-progress-spinner>
2+
<mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
3+
<mat-spinner></mat-spinner>

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
@Component({
12+
selector: 'mdc-progress-spinner-e2e',
13+
templateUrl: 'mdc-progress-spinner-e2e.html'
14+
})
15+
export class MdcProgressSpinnerE2e {
16+
value = 65;
17+
diameter = 37;
18+
strokeWidth = 6;
19+
}

‎src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-module.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
11+
import {MdcProgressSpinnerE2e} from './mdc-progress-spinner-e2e';
12+
13+
@NgModule({
14+
imports: [MatProgressSpinnerModule],
15+
declarations: [MdcProgressSpinnerE2e]
16+
})
17+
export class MdcProgressSpinnerE2eModule {}

‎src/material-experimental/config.bzl

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ entryPoints = [
1818
"mdc-menu/testing",
1919
"mdc-progress-bar",
2020
"mdc-progress-bar/testing",
21+
"mdc-progress-spinner",
22+
"mdc-progress-spinner/testing",
2123
"mdc-radio",
2224
"mdc-select",
2325
"mdc-sidenav",

‎src/material-experimental/mdc-progress-spinner/BUILD.bazel

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
2+
load(
3+
"//tools:defaults.bzl",
4+
"ng_e2e_test_library",
5+
"ng_module",
6+
"ng_test_library",
7+
"ng_web_test_suite",
8+
"sass_binary",
9+
"sass_library",
10+
)
11+
12+
package(default_visibility = ["//visibility:public"])
13+
14+
ng_module(
15+
name = "mdc-progress-spinner",
16+
srcs = glob(
17+
["**/*.ts"],
18+
exclude = [
19+
"**/*.spec.ts",
20+
],
21+
),
22+
assets = [":progress_spinner_scss"] + glob(["**/*.html"]),
23+
module_name = "@angular/material-experimental/mdc-progress-spinner",
24+
deps = [
25+
"//src/cdk/platform",
26+
"//src/material/core",
27+
"//src/material/progress-spinner",
28+
"@npm//@angular/common",
29+
"@npm//@angular/core",
30+
"@npm//@material/circular-progress",
31+
],
32+
)
33+
34+
sass_library(
35+
name = "mdc_progress_spinner_scss_lib",
36+
srcs = glob(["**/_*.scss"]),
37+
deps = [
38+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
39+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
40+
],
41+
)
42+
43+
sass_binary(
44+
name = "progress_spinner_scss",
45+
src = "progress-spinner.scss",
46+
include_paths = [
47+
"external/npm/node_modules",
48+
],
49+
deps = [
50+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
51+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
52+
],
53+
)
54+
55+
ng_test_library(
56+
name = "progress_spinner_tests_lib",
57+
srcs = glob(
58+
["**/*.spec.ts"],
59+
exclude = ["**/*.e2e.spec.ts"],
60+
),
61+
deps = [
62+
":mdc-progress-spinner",
63+
"//src/cdk/platform",
64+
"//src/material/progress-spinner",
65+
"@npm//@angular/common",
66+
"@npm//@angular/platform-browser",
67+
],
68+
)
69+
70+
ng_web_test_suite(
71+
name = "unit_tests",
72+
static_files = [
73+
"@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
74+
],
75+
deps = [
76+
":progress_spinner_tests_lib",
77+
"//src/material-experimental:mdc_require_config.js",
78+
],
79+
)
80+
81+
ng_e2e_test_library(
82+
name = "e2e_test_sources",
83+
srcs = glob(["**/*.e2e.spec.ts"]),
84+
deps = [
85+
"//src/cdk/testing/private/e2e",
86+
],
87+
)
88+
89+
e2e_test_suite(
90+
name = "e2e_tests",
91+
deps = [
92+
":e2e_test_sources",
93+
"//src/cdk/testing/private/e2e",
94+
],
95+
)

0 commit comments

Comments
 (0)