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

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/material/snack-bar/snack-bar.md

@@ -12,7 +12,7 @@ let snackBarRef = snackBar.open('Message archived');
 let snackBarRef = snackBar.open('Message archived', 'Undo');
 
 // Load the given component into the snackbar.
-let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent);
+let snackBarRef = snackBar.openFromComponent(MessageArchivedComponent);
 ```
 
 In either case, a `MatSnackBarRef` is returned. This can be used to dismiss the snackbar or to
@@ -43,7 +43,7 @@ message is still showing, the older message will be automatically dismissed.
 
 A snackbar can also be given a duration via the optional configuration object:
 ```ts
-snackbar.open('Message archived', 'Undo', {
+snackBar.open('Message archived', 'Undo', {
   duration: 3000
 });
 ```
@@ -53,7 +53,7 @@ You can share data with the custom snackbar, that you opened via the `openFromCo
 by passing it through the `data` property.
 
 ```ts
-snackbar.openFromComponent(MessageArchivedComponent, {
+snackBar.openFromComponent(MessageArchivedComponent, {
   data: 'some data'
 });
 ```
@@ -73,6 +73,22 @@ export class MessageArchivedComponent {
 }
 ```
 
+### Annotating custom snackbar content
+When opening a custom snackbar via the `snackBar.openFromComponent` method, you can use the
+following directives to annotate the content and ensure that it is styled consistently compared to
+snackbars  opened via `snackBar.open`.
+
+* `matSnackBarLabel` - Marks the text of the snackbar shown to users
+* `matSnackBarActions` - Marks the container element containing any action buttons
+* `matSnackBarAction` - Marks an individual action button
+
+If no annotations are used, all the content will be treated as text content.
+
+<!-- example({
+  "example": "snack-bar-annotated-component-example",
+  "file": "snack-bar-annotated-component-example-snack.html"
+}) -->
+
 ### Setting the global configuration defaults
 If you want to override the default snack bar options, you can do so using the
 `MAT_SNACK_BAR_DEFAULT_OPTIONS` injection token.