docs(material/tabs): switch examples and demo to MDC

.github/CODEOWNERS

@@ -193,6 +193,7 @@
 /src/dev-app/legacy-radio/**                                @andrewseguin @devversion
 /src/dev-app/legacy-select/**                               @crisbeto
 /src/dev-app/legacy-snack-bar/**                            @andrewseguin
+/src/dev-app/legacy-tabs/**                                 @andrewseguin
 /src/dev-app/legacy-table/**                                @andrewseguin
 /src/dev-app/legacy-tooltip/**                              @crisbeto
 /src/dev-app/list/**                                        @andrewseguin @crisbeto @devversion

src/components-examples/material/tabs/BUILD.bazel

@@ -15,13 +15,13 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
+        "//src/material/button",
         "//src/material/button-toggle",
+        "//src/material/checkbox",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-input",
-        "//src/material/legacy-tabs",
-        "//src/material/legacy-tabs/testing",
+        "//src/material/input",
+        "//src/material/tabs",
+        "//src/material/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/legacy-tabs",
-        "//src/material/legacy-tabs/testing",
+        "//src/material/tabs",
+        "//src/material/tabs/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

src/components-examples/material/tabs/index.ts

@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatInputModule} from '@angular/material/input';
+import {MatTabsModule} from '@angular/material/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';
@@ -21,6 +21,9 @@ import {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-g
 import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
 import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
 import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
+import {TabGroupPaginatedExample} from './tab-group-paginated/tab-group-paginated-example';
+import {TabGroupInvertedExample} from './tab-group-inverted/tab-group-inverted-example';
+import {TabGroupInkBarExample} from './tab-group-ink-bar/tab-group-ink-bar-example';
 
 export {
   TabGroupAlignExample,
@@ -37,6 +40,9 @@ export {
   TabGroupThemeExample,
   TabNavBarBasicExample,
   TabGroupPreserveContentExample,
+  TabGroupPaginatedExample,
+  TabGroupInvertedExample,
+  TabGroupInkBarExample,
 };
 
 const EXAMPLES = [
@@ -54,17 +60,20 @@ const EXAMPLES = [
   TabGroupThemeExample,
   TabNavBarBasicExample,
   TabGroupPreserveContentExample,
+  TabGroupPaginatedExample,
+  TabGroupInvertedExample,
+  TabGroupInkBarExample,
 ];
 
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatButtonToggleModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyTabsModule,
+    MatInputModule,
+    MatTabsModule,
     ReactiveFormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html

@@ -1,18 +1,18 @@
 <!-- #docregion align-start -->
-<mat-tab-group mat-align-tabs="start">
+<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
 <!-- #enddocregion align-start -->
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>
 
-<mat-tab-group mat-align-tabs="center">
+<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center">
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>
 
-<mat-tab-group mat-align-tabs="end">
+<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="end">
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>

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 {MatLegacyTabGroupHarness} from '@angular/material/legacy-tabs/testing';
+import {MatTabGroupHarness} from '@angular/material/tabs/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatTabsModule} from '@angular/material/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: [MatLegacyTabsModule, NoopAnimationsModule],
+      imports: [MatTabsModule, 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(MatLegacyTabGroupHarness);
+    const tabGroups = await loader.getAllHarnesses(MatTabGroupHarness);
     expect(tabGroups.length).toBe(1);
   });
 
   it('should load harness for tab-group with selected tab label', async () => {
     const tabGroups = await loader.getAllHarnesses(
-      MatLegacyTabGroupHarness.with({
+      MatTabGroupHarness.with({
         selectedTabLabel: 'Profile',
       }),
     );
     expect(tabGroups.length).toBe(1);
   });
 
   it('should be able to get tabs of tab-group', async () => {
-    const tabGroup = await loader.getHarness(MatLegacyTabGroupHarness);
+    const tabGroup = await loader.getHarness(MatTabGroupHarness);
     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(MatLegacyTabGroupHarness);
+    const tabGroup = await loader.getHarness(MatTabGroupHarness);
     expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('Profile');
     await tabGroup.selectTab({label: 'FAQ'});
     expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('FAQ');

src/components-examples/material/tabs/tab-group-ink-bar/tab-group-ink-bar-example.html

@@ -0,0 +1,6 @@
+<mat-tab-group fitInkBarToContent>
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+  <mat-tab label="Fourth" disabled>Content 4</mat-tab>
+</mat-tab-group>

src/components-examples/material/tabs/tab-group-ink-bar/tab-group-ink-bar-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with ink bar fit to content
+ */
+@Component({
+  selector: 'tab-group-ink-bar-example',
+  templateUrl: 'tab-group-ink-bar-example.html',
+})
+export class TabGroupInkBarExample {}

src/components-examples/material/tabs/tab-group-inverted/tab-group-inverted-example.html

@@ -0,0 +1,5 @@
+<mat-tab-group headerPosition="below">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>

src/components-examples/material/tabs/tab-group-inverted/tab-group-inverted-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with inverted tabs
+ */
+@Component({
+  selector: 'tab-group-inverted-example',
+  templateUrl: 'tab-group-inverted-example.html',
+})
+export class TabGroupInvertedExample {}

src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.html

@@ -0,0 +1,3 @@
+<mat-tab-group>
+  <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab>
+</mat-tab-group>

src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with paginated tabs
+ */
+@Component({
+  selector: 'tab-group-paginated-example',
+  templateUrl: 'tab-group-paginated-example.html',
+})
+export class TabGroupPaginatedExample {
+  lotsOfTabs = new Array(30).fill(0).map((_, index) => `Tab ${index}`);
+}

src/dev-app/BUILD.bazel

@@ -62,13 +62,13 @@ ng_module(
         "//src/dev-app/legacy-slider",
         "//src/dev-app/legacy-snack-bar",
         "//src/dev-app/legacy-table",
+        "//src/dev-app/legacy-tabs",
         "//src/dev-app/legacy-tooltip",
         "//src/dev-app/list",
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-autocomplete",
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-slide-toggle",
-        "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",
         "//src/dev-app/menubar",
         "//src/dev-app/paginator",

src/dev-app/dev-app/dev-app-layout.ts

@@ -107,7 +107,8 @@ export class DevAppLayout {
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
-    {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'MDC Slider', route: '/mdc-slider'},
+    {name: 'Legacy Tabs', route: '/legacy-tabs'},
     {name: 'Legacy Button', route: '/legacy-button'},
     {name: 'Legacy Card', route: '/legacy-card'},
     {name: 'Legacy Checkbox', route: '/legacy-checkbox'},

src/dev-app/mdc-tabs/BUILD.bazel → src/dev-app/legacy-tabs/BUILD.bazel

@@ -3,19 +3,19 @@ load("//tools:defaults.bzl", "ng_module", "sass_binary")
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "mdc-tabs",
+    name = "legacy-tabs",
     srcs = glob(["**/*.ts"]),
     assets = [
-        "mdc-tabs-demo.html",
-        ":mdc_tabs_demo_scss",
+        "legacy-tabs-demo.html",
+        ":legacy_tabs_demo_scss",
     ],
     deps = [
         "//src/material/button-toggle",
-        "//src/material/tabs",
+        "//src/material/legacy-tabs",
     ],
 )
 
 sass_binary(
-    name = "mdc_tabs_demo_scss",
-    src = "mdc-tabs-demo.scss",
+    name = "legacy_tabs_demo_scss",
+    src = "legacy-tabs-demo.scss",
 )

src/dev-app/mdc-tabs/mdc-tabs-demo.html → src/dev-app/legacy-tabs/legacy-tabs-demo.html

@@ -91,24 +91,6 @@ <h2>Template labels</h2>
     </mat-tab>
   </mat-tab-group>
 
-  <h2>Ink bar fit to content</h2>
-  <button (click)="fitInkBarToContent = !fitInkBarToContent"> Toggle Fit To Content </button>
-  <mat-tab-group [fitInkBarToContent]="fitInkBarToContent">
-    <mat-tab label="First">Content 1</mat-tab>
-    <mat-tab label="Second">Content 2</mat-tab>
-    <mat-tab label="Third">Content 3</mat-tab>
-    <mat-tab label="Fourth" disabled>Content 4</mat-tab>
-  </mat-tab-group>
-
-  <h2>Ink bar fit to content</h2>
-  <nav mat-tab-nav-bar [fitInkBarToContent]="fitInkBarToContent" [tabPanel]="tabPanelInkBar">
-    <a mat-tab-link *ngFor="let link of links"
-       (click)="activeLink = link"
-       [active]="activeLink == link">{{link}}</a>
-    <a mat-tab-link disabled>Disabled Link</a>
-  </nav>
-  <mat-tab-nav-panel #tabPanelInkBar></mat-tab-nav-panel>
-
   <h2>Lazy tabs</h2>
   <mat-tab-group>
     <mat-tab label="One">

src/dev-app/mdc-tabs/mdc-tabs-demo.ts → src/dev-app/legacy-tabs/legacy-tabs-demo.ts

@@ -7,18 +7,18 @@
  */
 
 import {Component} from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {CommonModule} from '@angular/common';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 @Component({
-  selector: 'mdc-tabs-demo',
-  templateUrl: 'mdc-tabs-demo.html',
-  styleUrls: ['mdc-tabs-demo.css'],
+  selector: 'legacy-tabs-demo',
+  templateUrl: 'legacy-tabs-demo.html',
+  styleUrls: ['legacy-tabs-demo.css'],
   standalone: true,
-  imports: [MatTabsModule, CommonModule, MatButtonToggleModule],
+  imports: [MatLegacyTabsModule, CommonModule, MatButtonToggleModule],
 })
-export class MdcTabsDemo {
+export class LegacyTabsDemo {
   fitInkBarToContent = true;
   links = ['First', 'Second', 'Third'];
   lotsOfTabs = new Array(30).fill(0).map((_, index) => `Tab ${index}`);

src/dev-app/routes.ts

@@ -221,8 +221,8 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./legacy-table/legacy-table-demo').then(m => m.LegacyTableDemo),
   },
   {
-    path: 'mdc-tabs',
-    loadComponent: () => import('./mdc-tabs/mdc-tabs-demo').then(m => m.MdcTabsDemo),
+    path: 'legacy-tabs',
+    loadComponent: () => import('./legacy-tabs/legacy-tabs-demo').then(m => m.LegacyTabsDemo),
   },
   {
     path: 'legacy-tooltip',

src/dev-app/tabs/tabs-demo.html

@@ -20,3 +20,9 @@ <h3>Tab group theming</h3>
 <tab-group-theme-example></tab-group-theme-example>
 <h3>Tab navigation bar basic</h3>
 <tab-nav-bar-basic-example></tab-nav-bar-basic-example>
+<h3>Paginated Tabs</h3>
+<tab-group-paginated-example></tab-group-paginated-example>
+<h3>Inverted Tabs</h3>
+<tab-group-inverted-example></tab-group-inverted-example>
+<h3>Ink bar fit to content</h3>
+<tab-group-ink-bar-example></tab-group-ink-bar-example>