docs(material/snack-bar): update docs & examples for MDC-based snackbar (#25514)

* docs(material/snack-bar): update docs & examples for MDC-based snackbar

* update dev-app

Author: mmalerba

.github/CODEOWNERS

@@ -200,7 +200,7 @@
 /src/dev-app/mdc-progress-spinner/**                   @mmalerba
 /src/dev-app/mdc-radio/**                              @mmalerba
 /src/dev-app/legacy-select/**                          @crisbeto
-/src/dev-app/mdc-snack-bar/**                          @andrewseguin
+/src/dev-app/legacy-snack-bar/**                          @andrewseguin
 /src/dev-app/mdc-snack-bar/**                          @andrewseguin
 /src/dev-app/mdc-slide-toggle/**                       @crisbeto
 /src/dev-app/mdc-slider/**                             @devversion

src/components-examples/material/snack-bar/BUILD.bazel

@@ -15,11 +15,11 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-button",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
-        "//src/material/legacy-snack-bar",
-        "//src/material/legacy-snack-bar/testing",
+        "//src/material/button",
+        "//src/material/input",
+        "//src/material/select",
+        "//src/material/snack-bar",
+        "//src/material/snack-bar/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":snack-bar",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-snack-bar",
-        "//src/material/legacy-snack-bar/testing",
+        "//src/material/snack-bar",
+        "//src/material/snack-bar/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

src/components-examples/material/snack-bar/index.ts

@@ -1,41 +1,42 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {
   PizzaPartyComponent,
   SnackBarComponentExample,
 } from './snack-bar-component/snack-bar-component-example';
+import {
+  PizzaPartyAnnotatedComponent,
+  SnackBarAnnotatedComponentExample,
+} from './snack-bar-annotated-component/snack-bar-annotated-component-example';
 import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
 import {SnackBarPositionExample} from './snack-bar-position/snack-bar-position-example';
 import {SnackBarHarnessExample} from './snack-bar-harness/snack-bar-harness-example';
 
 export {
+  SnackBarAnnotatedComponentExample,
   SnackBarComponentExample,
   SnackBarHarnessExample,
   SnackBarOverviewExample,
   SnackBarPositionExample,
   PizzaPartyComponent,
+  PizzaPartyAnnotatedComponent,
 };
 
 const EXAMPLES = [
   SnackBarComponentExample,
   SnackBarHarnessExample,
   SnackBarOverviewExample,
   SnackBarPositionExample,
+  SnackBarAnnotatedComponentExample,
 ];
 
 @NgModule({
-  imports: [
-    FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
-    MatLegacySnackBarModule,
-  ],
-  declarations: [...EXAMPLES, PizzaPartyComponent],
+  imports: [FormsModule, MatButtonModule, MatInputModule, MatSelectModule, MatSnackBarModule],
+  declarations: [...EXAMPLES, PizzaPartyComponent, PizzaPartyAnnotatedComponent],
   exports: EXAMPLES,
 })
 export class SnackBarExamplesModule {}

src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html

@@ -0,0 +1,7 @@
+<span class="example-pizza-party" matSnackBarLabel>
+  Pizza party!!!
+</span>
+<span matSnackBarActions>
+  <button mat-button matSnackBarAction (click)="snackBarRef.dismissWithAction()">🍕</button>
+</span>
+

src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.css

@@ -0,0 +1,3 @@
+mat-form-field {
+  margin-right: 12px;
+}

src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html

@@ -0,0 +1,8 @@
+<mat-form-field appearance="fill">
+  <mat-label>Snack bar duration (seconds)</mat-label>
+  <input type="number" [(ngModel)]="durationInSeconds" matInput>
+</mat-form-field>
+
+<button mat-stroked-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
+  Pizza party
+</button>

src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts

@@ -0,0 +1,41 @@
+import {Component, inject} from '@angular/core';
+import {MatSnackBar, MatSnackBarRef} from '@angular/material/snack-bar';
+
+/**
+ * @title Snack-bar with an annotated custom component
+ */
+@Component({
+  selector: 'snack-bar-annotated-component-example',
+  templateUrl: 'snack-bar-annotated-component-example.html',
+  styleUrls: ['snack-bar-annotated-component-example.css'],
+})
+export class SnackBarAnnotatedComponentExample {
+  durationInSeconds = 5;
+
+  constructor(private _snackBar: MatSnackBar) {}
+
+  openSnackBar() {
+    this._snackBar.openFromComponent(PizzaPartyAnnotatedComponent, {
+      duration: this.durationInSeconds * 1000,
+    });
+  }
+}
+
+@Component({
+  selector: 'snack-bar-annotated-component-example-snack',
+  templateUrl: 'snack-bar-annotated-component-example-snack.html',
+  styles: [
+    `
+    :host {
+      display: flex;
+    }
+
+    .example-pizza-party {
+      color: hotpink;
+    }
+  `,
+  ],
+})
+export class PizzaPartyAnnotatedComponent {
+  snackBarRef = inject(MatSnackBarRef);
+}

src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.css

@@ -1,3 +1,3 @@
-.mat-form-field {
-  margin-right: 8px;
+mat-form-field {
+  margin-right: 12px;
 }

src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with a custom component
@@ -12,7 +12,7 @@ import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
 export class SnackBarComponentExample {
   durationInSeconds = 5;
 
-  constructor(private _snackBar: MatLegacySnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar() {
     this._snackBar.openFromComponent(PizzaPartyComponent, {

src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts

@@ -1,18 +1,18 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {SnackBarHarnessExample} from './snack-bar-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MatLegacySnackBarHarness} from '@angular/material/legacy-snack-bar/testing';
+import {MatSnackBarHarness} from '@angular/material/snack-bar/testing';
 
 describe('SnackBarHarnessExample', () => {
   let fixture: ComponentFixture<SnackBarHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacySnackBarModule, NoopAnimationsModule],
+      imports: [MatSnackBarModule, NoopAnimationsModule],
       declarations: [SnackBarHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SnackBarHarnessExample);
@@ -22,34 +22,34 @@ describe('SnackBarHarnessExample', () => {
 
   it('should load harness for simple snack-bar', async () => {
     const snackBarRef = fixture.componentInstance.open('Hi!', '');
-    let snackBars = await loader.getAllHarnesses(MatLegacySnackBarHarness);
+    let snackBars = await loader.getAllHarnesses(MatSnackBarHarness);
 
     expect(snackBars.length).toBe(1);
 
     snackBarRef.dismiss();
-    snackBars = await loader.getAllHarnesses(MatLegacySnackBarHarness);
+    snackBars = await loader.getAllHarnesses(MatSnackBarHarness);
     expect(snackBars.length).toBe(0);
   });
 
   it('should be able to get message of simple snack-bar', async () => {
     fixture.componentInstance.open('Subscribed to newsletter.');
-    let snackBar = await loader.getHarness(MatLegacySnackBarHarness);
+    let snackBar = await loader.getHarness(MatSnackBarHarness);
     expect(await snackBar.getMessage()).toBe('Subscribed to newsletter.');
   });
 
   it('should be able to get action description of simple snack-bar', async () => {
     fixture.componentInstance.open('Hello', 'Unsubscribe');
-    let snackBar = await loader.getHarness(MatLegacySnackBarHarness);
+    let snackBar = await loader.getHarness(MatSnackBarHarness);
     expect(await snackBar.getActionDescription()).toBe('Unsubscribe');
   });
 
   it('should be able to check whether simple snack-bar has action', async () => {
     fixture.componentInstance.open('With action', 'Unsubscribe');
-    let snackBar = await loader.getHarness(MatLegacySnackBarHarness);
+    let snackBar = await loader.getHarness(MatSnackBarHarness);
     expect(await snackBar.hasAction()).toBe(true);
 
     fixture.componentInstance.open('No action');
-    snackBar = await loader.getHarness(MatLegacySnackBarHarness);
+    snackBar = await loader.getHarness(MatSnackBarHarness);
     expect(await snackBar.hasAction()).toBe(false);
   });
 });

src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatLegacySnackBar, MatLegacySnackBarConfig} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar';
 
 /**
  * @title Testing with MatSnackBarHarness
@@ -9,9 +9,9 @@ import {MatLegacySnackBar, MatLegacySnackBarConfig} from '@angular/material/lega
   templateUrl: 'snack-bar-harness-example.html',
 })
 export class SnackBarHarnessExample {
-  constructor(readonly snackBar: MatLegacySnackBar) {}
+  constructor(readonly snackBar: MatSnackBar) {}
 
-  open(message: string, action = '', config?: MatLegacySnackBarConfig) {
+  open(message: string, action = '', config?: MatSnackBarConfig) {
     return this.snackBar.open(message, action, config);
   }
 }

src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Basic snack-bar
@@ -10,7 +10,7 @@ import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
   styleUrls: ['snack-bar-overview-example.css'],
 })
 export class SnackBarOverviewExample {
-  constructor(private _snackBar: MatLegacySnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar(message: string, action: string) {
     this._snackBar.open(message, action);

src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.css

@@ -1,3 +1,3 @@
-.mat-form-field {
-  margin-right: 8px;
+mat-form-field {
+  margin-right: 12px;
 }

src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts

@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
 import {
-  MatLegacySnackBar,
-  MatLegacySnackBarHorizontalPosition,
-  MatLegacySnackBarVerticalPosition,
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,
+} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with configurable position
@@ -14,10 +14,10 @@ import {
   styleUrls: ['snack-bar-position-example.css'],
 })
 export class SnackBarPositionExample {
-  horizontalPosition: MatLegacySnackBarHorizontalPosition = 'start';
-  verticalPosition: MatLegacySnackBarVerticalPosition = 'bottom';
+  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(private _snackBar: MatLegacySnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar() {
     this._snackBar.open('Cannonball!!', 'Splash', {

src/dev-app/BUILD.bazel

@@ -50,6 +50,7 @@ ng_module(
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-paginator",
         "//src/dev-app/legacy-select",
+        "//src/dev-app/legacy-snack-bar",
         "//src/dev-app/legacy-table",
         "//src/dev-app/legacy-tooltip",
         "//src/dev-app/list",
@@ -67,7 +68,6 @@ ng_module(
         "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",
-        "//src/dev-app/mdc-snack-bar",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",
         "//src/dev-app/menubar",