Skip to content

Commit fc6cb10

Browse files
crisbetommalerba
crisbeto
authored and
mmalerba
committed
prototype(progress-bar): create prototype progress bar based o… (#17224)
Implements the Angular Material progress bar on top of MDC web. The public API and behavior should be identical, aside from slight differences in the animation timings and easing curves.
1 parent 5509c23 commit fc6cb10

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1106
-4
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
/src/dev-app/mdc-checkbox/** @mmalerba
162162
/src/dev-app/mdc-chips/** @mmalerba
163163
/src/dev-app/mdc-menu/** @crisbeto
164-
# Note to implementer: please repossess
164+
/src/dev-app/mdc-progress-bar/** @crisbeto
165165
/src/dev-app/mdc-radio/** @mmalerba
166166
/src/dev-app/mdc-slide-toggle/** @crisbeto
167167
/src/dev-app/mdc-slider/** @devversion
@@ -214,7 +214,7 @@
214214
/src/e2e-app/mdc-checkbox/** @mmalerba
215215
/src/e2e-app/mdc-chips/** @mmalerba
216216
/src/e2e-app/mdc-menu/** @crisbeto
217-
# Note to implementer: please repossess
217+
/src/e2e-app/mdc-progress-bar/** @crisbeto
218218
/src/e2e-app/mdc-radio/** @mmalerba
219219
/src/e2e-app/mdc-slide-toggle/** @crisbeto
220220
/src/e2e-app/mdc-tabs/** @crisbeto

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ ng_module(
4545
"//src/dev-app/mdc-checkbox",
4646
"//src/dev-app/mdc-chips",
4747
"//src/dev-app/mdc-menu",
48+
"//src/dev-app/mdc-progress-bar",
4849
"//src/dev-app/mdc-radio",
4950
"//src/dev-app/mdc-slide-toggle",
5051
"//src/dev-app/mdc-slider",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,10 @@ export class DevAppLayout {
7676
{name: 'MDC Chips', route: '/mdc-chips'},
7777
{name: 'MDC Menu', route: '/mdc-menu'},
7878
{name: 'MDC Radio', route: '/mdc-radio'},
79+
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
7980
{name: 'MDC Tabs', route: '/mdc-tabs'},
8081
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
8182
{name: 'MDC Slider', route: '/mdc-slider'},
82-
8383
];
8484

8585
constructor(

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ export const DEV_APP_ROUTES: Routes = [
5555
path: 'mdc-checkbox',
5656
loadChildren: 'mdc-checkbox/mdc-checkbox-demo-module#MdcCheckboxDemoModule'
5757
},
58+
{
59+
path: 'mdc-progress-bar',
60+
loadChildren: 'mdc-progress-bar/mdc-progress-bar-demo-module#MdcProgressBarDemoModule'
61+
},
5862
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
5963
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
6064
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},

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

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

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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 {CommonModule} from '@angular/common';
10+
import {NgModule} from '@angular/core';
11+
import {RouterModule} from '@angular/router';
12+
import {FormsModule} from '@angular/forms';
13+
import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
14+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
15+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
16+
import {MdcProgressBarDemo} from './mdc-progress-bar-demo';
17+
18+
@NgModule({
19+
imports: [
20+
CommonModule,
21+
FormsModule,
22+
MatProgressBarModule,
23+
MatButtonModule,
24+
MatButtonToggleModule,
25+
RouterModule.forChild([{path: '', component: MdcProgressBarDemo}]),
26+
],
27+
declarations: [MdcProgressBarDemo],
28+
})
29+
export class MdcProgressBarDemoModule {
30+
}

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<mat-button-toggle-group class="demo-progress-bar-controls" [(ngModel)]="color">
2+
<mat-button-toggle value="primary">Primary Color</mat-button-toggle>
3+
<mat-button-toggle value="accent">Accent Color</mat-button-toggle>
4+
<mat-button-toggle value="warn">Warn Color</mat-button-toggle>
5+
</mat-button-toggle-group>
6+
7+
<h1>Determinate</h1>
8+
9+
<div class="demo-progress-bar-controls">
10+
<span>Value: {{determinateProgressValue}}</span>
11+
<br/>
12+
<span>Last animation complete value: {{determinateAnimationEndValue}}</span>
13+
<button mat-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
14+
<button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
15+
</div>
16+
17+
<div class="demo-progress-bar-container">
18+
<mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color"
19+
(animationEnd)="determinateAnimationEndValue = $event.value">
20+
</mat-progress-bar>
21+
</div>
22+
23+
<h1>Buffer</h1>
24+
25+
<div class="demo-progress-bar-controls">
26+
<span>Value: {{bufferProgressValue}}</span>
27+
<br/>
28+
<span>Last animation complete value: {{bufferAnimationEndValue}}</span>
29+
<button mat-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
30+
<button mat-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
31+
<span class="demo-progress-bar-spacer"></span>
32+
<span>Buffer Value: {{bufferBufferValue}}</span>
33+
<button mat-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
34+
<button mat-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
35+
</div>
36+
37+
<div class="demo-progress-bar-container">
38+
<mat-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
39+
[color]="color" (animationEnd)="bufferAnimationEndValue = $event.value">
40+
</mat-progress-bar>
41+
</div>
42+
43+
<h1>Indeterminate</h1>
44+
<div class="demo-progress-bar-container">
45+
<mat-progress-bar mode="indeterminate" [color]="color"></mat-progress-bar>
46+
</div>
47+
48+
<h1>Query</h1>
49+
<div class="demo-progress-bar-container">
50+
<mat-progress-bar mode="query" [color]="color"></mat-progress-bar>
51+
</div>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.demo-progress-bar-container {
2+
width: 100%;
3+
4+
mat-progress-bar {
5+
margin: 20px 0;
6+
}
7+
}
8+
9+
.demo-progress-bar-spacer {
10+
display: inline-block;
11+
width: 50px;
12+
}
13+
14+
.demo-progress-bar-controls {
15+
margin: 10px 0;
16+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
moduleId: module.id,
13+
selector: 'mdc-progress-bar-demo',
14+
templateUrl: 'mdc-progress-bar-demo.html',
15+
styleUrls: ['mdc-progress-bar-demo.css'],
16+
})
17+
export class MdcProgressBarDemo {
18+
color: string = 'primary';
19+
determinateProgressValue: number = 30;
20+
determinateAnimationEndValue: number;
21+
bufferAnimationEndValue: number;
22+
bufferProgressValue: number = 30;
23+
bufferBufferValue: number = 40;
24+
25+
stepDeterminateProgressVal(val: number) {
26+
this.determinateProgressValue = this._clampValue(val + this.determinateProgressValue);
27+
}
28+
29+
stepBufferProgressVal(val: number) {
30+
this.bufferProgressValue = this._clampValue(val + this.bufferProgressValue);
31+
}
32+
33+
stepBufferBufferVal(val: number) {
34+
this.bufferBufferValue = this._clampValue(val + this.bufferBufferValue);
35+
}
36+
37+
private _clampValue(value: number) {
38+
return Math.max(0, Math.min(100, value));
39+
}
40+
}

‎src/dev-app/system-config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ var MATERIAL_EXPERIMENTAL_PACKAGES = [
6464
'mdc-helpers',
6565
'mdc-menu',
6666
'mdc-radio',
67+
'mdc-progress-bar',
6768
'mdc-slide-toggle',
6869
'mdc-slider',
6970
'popover-edit',

‎src/e2e-app/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ ng_module(
3838
"//src/material-experimental/mdc-checkbox",
3939
"//src/material-experimental/mdc-chips",
4040
"//src/material-experimental/mdc-menu",
41+
"//src/material-experimental/mdc-progress-bar",
4142
"//src/material-experimental/mdc-radio",
4243
"//src/material-experimental/mdc-slide-toggle",
4344
"//src/material-experimental/mdc-tabs",
@@ -79,6 +80,7 @@ sass_binary(
7980
"//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
8081
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
8182
"//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
83+
"//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
8284
"//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
8385
"//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
8486
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
3232
<a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
3333
<a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
34+
<a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
3435
</mat-nav-list>
3536

3637
<main>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
1919
import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
2020
import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
2121
import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
22+
import {MdcProgressBarE2E} from '../mdc-progress-bar/mdc-progress-bar-e2e';
2223
import {MenuE2E} from '../menu/menu-e2e';
2324
import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
2425
import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -53,6 +54,7 @@ export const E2E_APP_ROUTES: Routes = [
5354
{path: 'mdc-radio', component: MdcRadioE2e},
5455
{path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},
5556
{path: 'mdc-tabs', component: MdcTabsE2e},
57+
{path: 'mdc-progress-bar', component: MdcProgressBarE2E},
5658
{path: 'menu', component: MenuE2E},
5759
{path: 'progress-bar', component: ProgressBarE2E},
5860
{path: 'progress-spinner', component: ProgressSpinnerE2E},

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {StepperE2eModule} from './stepper/stepper-e2e-module';
3737
import {TabsE2eModule} from './tabs/tabs-e2e-module';
3838
import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
3939
import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
40+
import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-module';
4041

4142
@NgModule({
4243
imports: [
@@ -66,6 +67,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
6667
MdcRadioE2eModule,
6768
MdcSlideToggleE2eModule,
6869
MdcTabsE2eModule,
70+
MdcProgressBarE2eModule,
6971
MenuE2eModule,
7072
ProgressBarE2eModule,
7173
ProgressSpinnerE2eModule,

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
11+
import {MdcProgressBarE2E} from './mdc-progress-bar-e2e';
12+
13+
@NgModule({
14+
imports: [MatProgressBarModule],
15+
declarations: [MdcProgressBarE2E],
16+
})
17+
export class MdcProgressBarE2eModule {
18+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
2+
<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
3+
<mat-progress-bar mode="query"></mat-progress-bar>
4+
<mat-progress-bar mode="indeterminate"></mat-progress-bar>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'mdc-progress-bar-e2e',
7+
templateUrl: 'mdc-progress-bar-e2e.html',
8+
styles: [`
9+
mat-progress-bar {
10+
margin-bottom: 10px;
11+
}
12+
`]
13+
})
14+
export class MdcProgressBarE2E {
15+
determinateValue: number = 57;
16+
bufferValue: number = 35;
17+
}

‎src/e2e-app/theme.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import '../material-experimental/mdc-radio/mdc-radio';
99
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
1010
@import '../material-experimental/mdc-tabs/mdc-tabs';
11+
@import '../material-experimental/mdc-progress-bar/mdc-progress-bar';
1112

1213
// Plus imports for other components in your app.
1314

@@ -25,6 +26,7 @@
2526
@include mat-radio-typography-mdc(mat-typography-config());
2627
@include mat-slide-toggle-typography-mdc(mat-typography-config());
2728
@include mat-tabs-typography-mdc(mat-typography-config());
29+
@include mat-progress-bar-typography-mdc(mat-typography-config());
2830

2931
// Define the default theme (same as the example above).
3032
$candy-app-primary: mat-palette($mat-indigo);
@@ -43,3 +45,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
4345
@include mat-radio-theme-mdc($candy-app-theme);
4446
@include mat-slide-toggle-theme-mdc($candy-app-theme);
4547
@include mat-tabs-theme-mdc($candy-app-theme);
48+
@include mat-progress-bar-theme-mdc($candy-app-theme);

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ entryPoints = [
1313
"mdc-helpers",
1414
"mdc-menu",
1515
"mdc-menu/testing",
16+
"mdc-progress-bar",
1617
"mdc-radio",
1718
"mdc-select",
1819
"mdc-sidenav",

0 commit comments

Comments
 (0)