feat(material/chips): switch implementation to use MDC (#25400)

Switches the chips module to use MDC by default. BREAKING CHANGE: * `mat-chip-list` has been split up into three different components: `mat-chip-set`, `mat-chip-listbox` and `mat-chip-grid` to better represent the different interaction patterns.
angular · Aug 5, 2022 · d496ebe · d496ebe
1 parent fdb30ad
commit d496ebe
Show file tree

Hide file tree

Showing 135 changed files with 3,554 additions and 2,946 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -7,7 +7,7 @@
 /src/material/button/**                            @andrewseguin
 /src/material/legacy-card/**                              @andrewseguin
 /src/material/legacy-checkbox/**                          @andrewseguin @devversion
-/src/material/chips/**                             @andrewseguin
+/src/material/legacy-chips/**                      @andrewseguin
 /src/material/datepicker/**                        @mmalerba @crisbeto @zarend
 /src/material/legacy-dialog/**                            @andrewseguin @crisbeto
 /src/material/divider/**                           @andrewseguin @crisbeto
@@ -114,7 +114,7 @@
 /src/material-experimental/mdc-button/**               @andrewseguin
 /src/material/card/**                                  @mmalerba
 /src/material/checkbox/**             @mmalerba
-/src/material-experimental/mdc-chips/**                @mmalerba
+/src/material/chips/**                                 @mmalerba @crisbeto
 /src/material-experimental/mdc-core/**                 @crisbeto
 /src/material/dialog/**               @devversion
 /src/material/form-field/**                            @devversion @mmalerba

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -43,7 +43,6 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-button',
     'material/card',
     'material/checkbox',
-    'material-experimental/mdc-chips',
     'material-experimental/mdc-core',
     'material/dialog',
     'material/form-field',
@@ -76,6 +75,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-checkbox',
     'material/legacy-checkbox',
     'material/chips',
+    'material/legacy-chips',
     'material/core',
     'material/legacy-core',
     'material/datepicker',

diff --git a/integration/size-test/material-experimental/mdc-chips/BUILD.bazel b/integration/size-test/material-experimental/mdc-chips/BUILD.bazel
@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "basic",
     file = "basic.ts",
-    deps = ["//src/material-experimental/mdc-chips"],
+    deps = ["//src/material/chips"],
 )
diff --git a/integration/size-test/material-experimental/mdc-chips/basic.ts b/integration/size-test/material-experimental/mdc-chips/basic.ts
@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+import {MatChipsModule} from '@angular/material/chips';
 
 /**
  * Basic component using `MatChipSet` and `MatChip`. Other supported parts of the

diff --git a/integration/size-test/material/chips/basic.ts b/integration/size-test/material/chips/basic.ts
@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatChipsModule} from '@angular/material/chips';
+import {MatLegacyChipsModule} from '@angular/material/legacy-chips';
 
 /**
  * Basic component using `MatChipList` and `MatChip`. Other supported parts of the
@@ -15,7 +15,7 @@ import {MatChipsModule} from '@angular/material/chips';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatChipsModule],
+  imports: [MatLegacyChipsModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

diff --git a/src/components-examples/material/chips/BUILD.bazel b/src/components-examples/material/chips/BUILD.bazel
@@ -17,10 +17,10 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
-        "//src/material/chips",
-        "//src/material/chips/testing",
         "//src/material/icon",
         "//src/material/legacy-autocomplete",
+        "//src/material/legacy-chips",
+        "//src/material/legacy-chips/testing",
         "//src/material/legacy-form-field",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
@@ -45,8 +45,8 @@ ng_test_library(
         ":chips",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/chips",
-        "//src/material/chips/testing",
+        "//src/material/legacy-chips",
+        "//src/material/legacy-chips/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
@@ -2,7 +2,7 @@ import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {MatAutocompleteSelectedEvent} from '@angular/material/legacy-autocomplete';
-import {MatChipInputEvent} from '@angular/material/chips';
+import {MatLegacyChipInputEvent} from '@angular/material/legacy-chips';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -30,7 +30,7 @@ export class ChipsAutocompleteExample {
     );
   }
 
-  add(event: MatChipInputEvent): void {
+  add(event: MatLegacyChipInputEvent): void {
     const value = (event.value || '').trim();
 
     // Add our fruit

diff --git a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatChipInputEvent} from '@angular/material/chips';
+import {MatLegacyChipInputEvent} from '@angular/material/legacy-chips';
 
 /**
  * @title Chips with form control
@@ -14,7 +14,7 @@ export class ChipsFormControlExample {
   keywords = new Set(['angular', 'how-to', 'tutorial']);
   formControl = new FormControl(['angular']);
 
-  addKeywordFromInput(event: MatChipInputEvent) {
+  addKeywordFromInput(event: MatLegacyChipInputEvent) {
     if (event.value) {
       this.keywords.add(event.value);
       event.chipInput!.clear();

diff --git a/src/components-examples/material/chips/chips-harness/chips-harness-example.spec.ts b/src/components-examples/material/chips/chips-harness/chips-harness-example.spec.ts
@@ -1,18 +1,21 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatChipHarness, MatChipListboxHarness} from '@angular/material/chips/testing';
+import {
+  MatLegacyChipHarness,
+  MatLegacyChipListboxHarness,
+} from '@angular/material/legacy-chips/testing';
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {ChipsHarnessExample} from './chips-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MatChipsModule} from '@angular/material/chips';
+import {MatLegacyChipsModule} from '@angular/material/legacy-chips';
 
 describe('ChipsHarnessExample', () => {
   let fixture: ComponentFixture<ChipsHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatChipsModule, NoopAnimationsModule],
+      imports: [MatLegacyChipsModule, NoopAnimationsModule],
       declarations: [ChipsHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(ChipsHarnessExample);
@@ -21,7 +24,7 @@ describe('ChipsHarnessExample', () => {
   });
 
   it('should get whether a chip list is disabled', async () => {
-    const chipList = await loader.getHarness(MatChipListboxHarness);
+    const chipList = await loader.getHarness(MatLegacyChipListboxHarness);
 
     expect(await chipList.isDisabled()).toBeFalse();
 
@@ -32,13 +35,13 @@ describe('ChipsHarnessExample', () => {
   });
 
   it('should get the orientation of a chip list', async () => {
-    const chipList = await loader.getHarness(MatChipListboxHarness);
+    const chipList = await loader.getHarness(MatLegacyChipListboxHarness);
 
     expect(await chipList.getOrientation()).toEqual('horizontal');
   });
 
   it('should be able to get the selected chips in a list', async () => {
-    const chipList = await loader.getHarness(MatChipListboxHarness);
+    const chipList = await loader.getHarness(MatLegacyChipListboxHarness);
     const chips = await chipList.getChips();
 
     expect((await chipList.getChips({selected: true})).length).toBe(0);
@@ -49,7 +52,7 @@ describe('ChipsHarnessExample', () => {
   });
 
   it('should be able to trigger chip removal', async () => {
-    const chip = await loader.getHarness(MatChipHarness);
+    const chip = await loader.getHarness(MatLegacyChipHarness);
     expect(fixture.componentInstance.remove).not.toHaveBeenCalled();
     await chip.remove();
     expect(fixture.componentInstance.remove).toHaveBeenCalled();

diff --git a/src/components-examples/material/chips/chips-input/chips-input-example.ts b/src/components-examples/material/chips/chips-input/chips-input-example.ts
@@ -1,6 +1,6 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component} from '@angular/core';
-import {MatChipInputEvent} from '@angular/material/chips';
+import {MatLegacyChipInputEvent} from '@angular/material/legacy-chips';
 
 export interface Fruit {
   name: string;
@@ -19,7 +19,7 @@ export class ChipsInputExample {
   readonly separatorKeysCodes = [ENTER, COMMA] as const;
   fruits: Fruit[] = [{name: 'Lemon'}, {name: 'Lime'}, {name: 'Apple'}];
 
-  add(event: MatChipInputEvent): void {
+  add(event: MatLegacyChipInputEvent): void {
     const value = (event.value || '').trim();
 
     // Add our fruit

diff --git a/src/components-examples/material/chips/index.ts b/src/components-examples/material/chips/index.ts
@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
-import {MatChipsModule} from '@angular/material/chips';
+import {MatLegacyChipsModule} from '@angular/material/legacy-chips';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {ChipsAutocompleteExample} from './chips-autocomplete/chips-autocomplete-example';
@@ -44,7 +44,7 @@ const EXAMPLES = [
     DragDropModule,
     MatLegacyAutocompleteModule,
     MatButtonModule,
-    MatChipsModule,
+    MatLegacyChipsModule,
     MatIconModule,
     MatLegacyFormFieldModule,
     ReactiveFormsModule,

diff --git a/src/dev-app/chips/BUILD.bazel b/src/dev-app/chips/BUILD.bazel
@@ -11,10 +11,10 @@ ng_module(
     ],
     deps = [
         "//src/material/button",
-        "//src/material/chips",
         "//src/material/icon",
         "//src/material/legacy-card",
         "//src/material/legacy-checkbox",
+        "//src/material/legacy-chips",
         "//src/material/legacy-form-field",
         "//src/material/toolbar",
     ],

diff --git a/src/dev-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts
@@ -13,7 +13,7 @@ import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
+import {MatLegacyChipInputEvent, MatLegacyChipsModule} from '@angular/material/legacy-chips';
 import {ThemePalette} from '@angular/material/core';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -39,7 +39,7 @@ export interface DemoColor {
     MatButtonModule,
     MatLegacyCardModule,
     MatLegacyCheckboxModule,
-    MatChipsModule,
+    MatLegacyChipsModule,
     MatLegacyFormFieldModule,
     MatIconModule,
     MatToolbarModule,
@@ -79,7 +79,7 @@ export class ChipsDemo {
     this.message = message;
   }
 
-  add(event: MatChipInputEvent): void {
+  add(event: MatLegacyChipInputEvent): void {
     const value = (event.value || '').trim();
 
     // Add our person

diff --git a/src/dev-app/mdc-chips/BUILD.bazel b/src/dev-app/mdc-chips/BUILD.bazel
@@ -11,9 +11,9 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-chips",
         "//src/material/card",
         "//src/material/checkbox",
+        "//src/material/chips",
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/icon",

diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.ts b/src/dev-app/mdc-chips/mdc-chips-demo.ts
@@ -10,11 +10,7 @@ import {Component} from '@angular/core';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {CommonModule} from '@angular/common';
 import {ThemePalette} from '@angular/material/core';
-import {
-  MatChipInputEvent,
-  MatChipEditedEvent,
-  MatChipsModule,
-} from '@angular/material-experimental/mdc-chips';
+import {MatChipInputEvent, MatChipEditedEvent, MatChipsModule} from '@angular/material/chips';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatCardModule} from '@angular/material/card';

diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -43,7 +43,6 @@ ng_module(
         "//src/components-examples/material-experimental/mdc-card",
         "//src/components-examples/private",
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-chips",
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
@@ -54,6 +53,7 @@ ng_module(
         "//src/material/button",
         "//src/material/card",
         "//src/material/checkbox",
+        "//src/material/chips",
         "//src/material/core",
         "//src/material/dialog",
         "//src/material/grid-list",

diff --git a/src/e2e-app/mdc-chips/mdc-chips-e2e-module.ts b/src/e2e-app/mdc-chips/mdc-chips-e2e-module.ts
@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+import {MatChipsModule} from '@angular/material/chips';
 import {MdcChipsE2e} from './mdc-chips-e2e';
 
 @NgModule({

diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
@@ -23,8 +23,6 @@
   mdc-fab-density, mdc-fab-theme;
 @forward './mdc-button/icon-button-theme' as mdc-icon-button-* show mdc-icon-button-color,
   mdc-icon-button-typography, mdc-icon-button-density, mdc-icon-button-theme;
-@forward './mdc-chips/chips-theme' as mdc-chips-* show mdc-chips-color, mdc-chips-typography,
-  mdc-chips-density, mdc-chips-theme;
 @forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography,
   mdc-list-density, mdc-list-theme;
 @forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography,

diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
@@ -2,8 +2,6 @@ entryPoints = [
     "column-resize",
     "mdc-button",
     "mdc-button/testing",
-    "mdc-chips",
-    "mdc-chips/testing",
     "mdc-core",
     "mdc-list",
     "mdc-list/testing",