From f48755f12efe125852065aa78149d9a5ce37bb4d Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Mon, 22 Aug 2022 20:28:32 +0000
Subject: [PATCH 1/2] docs(material/snack-bar): update docs & examples for
 MDC-based snackbar

---
 .../material/snack-bar/BUILD.bazel            | 14 +++----
 .../material/snack-bar/index.ts               | 25 +++++------
 ...bar-annotated-component-example-snack.html |  7 ++++
 .../snack-bar-annotated-component-example.css |  3 ++
 ...snack-bar-annotated-component-example.html |  8 ++++
 .../snack-bar-annotated-component-example.ts  | 41 +++++++++++++++++++
 .../snack-bar-component-example.css           |  4 +-
 .../snack-bar-component-example.ts            |  4 +-
 .../snack-bar-harness-example.spec.ts         | 18 ++++----
 .../snack-bar-harness-example.ts              |  6 +--
 .../snack-bar-overview-example.ts             |  4 +-
 .../snack-bar-position-example.css            |  4 +-
 .../snack-bar-position-example.ts             | 14 +++----
 src/material/snack-bar/snack-bar.md           | 22 ++++++++--
 14 files changed, 125 insertions(+), 49 deletions(-)
 create mode 100644 src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html
 create mode 100644 src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.css
 create mode 100644 src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html
 create mode 100644 src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts

diff --git a/src/components-examples/material/snack-bar/BUILD.bazel b/src/components-examples/material/snack-bar/BUILD.bazel
index 4d41a4cac414..114c13561e06 100644
--- a/src/components-examples/material/snack-bar/BUILD.bazel
+++ b/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",
     ],
diff --git a/src/components-examples/material/snack-bar/index.ts b/src/components-examples/material/snack-bar/index.ts
index fd94e18bf381..29af6fa4d071 100644
--- a/src/components-examples/material/snack-bar/index.ts
+++ b/src/components-examples/material/snack-bar/index.ts
@@ -1,23 +1,29 @@
 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 = [
@@ -25,17 +31,12 @@ const EXAMPLES = [
   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 {}
diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html
new file mode 100644
index 000000000000..1bb8371b6c39
--- /dev/null
+++ b/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>
+
diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.css b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.css
new file mode 100644
index 000000000000..ece1d0db513c
--- /dev/null
+++ b/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;
+}
diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html
new file mode 100644
index 000000000000..e9071c002112
--- /dev/null
+++ b/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>
diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts
new file mode 100644
index 000000000000..0a2b6810742e
--- /dev/null
+++ b/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);
+}
diff --git a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.css b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.css
index 93993f80f01d..ece1d0db513c 100644
--- a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.css
+++ b/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;
 }
diff --git a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts
index fddd4ae36442..31b29521cd88 100644
--- a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts
+++ b/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, {
diff --git a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts
index fd9c6930eee3..94daa7f6e51d 100644
--- a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts
+++ b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts
@@ -1,10 +1,10 @@
 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>;
@@ -12,7 +12,7 @@ describe('SnackBarHarnessExample', () => {
 
   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);
   });
 });
diff --git a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts
index f26b87b63674..2c0ce7762035 100644
--- a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts
+++ b/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);
   }
 }
diff --git a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts
index c3cfe3f3f502..bd77539c2768 100644
--- a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts
+++ b/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);
diff --git a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.css b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.css
index 93993f80f01d..ece1d0db513c 100644
--- a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.css
+++ b/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;
 }
diff --git a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts
index 2d7a839ba68b..b6de855e28b6 100644
--- a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts
+++ b/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', {
diff --git a/src/material/snack-bar/snack-bar.md b/src/material/snack-bar/snack-bar.md
index a3f5fd29b254..fbda07d0c878 100644
--- a/src/material/snack-bar/snack-bar.md
+++ b/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.

From c309f7c43078bbf28405da384a2cb2a5b545e35a Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 23 Aug 2022 17:28:30 +0000
Subject: [PATCH 2/2] update dev-app

---
 .github/CODEOWNERS                            |  2 +-
 src/dev-app/BUILD.bazel                       |  2 +-
 src/dev-app/dev-app/dev-app-layout.ts         | 28 +++++-----
 src/dev-app/legacy-snack-bar/BUILD.bazel      | 27 ++++++++++
 .../legacy-snack-bar-demo.html}               |  2 -
 .../legacy-snack-bar-demo.scss}               |  2 +-
 .../legacy-snack-bar-demo.ts}                 | 52 ++++++++++---------
 src/dev-app/mdc-snack-bar/BUILD.bazel         | 27 ----------
 src/dev-app/routes.ts                         |  9 ++--
 src/dev-app/snack-bar/BUILD.bazel             | 12 ++---
 src/dev-app/snack-bar/snack-bar-demo.html     |  2 +
 src/dev-app/snack-bar/snack-bar-demo.scss     |  2 +-
 src/dev-app/snack-bar/snack-bar-demo.ts       | 46 ++++++++--------
 13 files changed, 107 insertions(+), 106 deletions(-)
 create mode 100644 src/dev-app/legacy-snack-bar/BUILD.bazel
 rename src/dev-app/{mdc-snack-bar/mdc-snack-bar-demo.html => legacy-snack-bar/legacy-snack-bar-demo.html} (95%)
 rename src/dev-app/{mdc-snack-bar/mdc-snack-bar-demo.scss => legacy-snack-bar/legacy-snack-bar-demo.scss} (91%)
 rename src/dev-app/{mdc-snack-bar/mdc-snack-bar-demo.ts => legacy-snack-bar/legacy-snack-bar-demo.ts} (54%)
 delete mode 100644 src/dev-app/mdc-snack-bar/BUILD.bazel

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 379ab849d461..04a586100758 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -201,7 +201,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
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index c894174fb6f7..c18dd3c04497 100644
--- a/src/dev-app/BUILD.bazel
+++ b/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",
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index f5c374221888..fd8e6215c6d6 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -46,16 +46,16 @@ export class DevAppLayout {
   strongFocus = false;
   navItems = [
     {name: 'Examples', route: '/examples'},
+    {name: 'CDK Dialog', route: '/cdk-dialog'},
+    {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
+    {name: 'CDK Listbox', route: '/cdk-listbox'},
+    {name: 'CDK Menu', route: '/cdk-menu'},
     {name: 'Autocomplete', route: '/autocomplete'},
     {name: 'Badge', route: '/badge'},
     {name: 'Bottom sheet', route: '/bottom-sheet'},
     {name: 'Button Toggle', route: '/button-toggle'},
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},
-    {name: 'CDK Dialog', route: '/cdk-dialog'},
-    {name: 'CDK Listbox', route: '/cdk-listbox'},
-    {name: 'CDK Menu', route: '/cdk-menu'},
-    {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
     {name: 'Checkbox', route: '/checkbox'},
     {name: 'Chips', route: '/chips'},
     {name: 'Clipboard', route: '/clipboard'},
@@ -63,18 +63,18 @@ export class DevAppLayout {
     {name: 'Connected Overlay', route: '/connected-overlay'},
     {name: 'Datepicker', route: '/datepicker'},
     {name: 'Dialog', route: '/dialog'},
-    {name: 'Drawer', route: '/drawer'},
     {name: 'Drag and Drop', route: '/drag-drop'},
+    {name: 'Drawer', route: '/drawer'},
     {name: 'Expansion Panel', route: '/expansion'},
     {name: 'Focus Origin', route: '/focus-origin'},
     {name: 'Focus Trap', route: '/focus-trap'},
     {name: 'Google Map', route: '/google-map'},
     {name: 'Grid List', route: '/grid-list'},
     {name: 'Icon', route: '/icon'},
-    {name: 'Input', route: '/input'},
     {name: 'Input Modality', route: '/input-modality'},
-    {name: 'List', route: '/list'},
+    {name: 'Input', route: '/input'},
     {name: 'Layout', route: '/layout'},
+    {name: 'List', route: '/list'},
     {name: 'Live Announcer', route: '/live-announcer'},
     {name: 'Menu', route: '/menu'},
     {name: 'Menubar', route: '/menubar'},
@@ -94,8 +94,8 @@ export class DevAppLayout {
     {name: 'Slider', route: '/slider'},
     {name: 'Snack Bar', route: '/snack-bar'},
     {name: 'Stepper', route: '/stepper'},
-    {name: 'Table', route: '/table'},
     {name: 'Table Scroll Container', route: '/table-scroll-container'},
+    {name: 'Table', route: '/table'},
     {name: 'Tabs', route: '/tabs'},
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
@@ -111,18 +111,18 @@ export class DevAppLayout {
     {name: 'MDC Dialog', route: '/mdc-dialog'},
     {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},
-    {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
-    {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
-    {name: 'MDC Snack Bar', route: '/mdc-snack-bar'},
+    {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'Legacy Input', route: '/legacy-input'},
+    {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'Legacy Select', route: '/legacy-select'},
-    {name: 'Legacy Tooltip', route: '/legacy-tooltip'},
+    {name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
     {name: 'Legacy Table', route: '/legacy-table'},
-    {name: 'Legacy Paginator', route: '/legacy-paginator'},
-    {name: 'Legacy Input', route: '/legacy-input'},
+    {name: 'Legacy Tooltip', route: '/legacy-tooltip'},
   ];
 
   /** Currently selected density scale based on the index. */
diff --git a/src/dev-app/legacy-snack-bar/BUILD.bazel b/src/dev-app/legacy-snack-bar/BUILD.bazel
new file mode 100644
index 000000000000..ca46afc2bc0a
--- /dev/null
+++ b/src/dev-app/legacy-snack-bar/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-snack-bar",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "legacy-snack-bar-demo.html",
+        ":legacy_snack_bar_demo_scss",
+    ],
+    deps = [
+        "//src/cdk/bidi",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
+        "//src/material/legacy-select",
+        "//src/material/legacy-snack-bar",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "legacy_snack_bar_demo_scss",
+    src = "legacy-snack-bar-demo.scss",
+)
diff --git a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.html b/src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.html
similarity index 95%
rename from src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.html
rename to src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.html
index 080876020a1c..e8ef3ca05cc0 100644
--- a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.html
+++ b/src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.html
@@ -6,7 +6,6 @@ <h1>SnackBar demo</h1>
   <div>
     <div>Position in page: </div>
     <mat-form-field>
-      <mat-label>Horizontal</mat-label>
       <mat-select [(ngModel)]="horizontalPosition">
         <mat-option value="start">Start</mat-option>
         <mat-option value="end">End</mat-option>
@@ -16,7 +15,6 @@ <h1>SnackBar demo</h1>
       </mat-select>
     </mat-form-field>
     <mat-form-field>
-      <mat-label>Vertical</mat-label>
       <mat-select [(ngModel)]="verticalPosition">
         <mat-option value="top">Top</mat-option>
         <mat-option value="bottom">Bottom</mat-option>
diff --git a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.scss b/src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.scss
similarity index 91%
rename from src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.scss
rename to src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.scss
index b8453c032fa4..65c4fd50d754 100644
--- a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.scss
+++ b/src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.scss
@@ -1,4 +1,4 @@
-.demo-party .mdc-snackbar__surface {
+.demo-party {
   animation: demo-party 5000ms infinite;
 }
 
diff --git a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts b/src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.ts
similarity index 54%
rename from src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts
rename to src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.ts
index 3ed14383123b..af96c3a97a17 100644
--- a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts
+++ b/src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.ts
@@ -6,39 +6,41 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directionality} from '@angular/cdk/bidi';
 import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
-import {
-  MatSnackBar,
-  MatSnackBarConfig,
-  MatSnackBarHorizontalPosition,
-  MatSnackBarVerticalPosition,
-  MatSnackBarModule,
-} from '@angular/material/snack-bar';
+import {Directionality} from '@angular/cdk/bidi';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {
+  MatLegacySnackBar,
+  MatLegacySnackBarConfig,
+  MatLegacySnackBarHorizontalPosition,
+  MatLegacySnackBarModule,
+  MatLegacySnackBarVerticalPosition,
+} from '@angular/material/legacy-snack-bar';
 
 @Component({
-  selector: 'mdc-snack-bar-demo',
-  templateUrl: 'mdc-snack-bar-demo.html',
-  styleUrls: ['mdc-snack-bar-demo.css'],
+  selector: 'legacy-snack-bar-demo',
+  styleUrls: ['legacy-snack-bar-demo.css'],
+  templateUrl: 'legacy-snack-bar-demo.html',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    MatSnackBarModule,
     CommonModule,
     FormsModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatInputModule,
-    MatSelectModule,
+    MatLegacyButtonModule,
+    MatLegacyCheckboxModule,
+    MatLegacyFormFieldModule,
+    MatLegacyInputModule,
+    MatLegacySelectModule,
+    MatLegacySnackBarModule,
   ],
 })
-export class MdcSnackBarDemo {
+export class LegacySnackBarDemo {
   @ViewChild('template') template: TemplateRef<any>;
   message = 'Snack Bar opened.';
   actionButtonLabel = 'Retry';
@@ -46,10 +48,10 @@ export class MdcSnackBarDemo {
   setAutoHide = true;
   autoHide = 10000;
   addExtraClass = false;
-  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
-  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+  horizontalPosition: MatLegacySnackBarHorizontalPosition = 'center';
+  verticalPosition: MatLegacySnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatSnackBar, private _dir: Directionality) {}
+  constructor(public snackBar: MatLegacySnackBar, private _dir: Directionality) {}
 
   open() {
     const config = this._createConfig();
@@ -62,7 +64,7 @@ export class MdcSnackBarDemo {
   }
 
   private _createConfig() {
-    const config = new MatSnackBarConfig();
+    const config = new MatLegacySnackBarConfig();
     config.verticalPosition = this.verticalPosition;
     config.horizontalPosition = this.horizontalPosition;
     config.duration = this.setAutoHide ? this.autoHide : 0;
diff --git a/src/dev-app/mdc-snack-bar/BUILD.bazel b/src/dev-app/mdc-snack-bar/BUILD.bazel
deleted file mode 100644
index d1104894987a..000000000000
--- a/src/dev-app/mdc-snack-bar/BUILD.bazel
+++ /dev/null
@@ -1,27 +0,0 @@
-load("//tools:defaults.bzl", "ng_module", "sass_binary")
-
-package(default_visibility = ["//visibility:public"])
-
-ng_module(
-    name = "mdc-snack-bar",
-    srcs = glob(["**/*.ts"]),
-    assets = [
-        "mdc-snack-bar-demo.html",
-        ":mdc_snack_bar_demo_scss",
-    ],
-    deps = [
-        "//src/cdk/bidi",
-        "//src/material/button",
-        "//src/material/checkbox",
-        "//src/material/form-field",
-        "//src/material/input",
-        "//src/material/select",
-        "//src/material/snack-bar",
-        "@npm//@angular/forms",
-    ],
-)
-
-sass_binary(
-    name = "mdc_snack_bar_demo_scss",
-    src = "mdc-snack-bar-demo.scss",
-)
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index 2813d6fa28ca..c0d4cca1ec2e 100644
--- a/src/dev-app/routes.ts
+++ b/src/dev-app/routes.ts
@@ -204,8 +204,8 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./select/select-demo').then(m => m.SelectDemo),
   },
   {
-    path: 'mdc-snack-bar',
-    loadComponent: () => import('./mdc-snack-bar/mdc-snack-bar-demo').then(m => m.MdcSnackBarDemo),
+    path: 'snack-bar',
+    loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
   },
   {
     path: 'mdc-slide-toggle',
@@ -283,8 +283,9 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./slider/slider-demo').then(m => m.SliderDemo),
   },
   {
-    path: 'snack-bar',
-    loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
+    path: 'legacy-snack-bar',
+    loadComponent: () =>
+      import('./legacy-snack-bar/legacy-snack-bar-demo').then(m => m.LegacySnackBarDemo),
   },
   {
     path: 'stepper',
diff --git a/src/dev-app/snack-bar/BUILD.bazel b/src/dev-app/snack-bar/BUILD.bazel
index 56e99038f18e..a7244cf7e545 100644
--- a/src/dev-app/snack-bar/BUILD.bazel
+++ b/src/dev-app/snack-bar/BUILD.bazel
@@ -11,12 +11,12 @@ ng_module(
     ],
     deps = [
         "//src/cdk/bidi",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
-        "//src/material/legacy-snack-bar",
+        "//src/material/button",
+        "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "//src/material/snack-bar",
         "@npm//@angular/forms",
     ],
 )
diff --git a/src/dev-app/snack-bar/snack-bar-demo.html b/src/dev-app/snack-bar/snack-bar-demo.html
index e8ef3ca05cc0..080876020a1c 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.html
+++ b/src/dev-app/snack-bar/snack-bar-demo.html
@@ -6,6 +6,7 @@ <h1>SnackBar demo</h1>
   <div>
     <div>Position in page: </div>
     <mat-form-field>
+      <mat-label>Horizontal</mat-label>
       <mat-select [(ngModel)]="horizontalPosition">
         <mat-option value="start">Start</mat-option>
         <mat-option value="end">End</mat-option>
@@ -15,6 +16,7 @@ <h1>SnackBar demo</h1>
       </mat-select>
     </mat-form-field>
     <mat-form-field>
+      <mat-label>Vertical</mat-label>
       <mat-select [(ngModel)]="verticalPosition">
         <mat-option value="top">Top</mat-option>
         <mat-option value="bottom">Bottom</mat-option>
diff --git a/src/dev-app/snack-bar/snack-bar-demo.scss b/src/dev-app/snack-bar/snack-bar-demo.scss
index 65c4fd50d754..b8453c032fa4 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.scss
+++ b/src/dev-app/snack-bar/snack-bar-demo.scss
@@ -1,4 +1,4 @@
-.demo-party {
+.demo-party .mdc-snackbar__surface {
   animation: demo-party 5000ms infinite;
 }
 
diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts
index 581bde778f8d..de5991a4d609 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.ts
+++ b/src/dev-app/snack-bar/snack-bar-demo.ts
@@ -6,38 +6,36 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
+import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarConfig,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,
+  MatSnackBarModule,
+} from '@angular/material/snack-bar';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {
-  MatLegacySnackBar,
-  MatLegacySnackBarConfig,
-  MatLegacySnackBarHorizontalPosition,
-  MatLegacySnackBarModule,
-  MatLegacySnackBarVerticalPosition,
-} from '@angular/material/legacy-snack-bar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 
 @Component({
   selector: 'snack-bar-demo',
-  styleUrls: ['snack-bar-demo.css'],
   templateUrl: 'snack-bar-demo.html',
+  styleUrls: ['snack-bar-demo.css'],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
+    MatSnackBarModule,
     CommonModule,
     FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
-    MatLegacySnackBarModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatSelectModule,
   ],
 })
 export class SnackBarDemo {
@@ -48,10 +46,10 @@ export class SnackBarDemo {
   setAutoHide = true;
   autoHide = 10000;
   addExtraClass = false;
-  horizontalPosition: MatLegacySnackBarHorizontalPosition = 'center';
-  verticalPosition: MatLegacySnackBarVerticalPosition = 'bottom';
+  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatLegacySnackBar, private _dir: Directionality) {}
+  constructor(public snackBar: MatSnackBar, private _dir: Directionality) {}
 
   open() {
     const config = this._createConfig();
@@ -64,7 +62,7 @@ export class SnackBarDemo {
   }
 
   private _createConfig() {
-    const config = new MatLegacySnackBarConfig();
+    const config = new MatSnackBarConfig();
     config.verticalPosition = this.verticalPosition;
     config.horizontalPosition = this.horizontalPosition;
     config.duration = this.setAutoHide ? this.autoHide : 0;