Skip to content

Commit a63bfc5

Browse files
andrewseguinandrewseguin
authored
feat(material-experimental/snack-bar): add MDC-based snack-bar (#19738)
* feat(material-experimental/snack-bar): add MDC-based snack-bar * review changes * review changes 2 * fix import * api golden * review changes * remove underscore prefix * golden
1 parent 2785719 commit a63bfc5

Some content is hidden

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

46 files changed

+1722
-234
lines changed

‎.github/CODEOWNERS

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
/src/material-experimental/mdc-progress-spinner/** @andrewseguin
112112
/src/material-experimental/mdc-progress-bar/** @andrewseguin
113113
/src/material-experimental/mdc-radio/** @mmalerba
114-
/src/material-experimental/mdc-snackbar/** @opozo
114+
/src/material-experimental/mdc-snack-bar/** @andrewseguin
115115
/src/material-experimental/mdc-slide-toggle/** @crisbeto
116116
/src/material-experimental/mdc-slider/** @devversion
117117
/src/material-experimental/mdc-tabs/** @crisbeto
@@ -176,8 +176,9 @@
176176
/src/dev-app/mdc-menu/** @crisbeto
177177
/src/dev-app/mdc-progress-bar/** @crisbeto
178178
/src/dev-app/mdc-radio/** @mmalerba
179-
/src/dev-app/mdc-snackbar/** @opozo
179+
/src/dev-app/mdc-snack-bar/** @andrewseguin
180180
/src/dev-app/mdc-sidenav/** @crisbeto
181+
/src/dev-app/mdc-snack-bar/** @andrewseguin
181182
/src/dev-app/mdc-slide-toggle/** @crisbeto
182183
/src/dev-app/mdc-slider/** @devversion
183184
/src/dev-app/mdc-table/** @andrewseguin

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ ng_module(
5757
"//src/dev-app/mdc-sidenav",
5858
"//src/dev-app/mdc-slide-toggle",
5959
"//src/dev-app/mdc-slider",
60-
"//src/dev-app/mdc-snackbar",
60+
"//src/dev-app/mdc-snack-bar",
6161
"//src/dev-app/mdc-table",
6262
"//src/dev-app/mdc-tabs",
6363
"//src/dev-app/menu",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export class DevAppLayout {
8585
{name: 'MDC Sidenav', route: '/mdc-sidenav'},
8686
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
8787
{name: 'MDC Slider', route: '/mdc-slider'},
88-
{name: 'MDC Snackbar', route: '/mdc-snackbar'},
88+
{name: 'MDC Snack Bar', route: '/mdc-snack-bar'},
8989
{name: 'MDC Table', route: '/mdc-table'},
9090
];
9191

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ export const DEV_APP_ROUTES: Routes = [
7878
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
7979
{path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
8080
{
81-
path: 'mdc-snackbar',
82-
loadChildren: 'mdc-snackbar/mdc-snackbar-demo-module#MdcSnackbarDemoModule'
81+
path: 'mdc-snack-bar',
82+
loadChildren: 'mdc-snack-bar/mdc-snack-bar-demo-module#MdcSnackBarDemoModule'
8383
},
8484
{
8585
path: 'mdc-slide-toggle',

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

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

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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 {MatSnackBarModule} from '@angular/material-experimental/mdc-snack-bar';
11+
import {RouterModule} from '@angular/router';
12+
import {MdcSnackBarDemo} from './mdc-snack-bar-demo';
13+
import {CommonModule} from '@angular/common';
14+
import {FormsModule} from '@angular/forms';
15+
import {MatButtonModule} from '@angular/material/button';
16+
import {MatCheckboxModule} from '@angular/material/checkbox';
17+
import {MatFormFieldModule} from '@angular/material/form-field';
18+
import {MatInputModule} from '@angular/material/input';
19+
import {MatSelectModule} from '@angular/material/select';
20+
21+
@NgModule({
22+
imports: [
23+
MatSnackBarModule,
24+
CommonModule,
25+
FormsModule,
26+
MatButtonModule,
27+
MatCheckboxModule,
28+
MatFormFieldModule,
29+
MatInputModule,
30+
MatSelectModule,
31+
RouterModule.forChild([{path: '', component: MdcSnackBarDemo}]),
32+
],
33+
declarations: [MdcSnackBarDemo],
34+
})
35+
export class MdcSnackBarDemoModule {
36+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<h1>SnackBar demo</h1>
2+
<div>
3+
<div>
4+
Message: <mat-form-field><input matInput type="text" [(ngModel)]="message"></mat-form-field>
5+
</div>
6+
<div>
7+
<div>Position in page: </div>
8+
<mat-form-field>
9+
<mat-select [(ngModel)]="horizontalPosition">
10+
<mat-option value="start">Start</mat-option>
11+
<mat-option value="end">End</mat-option>
12+
<mat-option value="left">Left</mat-option>
13+
<mat-option value="right">Right</mat-option>
14+
<mat-option value="center">Center</mat-option>
15+
</mat-select>
16+
</mat-form-field>
17+
<mat-form-field>
18+
<mat-select [(ngModel)]="verticalPosition">
19+
<mat-option value="top">Top</mat-option>
20+
<mat-option value="bottom">Bottom</mat-option>
21+
</mat-select>
22+
</mat-form-field>
23+
</div>
24+
<div>
25+
<mat-checkbox [(ngModel)]="action">
26+
<p *ngIf="!action">Show button on snack bar</p>
27+
<mat-form-field *ngIf="action">
28+
<mat-label>Snack bar action label</mat-label>
29+
<input matInput
30+
type="text"
31+
[(ngModel)]="actionButtonLabel">
32+
</mat-form-field>
33+
</mat-checkbox>
34+
</div>
35+
<div>
36+
<mat-checkbox [(ngModel)]="setAutoHide">
37+
<p *ngIf="!setAutoHide">Auto hide after duration</p>
38+
<mat-form-field *ngIf="setAutoHide">
39+
<mat-label>Auto hide duration in ms</mat-label>
40+
<input matInput
41+
type="number"
42+
[(ngModel)]="autoHide">
43+
</mat-form-field>
44+
</mat-checkbox>
45+
</div>
46+
<p>
47+
<mat-checkbox [(ngModel)]="addExtraClass">Add extra class to container</mat-checkbox>
48+
</p>
49+
</div>
50+
51+
<p>
52+
<button mat-raised-button (click)="open()">OPEN</button>
53+
</p>
54+
55+
<button mat-raised-button (click)="openTemplate()">OPEN TEMPLATE</button>
56+
57+
<ng-template #template>
58+
Template snack bar: {{message}}
59+
</ng-template>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.demo-party .mdc-snackbar__surface {
2+
animation: demo-party 5000ms infinite;
3+
}
4+
5+
@keyframes demo-party {
6+
0% { background: #00f; }
7+
10% { background: #8e44ad; }
8+
20% { background: #1abc9c; }
9+
30% { background: #d35400; }
10+
40% { background: #00f; }
11+
50% { background: #34495e; }
12+
60% { background: #00f; }
13+
70% { background: #2980b9; }
14+
80% { background: #f1c40f; }
15+
90% { background: #2980b9; }
16+
100% { background: #0ff; }
17+
}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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 {Directionality} from '@angular/cdk/bidi';
10+
import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
11+
import {MatSnackBar} from '@angular/material-experimental/mdc-snack-bar';
12+
import {
13+
MatSnackBarConfig,
14+
MatSnackBarHorizontalPosition,
15+
MatSnackBarVerticalPosition
16+
} from '@angular/material/snack-bar';
17+
18+
@Component({
19+
selector: 'mdc-snack-bar-demo',
20+
templateUrl: 'mdc-snack-bar-demo.html',
21+
styleUrls: ['mdc-snack-bar-demo.css'],
22+
encapsulation: ViewEncapsulation.None,
23+
})
24+
export class MdcSnackBarDemo {
25+
26+
@ViewChild('template') template: TemplateRef<any>;
27+
message = 'Snack Bar opened.';
28+
actionButtonLabel = 'Retry';
29+
action = false;
30+
setAutoHide = true;
31+
autoHide = 10000;
32+
addExtraClass = false;
33+
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
34+
verticalPosition: MatSnackBarVerticalPosition = 'bottom';
35+
36+
constructor(public snackBar: MatSnackBar, private _dir: Directionality) {}
37+
38+
open() {
39+
const config = this._createConfig();
40+
this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
41+
}
42+
43+
openTemplate() {
44+
const config = this._createConfig();
45+
this.snackBar.openFromTemplate(this.template, config);
46+
}
47+
48+
private _createConfig() {
49+
const config = new MatSnackBarConfig();
50+
config.verticalPosition = this.verticalPosition;
51+
config.horizontalPosition = this.horizontalPosition;
52+
config.duration = this.setAutoHide ? this.autoHide : 0;
53+
config.panelClass = this.addExtraClass ? ['demo-party'] : undefined;
54+
config.direction = this._dir.value;
55+
return config;
56+
}
57+
}

‎src/dev-app/mdc-snackbar/BUILD.bazel

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/dev-app/mdc-snackbar/mdc-snackbar-demo-module.ts

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/dev-app/mdc-snackbar/mdc-snackbar-demo.html

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/dev-app/mdc-snackbar/mdc-snackbar-demo.scss

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/dev-app/mdc-snackbar/mdc-snackbar-demo.ts

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/dev-app/snack-bar/snack-bar-demo.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Directionality} from '@angular/cdk/bidi';
10-
import {Component, TemplateRef, ViewChild} from '@angular/core';
10+
import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
1111
import {
1212
MatSnackBar,
1313
MatSnackBarConfig,
@@ -20,6 +20,7 @@ import {
2020
selector: 'snack-bar-demo',
2121
styleUrls: ['snack-bar-demo.css'],
2222
templateUrl: 'snack-bar-demo.html',
23+
encapsulation: ViewEncapsulation.None,
2324
})
2425
export class SnackBarDemo {
2526
@ViewChild('template') template: TemplateRef<any>;

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ entryPoints = [
2424
"mdc-slide-toggle/testing",
2525
"mdc-slider",
2626
"mdc-slider/testing",
27-
"mdc-snackbar",
27+
"mdc-snack-bar",
2828
"mdc-table",
2929
"mdc-tabs",
3030
"popover-edit",

0 commit comments

Comments
 (0)