feat(material/snack-bar): Switch snack-bar implementation to use MDC (#25458)

Old implementation is still available under @angular/material/legacy-snack-bar

BREAKING CHANGE:
- DOM and CSS classes for mat-snack-bar have changes
- Typescript API is largely the same but may have minor differences
- See the MDC migration guide for more information about the changes and
  how to migrate your app (TODO: link when available)

Author: mmalerba

.github/CODEOWNERS

@@ -30,7 +30,7 @@
 /src/material/sidenav/**                           @mmalerba
 /src/material/legacy-slide-toggle/**                      @devversion
 /src/material/legacy-slider/**                     @mmalerba
-/src/material/snack-bar/**                         @andrewseguin @crisbeto
+/src/material/legacy-snack-bar/**                         @andrewseguin @crisbeto
 /src/material/sort/**                              @andrewseguin
 /src/material/stepper/**                           @mmalerba
 /src/material/table/**                             @andrewseguin
@@ -126,7 +126,7 @@
 /src/material-experimental/mdc-progress-spinner/**     @andrewseguin
 /src/material/progress-bar/**         @andrewseguin
 /src/material/radio/**                                 @mmalerba
-/src/material-experimental/mdc-snack-bar/**            @andrewseguin
+/src/material/snack-bar/**            @andrewseguin
 /src/material/slide-toggle/**                          @crisbeto
 /src/material/slider/**                                @devversion
 /src/material/tabs/**                 @crisbeto
@@ -344,7 +344,7 @@
 /tools/public_api_guard/material/sidenav**         @mmalerba
 /tools/public_api_guard/material/legacy-slide-toggle**    @devversion
 /tools/public_api_guard/material/slider**          @mmalerba
-/tools/public_api_guard/material/snack-bar**       @andrewseguin @crisbeto
+/tools/public_api_guard/material/legacy-snack-bar**       @andrewseguin @crisbeto
 /tools/public_api_guard/material/sort**            @andrewseguin
 /tools/public_api_guard/material/stepper**         @mmalerba
 /tools/public_api_guard/material/table**           @andrewseguin

.ng-dev/commit-message.mts

@@ -51,7 +51,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material/slide-toggle',
-    'material-experimental/mdc-snack-bar',
+    'material/snack-bar',
     'material-experimental/mdc-table',
     'material/tabs',
     'material-experimental/menubar',
@@ -100,7 +100,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-slide-toggle',
     'material/slider',
     'material/legacy-slider',
-    'material/snack-bar',
+    'material/legacy-snack-bar',
     'material/sort',
     'material/stepper',
     'material/table',

integration/mdc-migration/golden/src/app/app.module.ts

@@ -21,7 +21,7 @@ import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 import {MatTableModule} from '@angular/material-experimental/mdc-table';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';

integration/mdc-migration/golden/src/app/components/snack-bar/snack-bar.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 import {SnackBarComponent} from './snack-bar.component';
 
 describe('SnackBarComponent', () => {

integration/mdc-migration/golden/src/app/components/snack-bar/snack-bar.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatSnackBar} from '@angular/material/legacy-snack-bar';
 
 @Component({
   selector: 'snack-bar-example',

integration/mdc-migration/golden/src/styles.scss

@@ -66,8 +66,7 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.slide-toggle-typography($sample-project-theme);
 @include mat.mdc-slider-theme($sample-project-theme);
 @include mat.mdc-slider-typography($sample-project-theme);
-@include mat.mdc-snack-bar-theme($sample-project-theme);
-@include mat.mdc-snack-bar-typography($sample-project-theme);
+@include mat.snack-bar-typography($sample-project-theme);
 @include mat.mdc-table-theme($sample-project-theme);
 @include mat.mdc-table-typography($sample-project-theme);
 @include mat.tabs-theme($sample-project-theme);

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -21,7 +21,7 @@ import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/legacy-tabs';
 import {MatTooltipModule} from '@angular/material/tooltip';

integration/mdc-migration/sample-project/src/app/components/snack-bar/snack-bar.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 import {SnackBarComponent} from './snack-bar.component';
 
 describe('SnackBarComponent', () => {

integration/mdc-migration/sample-project/src/app/components/snack-bar/snack-bar.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatSnackBar} from '@angular/material/legacy-snack-bar';
 
 @Component({
   selector: 'snack-bar-example',

integration/mdc-migration/sample-project/src/styles.scss

@@ -44,7 +44,7 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.select-theme($sample-project-theme);
 @include mat.legacy-slide-toggle-theme($sample-project-theme);
 @include mat.slider-theme($sample-project-theme);
-@include mat.snack-bar-theme($sample-project-theme);
+@include mat.legacy-snack-bar-theme($sample-project-theme);
 @include mat.table-theme($sample-project-theme);
 @include mat.legacy-tabs-theme($sample-project-theme);
 @include mat.tooltip-theme($sample-project-theme);

src/components-examples/material-experimental/popover-edit/BUILD.bazel

@@ -16,7 +16,7 @@ ng_module(
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "//src/material/legacy-list",
-        "//src/material/snack-bar",
+        "//src/material/legacy-snack-bar",
         "//src/material/table",
         "@npm//@angular/common",
         "@npm//@angular/forms",

src/components-examples/material-experimental/popover-edit/index.ts

@@ -7,7 +7,7 @@ import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatLegacyListModule} from '@angular/material/legacy-list';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
 import {MatTableModule} from '@angular/material/table';
 import {PopoverEditCellSpanMatTableExample} from './popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example';
 import {PopoverEditMatTableFlexExample} from './popover-edit-mat-table-flex/popover-edit-mat-table-flex-example';
@@ -37,7 +37,7 @@ const EXAMPLES = [
     MatLegacyInputModule,
     MatLegacyListModule,
     MatPopoverEditModule,
-    MatSnackBarModule,
+    MatLegacySnackBarModule,
     MatTableModule,
     FormsModule,
   ],

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {FormValueContainer} from '@angular/cdk-experimental/popover-edit';
 import {NgForm} from '@angular/forms';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 export type ElementType = 'Metal' | 'Semimetal' | 'Nonmetal';
@@ -220,7 +220,7 @@ export class PopoverEditMatTableExample {
   readonly typeValues = new FormValueContainer<PeriodicElement, any>();
   readonly fantasyValues = new FormValueContainer<PeriodicElement, any>();
 
-  constructor(private readonly _snackBar: MatSnackBar) {}
+  constructor(private readonly _snackBar: MatLegacySnackBar) {}
 
   onSubmitName(element: PeriodicElement, f: NgForm) {
     if (!f.valid) {

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

@@ -18,8 +18,8 @@ ng_module(
         "//src/material/legacy-button",
         "//src/material/legacy-input",
         "//src/material/legacy-select",
-        "//src/material/snack-bar",
-        "//src/material/snack-bar/testing",
+        "//src/material/legacy-snack-bar",
+        "//src/material/legacy-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/snack-bar",
-        "//src/material/snack-bar/testing",
+        "//src/material/legacy-snack-bar",
+        "//src/material/legacy-snack-bar/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

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

@@ -3,7 +3,7 @@ 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 {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
 import {
   PizzaPartyComponent,
   SnackBarComponentExample,
@@ -33,7 +33,7 @@ const EXAMPLES = [
     MatLegacyButtonModule,
     MatLegacyInputModule,
     MatLegacySelectModule,
-    MatSnackBarModule,
+    MatLegacySnackBarModule,
   ],
   declarations: [...EXAMPLES, PizzaPartyComponent],
   exports: EXAMPLES,

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
 
 /**
  * @title Snack-bar with a custom component
@@ -12,7 +12,7 @@ import {MatSnackBar} from '@angular/material/snack-bar';
 export class SnackBarComponentExample {
   durationInSeconds = 5;
 
-  constructor(private _snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatLegacySnackBar) {}
 
   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 {MatSnackBarHarness} from '@angular/material/snack-bar/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatLegacySnackBarModule} from '@angular/material/legacy-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';
 
 describe('SnackBarHarnessExample', () => {
   let fixture: ComponentFixture<SnackBarHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatSnackBarModule, NoopAnimationsModule],
+      imports: [MatLegacySnackBarModule, 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(MatSnackBarHarness);
+    let snackBars = await loader.getAllHarnesses(MatLegacySnackBarHarness);
 
     expect(snackBars.length).toBe(1);
 
     snackBarRef.dismiss();
-    snackBars = await loader.getAllHarnesses(MatSnackBarHarness);
+    snackBars = await loader.getAllHarnesses(MatLegacySnackBarHarness);
     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(MatSnackBarHarness);
+    let snackBar = await loader.getHarness(MatLegacySnackBarHarness);
     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(MatSnackBarHarness);
+    let snackBar = await loader.getHarness(MatLegacySnackBarHarness);
     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(MatSnackBarHarness);
+    let snackBar = await loader.getHarness(MatLegacySnackBarHarness);
     expect(await snackBar.hasAction()).toBe(true);
 
     fixture.componentInstance.open('No action');
-    snackBar = await loader.getHarness(MatSnackBarHarness);
+    snackBar = await loader.getHarness(MatLegacySnackBarHarness);
     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 {MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar';
+import {MatLegacySnackBar, MatLegacySnackBarConfig} from '@angular/material/legacy-snack-bar';
 
 /**
  * @title Testing with MatSnackBarHarness
@@ -9,9 +9,9 @@ import {MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar';
   templateUrl: 'snack-bar-harness-example.html',
 })
 export class SnackBarHarnessExample {
-  constructor(readonly snackBar: MatSnackBar) {}
+  constructor(readonly snackBar: MatLegacySnackBar) {}
 
-  open(message: string, action = '', config?: MatSnackBarConfig) {
+  open(message: string, action = '', config?: MatLegacySnackBarConfig) {
     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 {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
 
 /**
  * @title Basic snack-bar
@@ -10,7 +10,7 @@ import {MatSnackBar} from '@angular/material/snack-bar';
   styleUrls: ['snack-bar-overview-example.css'],
 })
 export class SnackBarOverviewExample {
-  constructor(private _snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatLegacySnackBar) {}
 
   openSnackBar(message: string, action: string) {
     this._snackBar.open(message, action);

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

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

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

@@ -11,12 +11,12 @@ ng_module(
     ],
     deps = [
         "//src/cdk/bidi",
-        "//src/material-experimental/mdc-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",
     ],
 )

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

@@ -14,7 +14,7 @@ import {
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
   MatSnackBarModule,
-} from '@angular/material-experimental/mdc-snack-bar';
+} from '@angular/material/snack-bar';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';

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

@@ -16,7 +16,7 @@ ng_module(
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
         "//src/material/legacy-select",
-        "//src/material/snack-bar",
+        "//src/material/legacy-snack-bar",
         "@npm//@angular/forms",
     ],
 )