feat(material/tabs): Switch tabs implementation to use MDC (#25411)

Old implementation is still available under @angular/material/legacy-tabs BREAKING CHANGE: - DOM and CSS classes for mat-tabs 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)
angular · Aug 15, 2022 · 1fcdc27 · 1fcdc27
1 parent 8f11370
commit 1fcdc27
Show file tree

Hide file tree

Showing 160 changed files with 3,549 additions and 2,887 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -34,7 +34,7 @@
 /src/material/sort/**                              @andrewseguin
 /src/material/stepper/**                           @mmalerba
 /src/material/table/**                             @andrewseguin
-/src/material/tabs/**                              @andrewseguin
+/src/material/legacy-tabs/**                              @andrewseguin
 /src/material/testing/**                           @andrewseguin
 /src/material/toolbar/**                           @devversion
 /src/material/legacy-tooltip/**                    @andrewseguin
@@ -128,7 +128,7 @@
 /src/material-experimental/mdc-snack-bar/**            @andrewseguin
 /src/material/slide-toggle/**                          @crisbeto
 /src/material/slider/**                                @devversion
-/src/material-experimental/mdc-tabs/**                 @crisbeto
+/src/material/tabs/**                 @crisbeto
 /src/material-experimental/mdc-tooltip/**              @crisbeto
 /src/material-experimental/mdc-table/**                @andrewseguin
 /src/material-experimental/menubar/**                  @jelbourn
@@ -348,7 +348,7 @@
 /tools/public_api_guard/material/sort**            @andrewseguin
 /tools/public_api_guard/material/stepper**         @mmalerba
 /tools/public_api_guard/material/table**           @andrewseguin
-/tools/public_api_guard/material/tabs**            @andrewseguin
+/tools/public_api_guard/material/legacy-tabs**            @andrewseguin
 /tools/public_api_guard/material/toolbar**         @devversion
 /tools/public_api_guard/material/legacy-tooltip**  @andrewseguin
 /tools/public_api_guard/material/tree**            @jelbourn @andrewseguin

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -53,8 +53,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/slide-toggle',
     'material-experimental/mdc-snack-bar',
     'material-experimental/mdc-table',
-    'material-experimental/mdc-tabs',
-    'material-experimental/mdc-tooltip',
+    'material/tabs',
     'material-experimental/menubar',
     'material-experimental/popover-edit',
     'material-experimental/selection',
@@ -105,7 +104,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/sort',
     'material/stepper',
     'material/table',
-    'material/tabs',
+    'material/legacy-tabs',
     'material/testing',
     'material/theming',
     'material/toolbar',

diff --git a/integration/mdc-migration/golden/src/app/app.module.ts b/integration/mdc-migration/golden/src/app/app.module.ts
@@ -23,7 +23,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material-experimental/mdc-table';
-import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';

diff --git a/integration/mdc-migration/golden/src/app/components/tabs/tabs.component.spec.ts b/integration/mdc-migration/golden/src/app/components/tabs/tabs.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatTabsModule} from '@angular/material/legacy-tabs';
 import {TabsComponent} from './tabs.component';
 
 describe('TabsComponent', () => {

diff --git a/integration/mdc-migration/golden/src/styles.scss b/integration/mdc-migration/golden/src/styles.scss
@@ -70,8 +70,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-snack-bar-typography($sample-project-theme);
 @include mat.mdc-table-theme($sample-project-theme);
 @include mat.mdc-table-typography($sample-project-theme);
-@include mat.mdc-tabs-theme($sample-project-theme);
-@include mat.mdc-tabs-typography($sample-project-theme);
+@include mat.tabs-theme($sample-project-theme);
+@include mat.tabs-typography($sample-project-theme);
 @include mat.mdc-tooltip-theme($sample-project-theme);
 @include mat.mdc-tooltip-typography($sample-project-theme);
 

diff --git a/integration/mdc-migration/sample-project/src/app/app.module.ts b/integration/mdc-migration/sample-project/src/app/app.module.ts
@@ -23,7 +23,7 @@ import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatTabsModule} from '@angular/material/legacy-tabs';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';

diff --git a/integration/mdc-migration/sample-project/src/app/components/tabs/tabs.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/tabs/tabs.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatTabsModule} from '@angular/material/legacy-tabs';
 import {TabsComponent} from './tabs.component';
 
 describe('TabsComponent', () => {

diff --git a/integration/mdc-migration/sample-project/src/styles.scss b/integration/mdc-migration/sample-project/src/styles.scss
@@ -46,7 +46,7 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.slider-theme($sample-project-theme);
 @include mat.snack-bar-theme($sample-project-theme);
 @include mat.table-theme($sample-project-theme);
-@include mat.tabs-theme($sample-project-theme);
+@include mat.legacy-tabs-theme($sample-project-theme);
 @include mat.tooltip-theme($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */

diff --git a/integration/size-test/material/tabs/BUILD.bazel b/integration/size-test/material/tabs/BUILD.bazel
@@ -3,11 +3,11 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "basic",
     file = "basic.ts",
-    deps = ["//src/material/tabs"],
+    deps = ["//src/material/legacy-tabs"],
 )
 
 size_test(
     name = "advanced",
     file = "advanced.ts",
-    deps = ["//src/material/tabs"],
+    deps = ["//src/material/legacy-tabs"],
 )
diff --git a/integration/size-test/material/tabs/advanced.ts b/integration/size-test/material/tabs/advanced.ts
@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 
 /**
  * Advanced component using `MatTabGroup` and `MatTab` in combination with
@@ -18,7 +18,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatTabsModule],
+  imports: [MatLegacyTabsModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

diff --git a/integration/size-test/material/tabs/basic.ts b/integration/size-test/material/tabs/basic.ts
@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 
 /**
  * Basic component using `MatTabGroup` and `MatTab`. Other parts of the tabs
@@ -16,7 +16,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatTabsModule],
+  imports: [MatLegacyTabsModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

diff --git a/src/components-examples/material/tabs/BUILD.bazel b/src/components-examples/material/tabs/BUILD.bazel
@@ -20,8 +20,8 @@ ng_module(
         "//src/material/legacy-button",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
-        "//src/material/tabs",
-        "//src/material/tabs/testing",
+        "//src/material/legacy-tabs",
+        "//src/material/legacy-tabs/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -45,8 +45,8 @@ ng_test_library(
         ":tabs",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/tabs",
-        "//src/material/tabs/testing",
+        "//src/material/legacy-tabs",
+        "//src/material/legacy-tabs/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/tabs/index.ts b/src/components-examples/material/tabs/index.ts
@@ -6,7 +6,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {TabGroupAlignExample} from './tab-group-align/tab-group-align-example';
 import {TabGroupAnimationsExample} from './tab-group-animations/tab-group-animations-example';
 import {TabGroupAsyncExample} from './tab-group-async/tab-group-async-example';
@@ -64,7 +64,7 @@ const EXAMPLES = [
     MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,
-    MatTabsModule,
+    MatLegacyTabsModule,
     ReactiveFormsModule,
   ],
   declarations: EXAMPLES,

diff --git a/src/components-examples/material/tabs/tab-group-harness/tab-group-harness-example.spec.ts b/src/components-examples/material/tabs/tab-group-harness/tab-group-harness-example.spec.ts
@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatTabGroupHarness} from '@angular/material/tabs/testing';
+import {MatLegacyTabGroupHarness} from '@angular/material/legacy-tabs/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {TabGroupHarnessExample} from './tab-group-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -12,7 +12,7 @@ describe('TabGroupHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatTabsModule, NoopAnimationsModule],
+      imports: [MatLegacyTabsModule, NoopAnimationsModule],
       declarations: [TabGroupHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(TabGroupHarnessExample);
@@ -21,27 +21,27 @@ describe('TabGroupHarnessExample', () => {
   });
 
   it('should load harness for tab-group', async () => {
-    const tabGroups = await loader.getAllHarnesses(MatTabGroupHarness);
+    const tabGroups = await loader.getAllHarnesses(MatLegacyTabGroupHarness);
     expect(tabGroups.length).toBe(1);
   });
 
   it('should load harness for tab-group with selected tab label', async () => {
     const tabGroups = await loader.getAllHarnesses(
-      MatTabGroupHarness.with({
+      MatLegacyTabGroupHarness.with({
         selectedTabLabel: 'Profile',
       }),
     );
     expect(tabGroups.length).toBe(1);
   });
 
   it('should be able to get tabs of tab-group', async () => {
-    const tabGroup = await loader.getHarness(MatTabGroupHarness);
+    const tabGroup = await loader.getHarness(MatLegacyTabGroupHarness);
     const tabs = await tabGroup.getTabs();
     expect(tabs.length).toBe(3);
   });
 
   it('should be able to select tab from tab-group', async () => {
-    const tabGroup = await loader.getHarness(MatTabGroupHarness);
+    const tabGroup = await loader.getHarness(MatLegacyTabGroupHarness);
     expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('Profile');
     await tabGroup.selectTab({label: 'FAQ'});
     expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('FAQ');

diff --git a/src/dev-app/input/BUILD.bazel b/src/dev-app/input/BUILD.bazel
@@ -18,7 +18,7 @@ ng_module(
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
         "//src/material/legacy-select",
-        "//src/material/tabs",
+        "//src/material/legacy-tabs",
         "//src/material/toolbar",
         "@npm//@angular/forms",
     ],

diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts
@@ -18,7 +18,7 @@ import {FloatLabelType, MatLegacyFormFieldModule} from '@angular/material/legacy
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 let max = 5;
@@ -42,7 +42,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
     MatIconModule,
     MatLegacyInputModule,
     MatLegacySelectModule,
-    MatTabsModule,
+    MatLegacyTabsModule,
     MatToolbarModule,
     ReactiveFormsModule,
   ],

diff --git a/src/dev-app/mdc-input/BUILD.bazel b/src/dev-app/mdc-input/BUILD.bazel
@@ -11,7 +11,6 @@ ng_module(
     ],
     deps = [
         "//src/components-examples/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-tabs",
         "//src/material/autocomplete",
         "//src/material/button",
         "//src/material/button-toggle",
@@ -20,6 +19,7 @@ ng_module(
         "//src/material/form-field",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/tabs",
         "//src/material/toolbar",
         "@npm//@angular/forms",
     ],

diff --git a/src/dev-app/mdc-input/mdc-input-demo.ts b/src/dev-app/mdc-input/mdc-input-demo.ts
@@ -23,7 +23,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 let max = 5;

diff --git a/src/dev-app/mdc-slider/BUILD.bazel b/src/dev-app/mdc-slider/BUILD.bazel
@@ -9,8 +9,8 @@ ng_module(
         "mdc-slider-demo.html",
     ],
     deps = [
-        "//src/material-experimental/mdc-tabs",
         "//src/material/slider",
+        "//src/material/tabs",
         "@npm//@angular/forms",
     ],
 )
diff --git a/src/dev-app/mdc-slider/mdc-slider-demo.ts b/src/dev-app/mdc-slider/mdc-slider-demo.ts
@@ -9,7 +9,7 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatSliderModule} from '@angular/material/slider';
-import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {MatTabsModule} from '@angular/material/tabs';
 
 @Component({
   selector: 'mdc-slider-demo',

diff --git a/src/dev-app/mdc-tabs/BUILD.bazel b/src/dev-app/mdc-tabs/BUILD.bazel
@@ -10,8 +10,8 @@ ng_module(
         ":mdc_tabs_demo_scss",
     ],
     deps = [
-        "//src/material-experimental/mdc-tabs",
         "//src/material/button-toggle",
+        "//src/material/tabs",
     ],
 )
 

diff --git a/src/dev-app/mdc-tabs/mdc-tabs-demo.ts b/src/dev-app/mdc-tabs/mdc-tabs-demo.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {MatTabsModule} from '@angular/material/tabs';
 import {CommonModule} from '@angular/common';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 

diff --git a/src/dev-app/slider/BUILD.bazel b/src/dev-app/slider/BUILD.bazel
@@ -8,7 +8,7 @@ ng_module(
     assets = ["slider-demo.html"],
     deps = [
         "//src/material/legacy-slider",
-        "//src/material/tabs",
+        "//src/material/legacy-tabs",
         "@npm//@angular/forms",
     ],
 )
diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts
@@ -9,13 +9,13 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 
 @Component({
   selector: 'slider-demo',
   templateUrl: 'slider-demo.html',
   standalone: true,
-  imports: [FormsModule, MatLegacySliderModule, MatTabsModule],
+  imports: [FormsModule, MatLegacySliderModule, MatLegacyTabsModule],
 })
 export class SliderDemo {
   demo: number;

diff --git a/src/dev-app/tabs/BUILD.bazel b/src/dev-app/tabs/BUILD.bazel
@@ -9,6 +9,6 @@ ng_module(
     deps = [
         "//src/components-examples/material/tabs",
         "//src/dev-app/example",
-        "//src/material/tabs",
+        "//src/material/legacy-tabs",
     ],
 )
diff --git a/src/dev-app/tabs/tabs-demo.ts b/src/dev-app/tabs/tabs-demo.ts
@@ -7,13 +7,13 @@
  */
 
 import {Component} from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {TabGroupExamplesModule} from '@angular/components-examples/material/tabs';
 
 @Component({
   selector: 'tabs-demo',
   templateUrl: 'tabs-demo.html',
   standalone: true,
-  imports: [TabGroupExamplesModule, MatTabsModule],
+  imports: [TabGroupExamplesModule, MatLegacyTabsModule],
 })
 export class TabsDemo {}
diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -44,7 +44,6 @@ ng_module(
         "//src/components-examples/private",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-table",
-        "//src/material-experimental/mdc-tabs",
         "//src/material/button",
         "//src/material/card",
         "//src/material/checkbox",
@@ -64,6 +63,7 @@ ng_module(
         "//src/material/legacy-progress-bar",
         "//src/material/legacy-radio",
         "//src/material/legacy-slide-toggle",
+        "//src/material/legacy-tabs",
         "//src/material/menu",
         "//src/material/progress-bar",
         "//src/material/progress-spinner",