Skip to content

Commit aab5733

Browse files
mmalerbammalerba
committed
feat(material/tabs): Switch tabs implementation to use MDC
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)
1 parent 8f11370 commit aab5733

File tree

160 files changed

+3549
-2887
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

160 files changed

+3549
-2887
lines changed

‎.github/CODEOWNERS

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
/src/material/sort/** @andrewseguin
3535
/src/material/stepper/** @mmalerba
3636
/src/material/table/** @andrewseguin
37-
/src/material/tabs/** @andrewseguin
37+
/src/material/legacy-tabs/** @andrewseguin
3838
/src/material/testing/** @andrewseguin
3939
/src/material/toolbar/** @devversion
4040
/src/material/legacy-tooltip/** @andrewseguin
@@ -128,7 +128,7 @@
128128
/src/material-experimental/mdc-snack-bar/** @andrewseguin
129129
/src/material/slide-toggle/** @crisbeto
130130
/src/material/slider/** @devversion
131-
/src/material-experimental/mdc-tabs/** @crisbeto
131+
/src/material/tabs/** @crisbeto
132132
/src/material-experimental/mdc-tooltip/** @crisbeto
133133
/src/material-experimental/mdc-table/** @andrewseguin
134134
/src/material-experimental/menubar/** @jelbourn
@@ -348,7 +348,7 @@
348348
/tools/public_api_guard/material/sort** @andrewseguin
349349
/tools/public_api_guard/material/stepper** @mmalerba
350350
/tools/public_api_guard/material/table** @andrewseguin
351-
/tools/public_api_guard/material/tabs** @andrewseguin
351+
/tools/public_api_guard/material/legacy-tabs** @andrewseguin
352352
/tools/public_api_guard/material/toolbar** @devversion
353353
/tools/public_api_guard/material/legacy-tooltip** @andrewseguin
354354
/tools/public_api_guard/material/tree** @jelbourn @andrewseguin

‎.ng-dev/commit-message.mts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@ export const commitMessage: CommitMessageConfig = {
5353
'material/slide-toggle',
5454
'material-experimental/mdc-snack-bar',
5555
'material-experimental/mdc-table',
56-
'material-experimental/mdc-tabs',
57-
'material-experimental/mdc-tooltip',
56+
'material/tabs',
5857
'material-experimental/menubar',
5958
'material-experimental/popover-edit',
6059
'material-experimental/selection',
@@ -105,7 +104,7 @@ export const commitMessage: CommitMessageConfig = {
105104
'material/sort',
106105
'material/stepper',
107106
'material/table',
108-
'material/tabs',
107+
'material/legacy-tabs',
109108
'material/testing',
110109
'material/theming',
111110
'material/toolbar',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
2323
import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
2424
import {MatSnackBarModule} from '@angular/material/snack-bar';
2525
import {MatTableModule} from '@angular/material-experimental/mdc-table';
26-
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
26+
import {MatTabsModule} from '@angular/material/tabs';
2727
import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
2828
import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
2929
import {ButtonComponent} from './components/button/button.component';

‎integration/mdc-migration/golden/src/app/components/tabs/tabs.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
3-
import {MatTabsModule} from '@angular/material/tabs';
3+
import {MatTabsModule} from '@angular/material/legacy-tabs';
44
import {TabsComponent} from './tabs.component';
55

66
describe('TabsComponent', () => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ $sample-project-theme: mat.define-light-theme((
7070
@include mat.mdc-snack-bar-typography($sample-project-theme);
7171
@include mat.mdc-table-theme($sample-project-theme);
7272
@include mat.mdc-table-typography($sample-project-theme);
73-
@include mat.mdc-tabs-theme($sample-project-theme);
74-
@include mat.mdc-tabs-typography($sample-project-theme);
73+
@include mat.tabs-theme($sample-project-theme);
74+
@include mat.tabs-typography($sample-project-theme);
7575
@include mat.mdc-tooltip-theme($sample-project-theme);
7676
@include mat.mdc-tooltip-typography($sample-project-theme);
7777

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
2323
import {MatSliderModule} from '@angular/material/slider';
2424
import {MatSnackBarModule} from '@angular/material/snack-bar';
2525
import {MatTableModule} from '@angular/material/table';
26-
import {MatTabsModule} from '@angular/material/tabs';
26+
import {MatTabsModule} from '@angular/material/legacy-tabs';
2727
import {MatTooltipModule} from '@angular/material/tooltip';
2828
import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
2929
import {ButtonComponent} from './components/button/button.component';

‎integration/mdc-migration/sample-project/src/app/components/tabs/tabs.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
3-
import {MatTabsModule} from '@angular/material/tabs';
3+
import {MatTabsModule} from '@angular/material/legacy-tabs';
44
import {TabsComponent} from './tabs.component';
55

66
describe('TabsComponent', () => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ $sample-project-theme: mat.define-light-theme((
4646
@include mat.slider-theme($sample-project-theme);
4747
@include mat.snack-bar-theme($sample-project-theme);
4848
@include mat.table-theme($sample-project-theme);
49-
@include mat.tabs-theme($sample-project-theme);
49+
@include mat.legacy-tabs-theme($sample-project-theme);
5050
@include mat.tooltip-theme($sample-project-theme);
5151

5252
/* You can add global styles to this file, and also import other style files */

‎integration/size-test/material/tabs/BUILD.bazel

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ load("//integration/size-test:index.bzl", "size_test")
33
size_test(
44
name = "basic",
55
file = "basic.ts",
6-
deps = ["//src/material/tabs"],
6+
deps = ["//src/material/legacy-tabs"],
77
)
88

99
size_test(
1010
name = "advanced",
1111
file = "advanced.ts",
12-
deps = ["//src/material/tabs"],
12+
deps = ["//src/material/legacy-tabs"],
1313
)

‎integration/size-test/material/tabs/advanced.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, NgModule} from '@angular/core';
2-
import {MatTabsModule} from '@angular/material/tabs';
2+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
33

44
/**
55
* Advanced component using `MatTabGroup` and `MatTab` in combination with
@@ -18,7 +18,7 @@ import {MatTabsModule} from '@angular/material/tabs';
1818
export class TestComponent {}
1919

2020
@NgModule({
21-
imports: [MatTabsModule],
21+
imports: [MatLegacyTabsModule],
2222
declarations: [TestComponent],
2323
bootstrap: [TestComponent],
2424
})

‎integration/size-test/material/tabs/basic.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, NgModule} from '@angular/core';
2-
import {MatTabsModule} from '@angular/material/tabs';
2+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
33

44
/**
55
* Basic component using `MatTabGroup` and `MatTab`. Other parts of the tabs
@@ -16,7 +16,7 @@ import {MatTabsModule} from '@angular/material/tabs';
1616
export class TestComponent {}
1717

1818
@NgModule({
19-
imports: [MatTabsModule],
19+
imports: [MatLegacyTabsModule],
2020
declarations: [TestComponent],
2121
bootstrap: [TestComponent],
2222
})

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ ng_module(
2020
"//src/material/legacy-button",
2121
"//src/material/legacy-checkbox",
2222
"//src/material/legacy-input",
23-
"//src/material/tabs",
24-
"//src/material/tabs/testing",
23+
"//src/material/legacy-tabs",
24+
"//src/material/legacy-tabs/testing",
2525
"@npm//@angular/forms",
2626
"@npm//@angular/platform-browser",
2727
"@npm//@angular/platform-browser-dynamic",
@@ -45,8 +45,8 @@ ng_test_library(
4545
":tabs",
4646
"//src/cdk/testing",
4747
"//src/cdk/testing/testbed",
48-
"//src/material/tabs",
49-
"//src/material/tabs/testing",
48+
"//src/material/legacy-tabs",
49+
"//src/material/legacy-tabs/testing",
5050
"@npm//@angular/platform-browser",
5151
"@npm//@angular/platform-browser-dynamic",
5252
],

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
66
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
77
import {MatIconModule} from '@angular/material/icon';
88
import {MatLegacyInputModule} from '@angular/material/legacy-input';
9-
import {MatTabsModule} from '@angular/material/tabs';
9+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
1010
import {TabGroupAlignExample} from './tab-group-align/tab-group-align-example';
1111
import {TabGroupAnimationsExample} from './tab-group-animations/tab-group-animations-example';
1212
import {TabGroupAsyncExample} from './tab-group-async/tab-group-async-example';
@@ -64,7 +64,7 @@ const EXAMPLES = [
6464
MatLegacyCheckboxModule,
6565
MatIconModule,
6666
MatLegacyInputModule,
67-
MatTabsModule,
67+
MatLegacyTabsModule,
6868
ReactiveFormsModule,
6969
],
7070
declarations: EXAMPLES,

‎src/components-examples/material/tabs/tab-group-harness/tab-group-harness-example.spec.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatTabGroupHarness} from '@angular/material/tabs/testing';
3+
import {MatLegacyTabGroupHarness} from '@angular/material/legacy-tabs/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatTabsModule} from '@angular/material/tabs';
5+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
66
import {TabGroupHarnessExample} from './tab-group-harness-example';
77
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
88

@@ -12,7 +12,7 @@ describe('TabGroupHarnessExample', () => {
1212

1313
beforeEach(async () => {
1414
await TestBed.configureTestingModule({
15-
imports: [MatTabsModule, NoopAnimationsModule],
15+
imports: [MatLegacyTabsModule, NoopAnimationsModule],
1616
declarations: [TabGroupHarnessExample],
1717
}).compileComponents();
1818
fixture = TestBed.createComponent(TabGroupHarnessExample);
@@ -21,27 +21,27 @@ describe('TabGroupHarnessExample', () => {
2121
});
2222

2323
it('should load harness for tab-group', async () => {
24-
const tabGroups = await loader.getAllHarnesses(MatTabGroupHarness);
24+
const tabGroups = await loader.getAllHarnesses(MatLegacyTabGroupHarness);
2525
expect(tabGroups.length).toBe(1);
2626
});
2727

2828
it('should load harness for tab-group with selected tab label', async () => {
2929
const tabGroups = await loader.getAllHarnesses(
30-
MatTabGroupHarness.with({
30+
MatLegacyTabGroupHarness.with({
3131
selectedTabLabel: 'Profile',
3232
}),
3333
);
3434
expect(tabGroups.length).toBe(1);
3535
});
3636

3737
it('should be able to get tabs of tab-group', async () => {
38-
const tabGroup = await loader.getHarness(MatTabGroupHarness);
38+
const tabGroup = await loader.getHarness(MatLegacyTabGroupHarness);
3939
const tabs = await tabGroup.getTabs();
4040
expect(tabs.length).toBe(3);
4141
});
4242

4343
it('should be able to select tab from tab-group', async () => {
44-
const tabGroup = await loader.getHarness(MatTabGroupHarness);
44+
const tabGroup = await loader.getHarness(MatLegacyTabGroupHarness);
4545
expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('Profile');
4646
await tabGroup.selectTab({label: 'FAQ'});
4747
expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('FAQ');

‎src/dev-app/input/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ng_module(
1818
"//src/material/legacy-form-field",
1919
"//src/material/legacy-input",
2020
"//src/material/legacy-select",
21-
"//src/material/tabs",
21+
"//src/material/legacy-tabs",
2222
"//src/material/toolbar",
2323
"@npm//@angular/forms",
2424
],

‎src/dev-app/input/input-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {FloatLabelType, MatLegacyFormFieldModule} from '@angular/material/legacy
1818
import {MatIconModule} from '@angular/material/icon';
1919
import {MatLegacyInputModule} from '@angular/material/legacy-input';
2020
import {MatLegacySelectModule} from '@angular/material/legacy-select';
21-
import {MatTabsModule} from '@angular/material/tabs';
21+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
2222
import {MatToolbarModule} from '@angular/material/toolbar';
2323

2424
let max = 5;
@@ -42,7 +42,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
4242
MatIconModule,
4343
MatLegacyInputModule,
4444
MatLegacySelectModule,
45-
MatTabsModule,
45+
MatLegacyTabsModule,
4646
MatToolbarModule,
4747
ReactiveFormsModule,
4848
],

‎src/dev-app/mdc-input/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/components-examples/material-experimental/mdc-form-field",
14-
"//src/material-experimental/mdc-tabs",
1514
"//src/material/autocomplete",
1615
"//src/material/button",
1716
"//src/material/button-toggle",
@@ -20,6 +19,7 @@ ng_module(
2019
"//src/material/form-field",
2120
"//src/material/icon",
2221
"//src/material/input",
22+
"//src/material/tabs",
2323
"//src/material/toolbar",
2424
"@npm//@angular/forms",
2525
],

‎src/dev-app/mdc-input/mdc-input-demo.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
2323
import {MatCardModule} from '@angular/material/card';
2424
import {MatCheckboxModule} from '@angular/material/checkbox';
2525
import {MatIconModule} from '@angular/material/icon';
26-
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
26+
import {MatTabsModule} from '@angular/material/tabs';
2727
import {MatToolbarModule} from '@angular/material/toolbar';
2828

2929
let max = 5;

‎src/dev-app/mdc-slider/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ ng_module(
99
"mdc-slider-demo.html",
1010
],
1111
deps = [
12-
"//src/material-experimental/mdc-tabs",
1312
"//src/material/slider",
13+
"//src/material/tabs",
1414
"@npm//@angular/forms",
1515
],
1616
)

‎src/dev-app/mdc-slider/mdc-slider-demo.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {Component} from '@angular/core';
1010
import {FormsModule} from '@angular/forms';
1111
import {MatSliderModule} from '@angular/material/slider';
12-
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
12+
import {MatTabsModule} from '@angular/material/tabs';
1313

1414
@Component({
1515
selector: 'mdc-slider-demo',

‎src/dev-app/mdc-tabs/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ ng_module(
1010
":mdc_tabs_demo_scss",
1111
],
1212
deps = [
13-
"//src/material-experimental/mdc-tabs",
1413
"//src/material/button-toggle",
14+
"//src/material/tabs",
1515
],
1616
)
1717

‎src/dev-app/mdc-tabs/mdc-tabs-demo.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
10+
import {MatTabsModule} from '@angular/material/tabs';
1111
import {CommonModule} from '@angular/common';
1212
import {MatButtonToggleModule} from '@angular/material/button-toggle';
1313

‎src/dev-app/slider/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ ng_module(
88
assets = ["slider-demo.html"],
99
deps = [
1010
"//src/material/legacy-slider",
11-
"//src/material/tabs",
11+
"//src/material/legacy-tabs",
1212
"@npm//@angular/forms",
1313
],
1414
)

‎src/dev-app/slider/slider-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
import {Component} from '@angular/core';
1010
import {FormsModule} from '@angular/forms';
1111
import {MatLegacySliderModule} from '@angular/material/legacy-slider';
12-
import {MatTabsModule} from '@angular/material/tabs';
12+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
1313

1414
@Component({
1515
selector: 'slider-demo',
1616
templateUrl: 'slider-demo.html',
1717
standalone: true,
18-
imports: [FormsModule, MatLegacySliderModule, MatTabsModule],
18+
imports: [FormsModule, MatLegacySliderModule, MatLegacyTabsModule],
1919
})
2020
export class SliderDemo {
2121
demo: number;

‎src/dev-app/tabs/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ ng_module(
99
deps = [
1010
"//src/components-examples/material/tabs",
1111
"//src/dev-app/example",
12-
"//src/material/tabs",
12+
"//src/material/legacy-tabs",
1313
],
1414
)

‎src/dev-app/tabs/tabs-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {MatTabsModule} from '@angular/material/tabs';
10+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
1111
import {TabGroupExamplesModule} from '@angular/components-examples/material/tabs';
1212

1313
@Component({
1414
selector: 'tabs-demo',
1515
templateUrl: 'tabs-demo.html',
1616
standalone: true,
17-
imports: [TabGroupExamplesModule, MatTabsModule],
17+
imports: [TabGroupExamplesModule, MatLegacyTabsModule],
1818
})
1919
export class TabsDemo {}

‎src/e2e-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ ng_module(
4444
"//src/components-examples/private",
4545
"//src/material-experimental/mdc-progress-spinner",
4646
"//src/material-experimental/mdc-table",
47-
"//src/material-experimental/mdc-tabs",
4847
"//src/material/button",
4948
"//src/material/card",
5049
"//src/material/checkbox",
@@ -64,6 +63,7 @@ ng_module(
6463
"//src/material/legacy-progress-bar",
6564
"//src/material/legacy-radio",
6665
"//src/material/legacy-slide-toggle",
66+
"//src/material/legacy-tabs",
6767
"//src/material/menu",
6868
"//src/material/progress-bar",
6969
"//src/material/progress-spinner",

0 commit comments

Comments
 (0)