docs(material/checkbox): switch docs and examples to MDC (#25547)

Switches the checkbox live examples and docs to use MDC.

Author: crisbeto

.github/CODEOWNERS

@@ -194,7 +194,7 @@
 /src/dev-app/live-announcer/**                              @jelbourn
 /src/dev-app/mdc-autocomplete/**                            @crisbeto
 /src/dev-app/mdc-button/**                                  @andrewseguin
-/src/dev-app/mdc-checkbox/**                                @mmalerba
+/src/dev-app/legacy-checkbox/**                             @mmalerba
 /src/dev-app/mdc-chips/**                                   @mmalerba
 /src/dev-app/mdc-dialog/**                                  @devversion
 /src/dev-app/mdc-list/**                                    @mmalerba

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

@@ -15,10 +15,10 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-card",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-checkbox/testing",
-        "//src/material/legacy-radio",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//src/material/checkbox/testing",
+        "//src/material/radio",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -42,8 +42,8 @@ ng_test_library(
         ":checkbox",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-checkbox/testing",
+        "//src/material/checkbox",
+        "//src/material/checkbox/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
     ],

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 {MatLegacyCheckboxHarness} from '@angular/material/legacy-checkbox/testing';
+import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {CheckboxHarnessExample} from './checkbox-harness-example';
 
 describe('CheckboxHarnessExample', () => {
@@ -12,7 +12,7 @@ describe('CheckboxHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyCheckboxModule, ReactiveFormsModule],
+      imports: [MatCheckboxModule, ReactiveFormsModule],
       declarations: [CheckboxHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(CheckboxHarnessExample);
@@ -21,37 +21,31 @@ describe('CheckboxHarnessExample', () => {
   });
 
   it('should load checkbox with name', async () => {
-    const checkboxes = await loader.getAllHarnesses(
-      MatLegacyCheckboxHarness.with({name: 'first-name'}),
-    );
+    const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.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(
-      MatLegacyCheckboxHarness,
-    );
+    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
     expect(await checkedCheckbox.isChecked()).toBe(true);
     expect(await uncheckedCheckbox.isChecked()).toBe(false);
   });
 
   it('should get name', async () => {
-    const checkbox = await loader.getHarness(MatLegacyCheckboxHarness.with({label: 'First'}));
+    const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
     expect(await checkbox.getName()).toBe('first-name');
   });
 
   it('should get label text', async () => {
-    const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatLegacyCheckboxHarness);
+    const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
     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(
-      MatLegacyCheckboxHarness,
-    );
+    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
     await checkedCheckbox.toggle();
     await uncheckedCheckbox.toggle();
     expect(await checkedCheckbox.isChecked()).toBe(false);

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

@@ -1,9 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
 import {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -26,9 +26,9 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyCardModule,
-    MatLegacyCheckboxModule,
-    MatLegacyRadioModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatRadioModule,
     FormsModule,
     ReactiveFormsModule,
   ],

src/dev-app/BUILD.bazel

@@ -48,6 +48,7 @@ ng_module(
         "//src/dev-app/input-modality",
         "//src/dev-app/layout",
         "//src/dev-app/legacy-card",
+        "//src/dev-app/legacy-checkbox",
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-paginator",
         "//src/dev-app/legacy-select",
@@ -58,7 +59,6 @@ ng_module(
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-autocomplete",
         "//src/dev-app/mdc-button",
-        "//src/dev-app/mdc-checkbox",
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-dialog",
         "//src/dev-app/mdc-list",

src/dev-app/checkbox/BUILD.bazel

@@ -11,12 +11,12 @@ ng_module(
         ":checkbox_demo_scss",
     ],
     deps = [
-        "//src/components-examples/material/checkbox",
+        "//src/material/checkbox",
         "//src/material/core",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "@npm//@angular/forms",
     ],
 )
 

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

@@ -1,3 +1,22 @@
+<h1> Themed Checkboxes </h1>
+
+<div>
+  <mat-checkbox>Default</mat-checkbox>
+</div>
+
+<div>
+  <mat-checkbox color="primary">Primary</mat-checkbox>
+</div>
+
+<div>
+  <mat-checkbox color="accent">Accent</mat-checkbox>
+</div>
+
+<div>
+  <mat-checkbox color="warn">Warn</mat-checkbox>
+</div>
+
+
 <h1>mat-checkbox: Basic Example</h1>
 <form>
   <mat-checkbox [(ngModel)]="isChecked"
@@ -245,7 +264,3 @@ <h5>No animations</h5>
     </mat-checkbox>
   </div>
 </div>
-
-<h1>Overview example</h1>
-<checkbox-overview-example></checkbox-overview-example>
-

src/dev-app/checkbox/checkbox-demo.ts

@@ -7,18 +7,13 @@
  */
 
 import {Component, Directive} from '@angular/core';
-import {
-  MatLegacyCheckboxModule,
-  MAT_CHECKBOX_DEFAULT_OPTIONS,
-} from '@angular/material/legacy-checkbox';
+import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {CommonModule} from '@angular/common';
-import {CheckboxExamplesModule} from '@angular/components-examples/material/checkbox';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
 
 export interface Task {
   name: string;
@@ -56,9 +51,9 @@ export class AnimationsNoop {}
     }
   `,
   ],
-  templateUrl: './nested-checklist.html',
+  templateUrl: 'nested-checklist.html',
   standalone: true,
-  imports: [CommonModule, MatLegacyCheckboxModule, FormsModule],
+  imports: [CommonModule, MatCheckboxModule, FormsModule],
 })
 export class MatCheckboxDemoNestedChecklist {
   tasks: Task[] = [
@@ -105,18 +100,16 @@ export class MatCheckboxDemoNestedChecklist {
 }
 
 @Component({
-  selector: 'mat-checkbox-demo',
+  selector: 'checkbox-demo',
   templateUrl: 'checkbox-demo.html',
   styleUrls: ['checkbox-demo.css'],
   standalone: true,
   imports: [
-    CheckboxExamplesModule,
     CommonModule,
     FormsModule,
-    MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatSelectModule,
     MatPseudoCheckboxModule,
     ReactiveFormsModule,
     MatCheckboxDemoNestedChecklist,
@@ -129,7 +122,7 @@ export class CheckboxDemo {
   isIndeterminate: boolean = false;
   isChecked: boolean = false;
   isDisabled: boolean = false;
-  labelPosition: 'after' | 'before' = 'after';
+  labelPosition: 'before' | 'after' = 'after';
   useAlternativeColor: boolean = false;
 
   demoRequired = false;

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

@@ -105,7 +105,6 @@ export class DevAppLayout {
     {name: 'YouTube Player', route: '/youtube-player'},
     {name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
     {name: 'MDC Button', route: '/mdc-button'},
-    {name: 'MDC Checkbox', route: '/mdc-checkbox'},
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Dialog', route: '/mdc-dialog'},
     {name: 'MDC List', route: '/mdc-list'},
@@ -117,6 +116,7 @@ export class DevAppLayout {
     {name: 'MDC Slider', route: '/mdc-slider'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'Legacy Card', route: '/legacy-card'},
+    {name: 'Legacy Checkbox', route: '/legacy-checkbox'},
     {name: 'Legacy Input', route: '/legacy-input'},
     {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'Legacy Select', route: '/legacy-select'},

src/dev-app/legacy-checkbox/BUILD.bazel

@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-checkbox",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "legacy-checkbox-demo.html",
+        "legacy-nested-checklist.html",
+        ":legacy_checkbox_demo_scss",
+    ],
+    deps = [
+        "//src/material/core",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
+        "//src/material/legacy-select",
+    ],
+)
+
+sass_binary(
+    name = "legacy_checkbox_demo_scss",
+    src = "legacy-checkbox-demo.scss",
+)

src/dev-app/mdc-checkbox/mdc-checkbox-demo.html renamed to src/dev-app/legacy-checkbox/legacy-checkbox-demo.html

@@ -1,22 +1,3 @@
-<h1> Themed Checkboxes </h1>
-
-<div>
-  <mat-checkbox>Default</mat-checkbox>
-</div>
-
-<div>
-  <mat-checkbox color="primary">Primary</mat-checkbox>
-</div>
-
-<div>
-  <mat-checkbox color="accent">Accent</mat-checkbox>
-</div>
-
-<div>
-  <mat-checkbox color="warn">Warn</mat-checkbox>
-</div>
-
-
 <h1>mat-checkbox: Basic Example</h1>
 <form>
   <mat-checkbox [(ngModel)]="isChecked"
@@ -74,7 +55,7 @@ <h1>Pseudo checkboxes</h1>
 <mat-pseudo-checkbox state="indeterminate" [disabled]="true"></mat-pseudo-checkbox>
 
 <h1>Nested Checklist</h1>
-<mat-checkbox-demo-nested-checklist></mat-checkbox-demo-nested-checklist>
+<mat-legacy-checkbox-demo-nested-checklist></mat-legacy-checkbox-demo-nested-checklist>
 
 <div style="padding: 10px; border: 1px solid black">
   <h4>Configuration</h4>