Skip to content

Commit 532454b

Browse files
crisbetocrisbeto
authored
feat(material/autocomplete): switch implementation to use MDC (angular#25386)
Switches `mat-autocomplete` to use MDC by default. BREAKING CHANGE: * DOM and CSS classes for `mat-autocomplete` have changes. * TypeScript API is largely the same but may have minor differences.
1 parent 90b9208 commit 532454b

File tree

89 files changed

+1252
-1079
lines changed

Some content is hidden

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

89 files changed

+1252
-1079
lines changed

‎.github/CODEOWNERS

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Angular Material components
22
/src/material/* @andrewseguin
3-
/src/material/autocomplete/** @crisbeto
3+
/src/material/legacy-autocomplete/** @crisbeto
44
/src/material/badge/** @jelbourn
55
/src/material/bottom-sheet/** @jelbourn @crisbeto
66
/src/material/button-toggle/** @andrewseguin
@@ -110,7 +110,7 @@
110110
# Material experimental package
111111
/src/material-experimental/* @andrewseguin
112112
/src/material-experimental/column-resize/** @andrewseguin
113-
/src/material-experimental/mdc-autocomplete/** @crisbeto
113+
/src/material/autocomplete/** @crisbeto
114114
/src/material-experimental/mdc-button/** @andrewseguin
115115
/src/material/card/** @mmalerba
116116
/src/material-experimental/mdc-checkbox/** @mmalerba

‎.ng-dev/commit-message.mts

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export const commitMessage: CommitMessageConfig = {
4040
'cdk/tree',
4141
'google-maps',
4242
'material-experimental/column-resize',
43-
'material-experimental/mdc-autocomplete',
4443
'material-experimental/mdc-button',
4544
'material/card',
4645
'material-experimental/mdc-checkbox',
@@ -68,6 +67,7 @@ export const commitMessage: CommitMessageConfig = {
6867
'material-date-fns-adapter',
6968
'material-luxon-adapter',
7069
'material/autocomplete',
70+
'material/legacy-autocomplete',
7171
'material/badge',
7272
'material/bottom-sheet',
7373
'material/button',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
33
size_test(
44
name = "without-optgroup",
55
file = "without-optgroup.ts",
6-
deps = ["//src/material/autocomplete"],
6+
deps = ["//src/material/legacy-autocomplete"],
77
)

‎integration/size-test/material/autocomplete/without-optgroup.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, NgModule} from '@angular/core';
2-
import {MatAutocompleteModule} from '@angular/material/autocomplete';
2+
import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
33

44
/**
55
* Basic component using `MatAutocomplete` and `MatOption`. Other supported parts of the
@@ -16,7 +16,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
1616
export class TestComponent {}
1717

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

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ ng_module(
1616
"//src/cdk/overlay",
1717
"//src/cdk/testing",
1818
"//src/cdk/testing/testbed",
19-
"//src/material/autocomplete",
20-
"//src/material/autocomplete/testing",
19+
"//src/material/legacy-autocomplete",
20+
"//src/material/legacy-autocomplete/testing",
2121
"//src/material/legacy-form-field",
2222
"//src/material/legacy-input",
2323
"//src/material/slide-toggle",
@@ -44,8 +44,8 @@ ng_test_library(
4444
":autocomplete",
4545
"//src/cdk/testing",
4646
"//src/cdk/testing/testbed",
47-
"//src/material/autocomplete",
48-
"//src/material/autocomplete/testing",
47+
"//src/material/legacy-autocomplete",
48+
"//src/material/legacy-autocomplete/testing",
4949
"@npm//@angular/platform-browser-dynamic",
5050
],
5151
)

‎src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.spec.ts

+13-9
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 {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
3+
import {MatLegacyAutocompleteHarness} from '@angular/material/legacy-autocomplete/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatAutocompleteModule} from '@angular/material/autocomplete';
5+
import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
66
import {AutocompleteHarnessExample} from './autocomplete-harness-example';
77

88
describe('AutocompleteHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('AutocompleteHarnessExample', () => {
1111

1212
beforeEach(async () => {
1313
await TestBed.configureTestingModule({
14-
imports: [MatAutocompleteModule],
14+
imports: [MatLegacyAutocompleteModule],
1515
declarations: [AutocompleteHarnessExample],
1616
}).compileComponents();
1717
fixture = TestBed.createComponent(AutocompleteHarnessExample);
@@ -20,20 +20,24 @@ describe('AutocompleteHarnessExample', () => {
2020
});
2121

2222
it('should load all autocomplete harnesses', async () => {
23-
const autocompletes = await loader.getAllHarnesses(MatAutocompleteHarness);
23+
const autocompletes = await loader.getAllHarnesses(MatLegacyAutocompleteHarness);
2424
expect(autocompletes.length).toBe(2);
2525
});
2626

2727
it('should get disabled state', async () => {
28-
const enabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
29-
const disabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#disabled'}));
28+
const enabled = await loader.getHarness(
29+
MatLegacyAutocompleteHarness.with({selector: '#plain'}),
30+
);
31+
const disabled = await loader.getHarness(
32+
MatLegacyAutocompleteHarness.with({selector: '#disabled'}),
33+
);
3034

3135
expect(await enabled.isDisabled()).toBe(false);
3236
expect(await disabled.isDisabled()).toBe(true);
3337
});
3438

3539
it('should focus and blur an input', async () => {
36-
const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
40+
const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
3741
expect(await input.isFocused()).toBe(false);
3842
await input.focus();
3943
expect(await input.isFocused()).toBe(true);
@@ -42,13 +46,13 @@ describe('AutocompleteHarnessExample', () => {
4246
});
4347

4448
it('should be able to type in an input', async () => {
45-
const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
49+
const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
4650
await input.enterText('Hello there');
4751
expect(await input.getValue()).toBe('Hello there');
4852
});
4953

5054
it('should be able to get filtered options', async () => {
51-
const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
55+
const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
5256
await input.focus();
5357
const options = await input.getOptions({text: /New/});
5458

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {MatAutocompleteModule} from '@angular/material/autocomplete';
4+
import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
55
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
66
import {MatLegacyInputModule} from '@angular/material/legacy-input';
77
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -39,7 +39,7 @@ const EXAMPLES = [
3939
@NgModule({
4040
imports: [
4141
CommonModule,
42-
MatAutocompleteModule,
42+
MatLegacyAutocompleteModule,
4343
MatLegacyFormFieldModule,
4444
MatLegacyInputModule,
4545
MatSlideToggleModule,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ ng_module(
1616
"//src/cdk/drag-drop",
1717
"//src/cdk/testing",
1818
"//src/cdk/testing/testbed",
19-
"//src/material/autocomplete",
2019
"//src/material/button",
2120
"//src/material/chips",
2221
"//src/material/chips/testing",
2322
"//src/material/icon",
23+
"//src/material/legacy-autocomplete",
2424
"//src/material/legacy-form-field",
2525
"@npm//@angular/forms",
2626
"@npm//@angular/platform-browser",

‎src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {COMMA, ENTER} from '@angular/cdk/keycodes';
22
import {Component, ElementRef, ViewChild} from '@angular/core';
33
import {FormControl} from '@angular/forms';
4-
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
4+
import {MatAutocompleteSelectedEvent} from '@angular/material/legacy-autocomplete';
55
import {MatChipInputEvent} from '@angular/material/chips';
66
import {Observable} from 'rxjs';
77
import {map, startWith} from 'rxjs/operators';

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
22
import {CommonModule} from '@angular/common';
33
import {NgModule} from '@angular/core';
44
import {ReactiveFormsModule} from '@angular/forms';
5-
import {MatAutocompleteModule} from '@angular/material/autocomplete';
5+
import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
66
import {MatChipsModule} from '@angular/material/chips';
77
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
88
import {MatIconModule} from '@angular/material/icon';
@@ -42,7 +42,7 @@ const EXAMPLES = [
4242
imports: [
4343
CommonModule,
4444
DragDropModule,
45-
MatAutocompleteModule,
45+
MatLegacyAutocompleteModule,
4646
MatButtonModule,
4747
MatChipsModule,
4848
MatIconModule,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ ng_module(
1010
":autocomplete_demo_scss",
1111
],
1212
deps = [
13-
"//src/material/autocomplete",
1413
"//src/material/button",
14+
"//src/material/legacy-autocomplete",
1515
"//src/material/legacy-card",
1616
"//src/material/legacy-form-field",
1717
"//src/material/legacy-input",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {Component, ViewChild} from '@angular/core';
1010
import {CommonModule} from '@angular/common';
1111
import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
12-
import {MatAutocompleteModule} from '@angular/material/autocomplete';
12+
import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
1313
import {MatButtonModule} from '@angular/material/button';
1414
import {MatLegacyCardModule} from '@angular/material/legacy-card';
1515
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
@@ -35,7 +35,7 @@ export interface StateGroup {
3535
imports: [
3636
CommonModule,
3737
FormsModule,
38-
MatAutocompleteModule,
38+
MatLegacyAutocompleteModule,
3939
MatButtonModule,
4040
MatLegacyCardModule,
4141
MatLegacyFormFieldModule,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ ng_module(
1010
":mdc_autocomplete_demo_scss",
1111
],
1212
deps = [
13-
"//src/material-experimental/mdc-autocomplete",
1413
"//src/material-experimental/mdc-button",
14+
"//src/material/autocomplete",
1515
"//src/material/card",
1616
"//src/material/form-field",
1717
"//src/material/input",

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {Component, ViewChild} from '@angular/core';
1010
import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms';
1111
import {CommonModule} from '@angular/common';
12-
import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
12+
import {MatAutocompleteModule} from '@angular/material/autocomplete';
1313
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
1414
import {MatCardModule} from '@angular/material/card';
1515
import {MatInputModule} from '@angular/material/input';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/components-examples/material-experimental/mdc-form-field",
14-
"//src/material-experimental/mdc-autocomplete",
1514
"//src/material-experimental/mdc-button",
1615
"//src/material-experimental/mdc-checkbox",
1716
"//src/material-experimental/mdc-tabs",
17+
"//src/material/autocomplete",
1818
"//src/material/button-toggle",
1919
"//src/material/card",
2020
"//src/material/form-field",

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
1717
import {CommonModule} from '@angular/common';
1818
import {MdcFormFieldExamplesModule} from '@angular/components-examples/material-experimental/mdc-form-field';
1919
import {MatInputModule} from '@angular/material/input';
20-
import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
20+
import {MatAutocompleteModule} from '@angular/material/autocomplete';
2121
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
2222
import {MatButtonToggleModule} from '@angular/material/button-toggle';
2323
import {MatCardModule} from '@angular/material/card';

‎src/material-experimental/_index.scss

-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
// MDC-related themes
1818
@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
1919
mdc-core-density, mdc-core-typography;
20-
@forward './mdc-autocomplete/autocomplete-theme' as mdc-autocomplete-* show mdc-autocomplete-color,
21-
mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme;
2220
@forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography,
2321
mdc-button-density, mdc-button-theme;
2422
@forward './mdc-button/fab-theme' as mdc-fab-* show mdc-fab-color, mdc-fab-typography,

‎src/material-experimental/config.bzl

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
entryPoints = [
22
"column-resize",
3-
"mdc-autocomplete",
4-
"mdc-autocomplete/testing",
53
"mdc-button",
64
"mdc-button/testing",
75
"mdc-checkbox",

‎src/material-experimental/mdc-autocomplete/BUILD.bazel

-75
This file was deleted.

0 commit comments

Comments
 (0)