From b89d73c45f548a98f456ecb8a8a4f22a868e7365 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 29 Aug 2022 10:09:39 +0200 Subject: [PATCH] docs(material/checkbox): switch docs and examples to MDC Switches the checkbox live examples and docs to use MDC. --- .github/CODEOWNERS | 2 +- .../material/checkbox/BUILD.bazel | 12 +++--- .../checkbox-harness-example.spec.ts | 22 ++++------- .../material/checkbox/index.ts | 12 +++--- src/dev-app/BUILD.bazel | 2 +- src/dev-app/checkbox/BUILD.bazel | 10 ++--- src/dev-app/checkbox/checkbox-demo.html | 23 +++++++++-- src/dev-app/checkbox/checkbox-demo.ts | 29 ++++++-------- src/dev-app/dev-app/dev-app-layout.ts | 2 +- src/dev-app/legacy-checkbox/BUILD.bazel | 25 ++++++++++++ .../legacy-checkbox-demo.html} | 21 +--------- .../legacy-checkbox-demo.scss} | 0 .../legacy-checkbox-demo.ts} | 39 +++++++++++-------- .../legacy-nested-checklist.html} | 0 src/dev-app/mdc-checkbox/BUILD.bazel | 26 ------------- src/dev-app/routes.ts | 5 ++- 16 files changed, 109 insertions(+), 121 deletions(-) create mode 100644 src/dev-app/legacy-checkbox/BUILD.bazel rename src/dev-app/{mdc-checkbox/mdc-checkbox-demo.html => legacy-checkbox/legacy-checkbox-demo.html} (96%) rename src/dev-app/{mdc-checkbox/mdc-checkbox-demo.scss => legacy-checkbox/legacy-checkbox-demo.scss} (100%) rename src/dev-app/{mdc-checkbox/mdc-checkbox-demo.ts => legacy-checkbox/legacy-checkbox-demo.ts} (78%) rename src/dev-app/{mdc-checkbox/nested-checklist.html => legacy-checkbox/legacy-nested-checklist.html} (100%) delete mode 100644 src/dev-app/mdc-checkbox/BUILD.bazel diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 8e122f7fd439..bc6e9663afca 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/src/components-examples/material/checkbox/BUILD.bazel b/src/components-examples/material/checkbox/BUILD.bazel index cca9a4c9434f..90654ce87ee9 100644 --- a/src/components-examples/material/checkbox/BUILD.bazel +++ b/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", ], 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 index c8ad24db9d44..8741332bdc38 100644 --- 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 {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); diff --git a/src/components-examples/material/checkbox/index.ts b/src/components-examples/material/checkbox/index.ts index 273218ede44b..a58046784231 100644 --- a/src/components-examples/material/checkbox/index.ts +++ b/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, ], diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index 4f18a0991582..d36f7d2c96c4 100644 --- a/src/dev-app/BUILD.bazel +++ b/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", diff --git a/src/dev-app/checkbox/BUILD.bazel b/src/dev-app/checkbox/BUILD.bazel index e01b5da2142c..190471f72a4a 100644 --- a/src/dev-app/checkbox/BUILD.bazel +++ b/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", ], ) diff --git a/src/dev-app/checkbox/checkbox-demo.html b/src/dev-app/checkbox/checkbox-demo.html index b14bf4c38ffa..73937c93eb2f 100644 --- a/src/dev-app/checkbox/checkbox-demo.html +++ b/src/dev-app/checkbox/checkbox-demo.html @@ -1,3 +1,22 @@ +

Themed Checkboxes

+ +
+ Default +
+ +
+ Primary +
+ +
+ Accent +
+ +
+ Warn +
+ +

mat-checkbox: Basic Example

No animations - -

Overview example

- - diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts index eb0162cd568f..4fe80bdf5e64 100644 --- a/src/dev-app/checkbox/checkbox-demo.ts +++ b/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; diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index 9be1333ff983..8b5a8b89e47c 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/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'}, diff --git a/src/dev-app/legacy-checkbox/BUILD.bazel b/src/dev-app/legacy-checkbox/BUILD.bazel new file mode 100644 index 000000000000..89dd9ebb69db --- /dev/null +++ b/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", +) diff --git a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.html b/src/dev-app/legacy-checkbox/legacy-checkbox-demo.html similarity index 96% rename from src/dev-app/mdc-checkbox/mdc-checkbox-demo.html rename to src/dev-app/legacy-checkbox/legacy-checkbox-demo.html index 73937c93eb2f..d6604e65bb06 100644 --- a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.html +++ b/src/dev-app/legacy-checkbox/legacy-checkbox-demo.html @@ -1,22 +1,3 @@ -

Themed Checkboxes

- -
- Default -
- -
- Primary -
- -
- Accent -
- -
- Warn -
- -

mat-checkbox: Basic Example

Pseudo checkboxes

Nested Checklist

- +

Configuration

diff --git a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.scss b/src/dev-app/legacy-checkbox/legacy-checkbox-demo.scss similarity index 100% rename from src/dev-app/mdc-checkbox/mdc-checkbox-demo.scss rename to src/dev-app/legacy-checkbox/legacy-checkbox-demo.scss diff --git a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts b/src/dev-app/legacy-checkbox/legacy-checkbox-demo.ts similarity index 78% rename from src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts rename to src/dev-app/legacy-checkbox/legacy-checkbox-demo.ts index 137dcf9ce96f..57cf1dc7baa4 100644 --- a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts +++ b/src/dev-app/legacy-checkbox/legacy-checkbox-demo.ts @@ -7,13 +7,17 @@ */ import {Component, Directive} from '@angular/core'; -import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox'; +import { + MatLegacyCheckboxModule, + MAT_CHECKBOX_DEFAULT_OPTIONS, +} from '@angular/material/legacy-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 {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; @@ -43,7 +47,7 @@ export class ClickActionCheck {} export class AnimationsNoop {} @Component({ - selector: 'mat-checkbox-demo-nested-checklist', + selector: 'mat-legacy-checkbox-demo-nested-checklist', styles: [ ` li { @@ -51,11 +55,11 @@ export class AnimationsNoop {} } `, ], - templateUrl: 'nested-checklist.html', + templateUrl: './legacy-nested-checklist.html', standalone: true, - imports: [CommonModule, MatCheckboxModule, FormsModule], + imports: [CommonModule, MatLegacyCheckboxModule, FormsModule], }) -export class MatCheckboxDemoNestedChecklist { +export class MatLegacyCheckboxDemoNestedChecklist { tasks: Task[] = [ { name: 'Reminders', @@ -100,29 +104,30 @@ export class MatCheckboxDemoNestedChecklist { } @Component({ - selector: 'mdc-checkbox-demo', - templateUrl: 'mdc-checkbox-demo.html', - styleUrls: ['mdc-checkbox-demo.css'], + selector: 'legacy-checkbox-demo', + templateUrl: 'legacy-checkbox-demo.html', + styleUrls: ['legacy-checkbox-demo.css'], standalone: true, imports: [ CommonModule, FormsModule, - MatCheckboxModule, - MatInputModule, - MatSelectModule, + MatLegacyCheckboxModule, + MatLegacyFormFieldModule, + MatLegacyInputModule, + MatLegacySelectModule, MatPseudoCheckboxModule, ReactiveFormsModule, - MatCheckboxDemoNestedChecklist, + MatLegacyCheckboxDemoNestedChecklist, ClickActionNoop, ClickActionCheck, AnimationsNoop, ], }) -export class MdcCheckboxDemo { +export class LegacyCheckboxDemo { isIndeterminate: boolean = false; isChecked: boolean = false; isDisabled: boolean = false; - labelPosition: 'before' | 'after' = 'after'; + labelPosition: 'after' | 'before' = 'after'; useAlternativeColor: boolean = false; demoRequired = false; diff --git a/src/dev-app/mdc-checkbox/nested-checklist.html b/src/dev-app/legacy-checkbox/legacy-nested-checklist.html similarity index 100% rename from src/dev-app/mdc-checkbox/nested-checklist.html rename to src/dev-app/legacy-checkbox/legacy-nested-checklist.html diff --git a/src/dev-app/mdc-checkbox/BUILD.bazel b/src/dev-app/mdc-checkbox/BUILD.bazel deleted file mode 100644 index 9ef87feb7b24..000000000000 --- a/src/dev-app/mdc-checkbox/BUILD.bazel +++ /dev/null @@ -1,26 +0,0 @@ -load("//tools:defaults.bzl", "ng_module", "sass_binary") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "mdc-checkbox", - srcs = glob(["**/*.ts"]), - assets = [ - "mdc-checkbox-demo.html", - "nested-checklist.html", - ":mdc_checkbox_demo_scss", - ], - deps = [ - "//src/material/checkbox", - "//src/material/core", - "//src/material/form-field", - "//src/material/input", - "//src/material/select", - "@npm//@angular/forms", - ], -) - -sass_binary( - name = "mdc_checkbox_demo_scss", - src = "mdc-checkbox-demo.scss", -) diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts index ac1ab42106b5..740b009eb130 100644 --- a/src/dev-app/routes.ts +++ b/src/dev-app/routes.ts @@ -155,8 +155,9 @@ export const DEV_APP_ROUTES: Routes = [ loadComponent: () => import('./legacy-card/legacy-card-demo').then(m => m.LegacyCardDemo), }, { - path: 'mdc-checkbox', - loadComponent: () => import('./mdc-checkbox/mdc-checkbox-demo').then(m => m.MdcCheckboxDemo), + path: 'legacy-checkbox', + loadComponent: () => + import('./legacy-checkbox/legacy-checkbox-demo').then(m => m.LegacyCheckboxDemo), }, { path: 'mdc-progress-bar',