feat(material/checkbox): switch implementation to use MDC (#25369)

* feat(material/checkbox): switch implementation to MDC * feat(material/checkbox): switch implementation to MDC
angular · Aug 4, 2022 · 9ac264f · 9ac264f
1 parent 532454b
commit 9ac264f
Show file tree

Hide file tree

Showing 166 changed files with 2,504 additions and 2,312 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -6,7 +6,7 @@
 /src/material/button-toggle/**                     @andrewseguin
 /src/material/button/**                            @andrewseguin
 /src/material/legacy-card/**                              @andrewseguin
-/src/material/checkbox/**                          @andrewseguin @devversion
+/src/material/legacy-checkbox/**                          @andrewseguin @devversion
 /src/material/chips/**                             @andrewseguin
 /src/material/datepicker/**                        @mmalerba @crisbeto @zarend
 /src/material/dialog/**                            @andrewseguin @crisbeto
@@ -113,7 +113,7 @@
 /src/material/autocomplete/**                          @crisbeto
 /src/material-experimental/mdc-button/**               @andrewseguin
 /src/material/card/**                                  @mmalerba
-/src/material-experimental/mdc-checkbox/**             @mmalerba
+/src/material/checkbox/**             @mmalerba
 /src/material-experimental/mdc-chips/**                @mmalerba
 /src/material-experimental/mdc-core/**                 @crisbeto
 /src/material-experimental/mdc-dialog/**               @devversion
@@ -321,7 +321,7 @@
 /tools/public_api_guard/material/button-toggle**   @andrewseguin
 /tools/public_api_guard/material/button**          @andrewseguin
 /tools/public_api_guard/material/legacy-card**     @andrewseguin
-/tools/public_api_guard/material/checkbox**        @andrewseguin @devversion
+/tools/public_api_guard/material/legacy-checkbox** @andrewseguin @devversion
 /tools/public_api_guard/material/chips**           @andrewseguin
 /tools/public_api_guard/material/chips/testing**   @andrewseguin
 /tools/public_api_guard/material/core**            @andrewseguin

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -42,7 +42,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/column-resize',
     'material-experimental/mdc-button',
     'material/card',
-    'material-experimental/mdc-checkbox',
+    'material/checkbox',
     'material-experimental/mdc-chips',
     'material-experimental/mdc-core',
     'material-experimental/mdc-dialog',
@@ -73,7 +73,8 @@ export const commitMessage: CommitMessageConfig = {
     'material/button',
     'material/button-toggle',
     'material/legacy-card',
-    'material/checkbox',
+    'material/legacy-checkbox',
+    'material/legacy-checkbox',
     'material/chips',
     'material/core',
     'material/legacy-core',

diff --git a/goldens/tsec-exemption.json b/goldens/tsec-exemption.json
@@ -3,7 +3,7 @@
   "ban-element-innerhtml-assignments": ["../src/material/icon/icon-registry.ts"],
   "ban-element-setattribute": [
     "../src/cdk/a11y/aria-describer/aria-reference.ts",
-    "../src/material-experimental/mdc-checkbox/checkbox.ts",
+    "../src/material/checkbox/checkbox.ts",
     "../src/material-experimental/mdc-list/interactive-list-base.ts",
     "../src/material-experimental/mdc-progress-spinner/progress-spinner.ts",
     "../src/material-experimental/mdc-slide-toggle/slide-toggle.ts",

diff --git a/integration/mdc-migration/golden/src/app/app.module.ts b/integration/mdc-migration/golden/src/app/app.module.ts
@@ -7,7 +7,7 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatCardModule} from '@angular/material-experimental/mdc-card';
-import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';

diff --git a/src/components-examples/cdk-experimental/selection/BUILD.bazel b/src/components-examples/cdk-experimental/selection/BUILD.bazel
@@ -13,7 +13,7 @@ ng_module(
         "//src/cdk-experimental/selection",
         "//src/cdk/collections",
         "//src/cdk/table",
-        "//src/material/checkbox",
+        "//src/material/legacy-checkbox",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/components-examples/cdk-experimental/selection/index.ts b/src/components-examples/cdk-experimental/selection/index.ts
@@ -3,7 +3,7 @@ import {CdkTableModule} from '@angular/cdk/table';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 
 import {CdkSelectionColumnExample} from './cdk-selection-column/cdk-selection-column-example';
 import {CdkSelectionListExample} from './cdk-selection-list/cdk-selection-list-example';
@@ -19,7 +19,7 @@ const EXAMPLES = [CdkSelectionListExample, CdkSelectionColumnExample];
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel
@@ -20,9 +20,9 @@ ng_module(
         "//src/material-experimental/mdc-table",
         "//src/material/button",
         "//src/material/button-toggle",
-        "//src/material/checkbox",
         "//src/material/core",
         "//src/material/icon",
+        "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "//src/material/paginator",
         "//src/material/progress-spinner",

diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {MatRippleModule} from '@angular/material/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatPaginatorModule} from '@angular/material/paginator';
@@ -120,7 +120,7 @@ const EXAMPLES = [
     CommonModule,
     MatButtonModule,
     MatButtonToggleModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,
     MatPaginatorModule,

diff --git a/src/components-examples/material-experimental/popover-edit/BUILD.bazel b/src/components-examples/material-experimental/popover-edit/BUILD.bazel
@@ -12,8 +12,8 @@ ng_module(
     deps = [
         "//src/material-experimental/popover-edit",
         "//src/material/button",
-        "//src/material/checkbox",
         "//src/material/icon",
+        "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "//src/material/list",
         "//src/material/snack-bar",

diff --git a/src/components-examples/material-experimental/popover-edit/index.ts b/src/components-examples/material-experimental/popover-edit/index.ts
@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatListModule} from '@angular/material/list';
@@ -32,7 +32,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatButtonModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,
     MatListModule,

diff --git a/src/components-examples/material-experimental/selection/BUILD.bazel b/src/components-examples/material-experimental/selection/BUILD.bazel
@@ -13,7 +13,7 @@ ng_module(
         "//src/cdk/collections",
         "//src/cdk/table",
         "//src/material-experimental/selection",
-        "//src/material/checkbox",
+        "//src/material/legacy-checkbox",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/components-examples/material-experimental/selection/index.ts b/src/components-examples/material-experimental/selection/index.ts
@@ -3,7 +3,7 @@ import {MatTableModule} from '@angular/material/table';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 
 import {MatSelectionColumnExample} from './mat-selection-column/mat-selection-column-example';
 import {MatSelectionListExample} from './mat-selection-list/mat-selection-list-example';
@@ -19,7 +19,7 @@ const EXAMPLES = [MatSelectionListExample, MatSelectionColumnExample];
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

diff --git a/src/components-examples/material/checkbox/BUILD.bazel b/src/components-examples/material/checkbox/BUILD.bazel
@@ -15,9 +15,9 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/checkbox",
-        "//src/material/checkbox/testing",
         "//src/material/legacy-card",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-checkbox/testing",
         "//src/material/radio",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
@@ -42,8 +42,8 @@ ng_test_library(
         ":checkbox",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/checkbox",
-        "//src/material/checkbox/testing",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-checkbox/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/checkbox/checkbox-harness/checkbox-harness-example.spec.ts b/src/components-examples/material/checkbox/checkbox-harness/checkbox-harness-example.spec.ts
@@ -1,9 +1,9 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
+import {MatLegacyCheckboxHarness} from '@angular/material/legacy-checkbox/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {CheckboxHarnessExample} from './checkbox-harness-example';
 
 describe('CheckboxHarnessExample', () => {
@@ -12,7 +12,7 @@ describe('CheckboxHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatCheckboxModule, ReactiveFormsModule],
+      imports: [MatLegacyCheckboxModule, ReactiveFormsModule],
       declarations: [CheckboxHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(CheckboxHarnessExample);
@@ -21,31 +21,37 @@ describe('CheckboxHarnessExample', () => {
   });
 
   it('should load checkbox with name', async () => {
-    const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'}));
+    const checkboxes = await loader.getAllHarnesses(
+      MatLegacyCheckboxHarness.with({name: 'first-name'}),
+    );
     expect(checkboxes.length).toBe(1);
     expect(await checkboxes[0].getLabelText()).toBe('First');
   });
 
   it('should get checked state', async () => {
-    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
+    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(
+      MatLegacyCheckboxHarness,
+    );
     expect(await checkedCheckbox.isChecked()).toBe(true);
     expect(await uncheckedCheckbox.isChecked()).toBe(false);
   });
 
   it('should get name', async () => {
-    const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
+    const checkbox = await loader.getHarness(MatLegacyCheckboxHarness.with({label: 'First'}));
     expect(await checkbox.getName()).toBe('first-name');
   });
 
   it('should get label text', async () => {
-    const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
+    const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatLegacyCheckboxHarness);
     expect(await firstCheckbox.getLabelText()).toBe('First');
     expect(await secondCheckbox.getLabelText()).toBe('Second');
   });
 
   it('should toggle checkbox', async () => {
     fixture.componentInstance.disabled = false;
-    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
+    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(
+      MatLegacyCheckboxHarness,
+    );
     await checkedCheckbox.toggle();
     await uncheckedCheckbox.toggle();
     expect(await checkedCheckbox.isChecked()).toBe(false);

diff --git a/src/components-examples/material/checkbox/index.ts b/src/components-examples/material/checkbox/index.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
 import {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
@@ -27,7 +27,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatLegacyCardModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
     MatRadioModule,
     FormsModule,
     ReactiveFormsModule,

diff --git a/src/components-examples/material/core/BUILD.bazel b/src/components-examples/material/core/BUILD.bazel
@@ -11,8 +11,8 @@ ng_module(
     ]),
     deps = [
         "//src/material/button",
-        "//src/material/checkbox",
         "//src/material/core",
+        "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "@npm//@angular/forms",
     ],

diff --git a/src/components-examples/material/core/index.ts b/src/components-examples/material/core/index.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatRippleModule} from '@angular/material/core';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {ElevationOverviewExample} from './elevation-overview/elevation-overview-example';
@@ -12,7 +12,13 @@ export {ElevationOverviewExample, RippleOverviewExample};
 const EXAMPLES = [ElevationOverviewExample, RippleOverviewExample];
 
 @NgModule({
-  imports: [MatButtonModule, MatCheckboxModule, MatLegacyInputModule, MatRippleModule, FormsModule],
+  imports: [
+    MatButtonModule,
+    MatLegacyCheckboxModule,
+    MatLegacyInputModule,
+    MatRippleModule,
+    FormsModule,
+  ],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

diff --git a/src/components-examples/material/form-field/BUILD.bazel b/src/components-examples/material/form-field/BUILD.bazel
@@ -16,12 +16,12 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
-        "//src/material/checkbox",
         "//src/material/form-field",
         "//src/material/form-field/testing",
         "//src/material/icon",
         "//src/material/input",
         "//src/material/input/testing",
+        "//src/material/legacy-checkbox",
         "//src/material/radio",
         "//src/material/select",
         "@npm//@angular/forms",

diff --git a/src/components-examples/material/form-field/index.ts b/src/components-examples/material/form-field/index.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
@@ -50,7 +50,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatButtonModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,

diff --git a/src/components-examples/material/select/BUILD.bazel b/src/components-examples/material/select/BUILD.bazel
@@ -15,9 +15,9 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/checkbox",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/legacy-checkbox",
         "//src/material/select",
         "//src/material/select/testing",
         "@npm//@angular/forms",

diff --git a/src/components-examples/material/select/index.ts b/src/components-examples/material/select/index.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example';
@@ -61,7 +61,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     FormsModule,
-    MatCheckboxModule,
+    MatLegacyCheckboxModule,
     MatInputModule,
     MatSelectModule,
     ReactiveFormsModule,

diff --git a/src/components-examples/material/sidenav/BUILD.bazel b/src/components-examples/material/sidenav/BUILD.bazel
@@ -17,8 +17,8 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
-        "//src/material/checkbox",
         "//src/material/icon",
+        "//src/material/legacy-checkbox",
         "//src/material/legacy-select",
         "//src/material/list",
         "//src/material/radio",