From a78f432a2ffb0bd2d5faf1fc4e392065ae05de4f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 25 Oct 2020 16:10:19 +0100 Subject: [PATCH] fix(material-experimental/mdc-chips): use MDC-based form field * Changes the MDC chips module to depend on the MDC form field module since we generally don't support mixing MDC and non-MDC components. * Fixes that the MDC chip input didn't work inside of an MDC form field. * Switches the MDC chips demo to use mostly MDC components. * Fixes some tests that broke after the switch to the MDC form field. --- src/dev-app/mdc-chips/BUILD.bazel | 9 ++++--- .../mdc-chips/mdc-chips-demo-module.ts | 10 +++---- src/dev-app/mdc-chips/mdc-chips-demo.html | 6 ++--- src/dev-app/mdc-chips/mdc-chips-demo.scss | 2 +- src/dev-app/mdc-chips/mdc-chips-demo.ts | 2 +- .../mdc-chips/BUILD.bazel | 10 ++++--- .../mdc-chips/chip-grid.spec.ts | 20 +++++++------- .../mdc-chips/chip-grid.ts | 2 +- .../mdc-chips/chip-input.spec.ts | 27 ++++++++----------- .../mdc-chips/chip-input.ts | 5 +++- .../mdc-chips/chips.scss | 2 +- .../mdc-chips/testing/BUILD.bazel | 4 +++ src/material/chips/chip-input.spec.ts | 5 ++++ 13 files changed, 58 insertions(+), 46 deletions(-) diff --git a/src/dev-app/mdc-chips/BUILD.bazel b/src/dev-app/mdc-chips/BUILD.bazel index a4f44ad95d49..75a4e9fada3f 100644 --- a/src/dev-app/mdc-chips/BUILD.bazel +++ b/src/dev-app/mdc-chips/BUILD.bazel @@ -10,11 +10,12 @@ ng_module( ":mdc_chips_demo_scss", ], deps = [ + "//src/material-experimental/mdc-button", + "//src/material-experimental/mdc-card", + "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-chips", - "//src/material/button", - "//src/material/card", - "//src/material/checkbox", - "//src/material/form-field", + "//src/material-experimental/mdc-core", + "//src/material-experimental/mdc-form-field", "//src/material/icon", "//src/material/toolbar", "@npm//@angular/router", diff --git a/src/dev-app/mdc-chips/mdc-chips-demo-module.ts b/src/dev-app/mdc-chips/mdc-chips-demo-module.ts index 00a0594d851c..733d558d97a3 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo-module.ts +++ b/src/dev-app/mdc-chips/mdc-chips-demo-module.ts @@ -9,12 +9,12 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatToolbarModule} from '@angular/material/toolbar'; +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 {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {MatChipsModule} from '@angular/material-experimental/mdc-chips'; +import {MatToolbarModule} from '@angular/material/toolbar'; import {MatIconModule} from '@angular/material/icon'; import {RouterModule} from '@angular/router'; import {MdcChipsDemo} from './mdc-chips-demo'; diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.html b/src/dev-app/mdc-chips/mdc-chips-demo.html index 12de431749e0..90c30a8c8147 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo.html +++ b/src/dev-app/mdc-chips/mdc-chips-demo.html @@ -135,6 +135,7 @@

Multi selection

Input is last child of chip grid

+ New Contributor... Input is last child of chip grid cancel Input is last child of chip grid

Input is next sibling child of chip grid

+ New Contributor... {{person.name}} cancel - diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.scss b/src/dev-app/mdc-chips/mdc-chips-demo.scss index c69505383b38..b07f18078108 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo.scss +++ b/src/dev-app/mdc-chips/mdc-chips-demo.scss @@ -4,7 +4,7 @@ max-width: 200px; } - .mat-card { + .mat-mdc-card { padding: 0; margin: 16px; diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.ts b/src/dev-app/mdc-chips/mdc-chips-demo.ts index 4ec9c91e2f5f..c93da13d7bd7 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo.ts +++ b/src/dev-app/mdc-chips/mdc-chips-demo.ts @@ -8,7 +8,7 @@ import {COMMA, ENTER} from '@angular/cdk/keycodes'; import {Component} from '@angular/core'; -import {ThemePalette} from '@angular/material/core'; +import {ThemePalette} from '@angular/material-experimental/mdc-core'; import {MatChipInputEvent, MatChipEditedEvent} from '@angular/material-experimental/mdc-chips'; export interface Person { diff --git a/src/material-experimental/mdc-chips/BUILD.bazel b/src/material-experimental/mdc-chips/BUILD.bazel index 5cfc4f640c72..31ee44af6b22 100644 --- a/src/material-experimental/mdc-chips/BUILD.bazel +++ b/src/material-experimental/mdc-chips/BUILD.bazel @@ -22,7 +22,7 @@ ng_module( deps = [ "//src:dev_mode_types", "//src/material-experimental/mdc-core", - "//src/material/form-field", + "//src/material-experimental/mdc-form-field", "@npm//@angular/animations", "@npm//@angular/common", "@npm//@angular/core", @@ -69,8 +69,8 @@ ng_test_library( "//src/cdk/testing", "//src/cdk/testing/private", "//src/material-experimental/mdc-core", - "//src/material/form-field", - "//src/material/input", + "//src/material-experimental/mdc-form-field", + "//src/material-experimental/mdc-input", "@npm//@angular/animations", "@npm//@angular/common", "@npm//@angular/forms", @@ -84,6 +84,10 @@ ng_test_library( ng_web_test_suite( name = "unit_tests", static_files = [ + "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js", + "@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js", + "@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js", + "@npm//:node_modules/@material/dom/dist/mdc.dom.js", "@npm//:node_modules/@material/chips/dist/mdc.chips.js", "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js", ], diff --git a/src/material-experimental/mdc-chips/chip-grid.spec.ts b/src/material-experimental/mdc-chips/chip-grid.spec.ts index 537631f6a8fe..d51014bf5f60 100644 --- a/src/material-experimental/mdc-chips/chip-grid.spec.ts +++ b/src/material-experimental/mdc-chips/chip-grid.spec.ts @@ -33,8 +33,8 @@ import { } from '@angular/core'; import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators} from '@angular/forms'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatInputModule} from '@angular/material/input'; +import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; +import {MatInputModule} from '@angular/material-experimental/mdc-input'; import {By} from '@angular/platform-browser'; import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Subject} from 'rxjs'; @@ -668,7 +668,6 @@ describe('MDC-based MatChipGrid', () => { .toEqual(null, `Expected the control's value to be empty initially.`); const nativeInput = fixture.nativeElement.querySelector('input'); - // tick(); nativeInput.focus(); typeInElement(nativeInput, '123'); @@ -750,20 +749,20 @@ describe('MDC-based MatChipGrid', () => { }); it('should set an asterisk after the placeholder if the control is required', () => { - let requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'))!; + let requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!; expect(requiredMarker) .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`); fixture.componentInstance.isRequired = true; fixture.detectChanges(); - requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'))!; + requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!; expect(requiredMarker) .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`); }); it('should blur the form field when the active chip is blurred', fakeAsync(() => { - const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field'); + const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-mdc-form-field'); dispatchFakeEvent(nativeChips[0], 'focusin'); fixture.detectChanges(); @@ -926,8 +925,8 @@ describe('MDC-based MatChipGrid', () => { }); it('sets the aria-describedby to reference errors when in error state', () => { - let hintId = - fixture.debugElement.query(By.css('.mat-hint'))!.nativeElement.getAttribute('id'); + let hintId = fixture.debugElement.query(By.css('.mat-mdc-form-field-hint'))!.nativeElement + .getAttribute('id'); let describedBy = chipGridEl.getAttribute('aria-describedby'); expect(hintId).toBeTruthy('hint should be shown'); @@ -936,7 +935,7 @@ describe('MDC-based MatChipGrid', () => { fixture.componentInstance.formControl.markAsTouched(); fixture.detectChanges(); - let errorIds = fixture.debugElement.queryAll(By.css('.mat-error')) + let errorIds = fixture.debugElement.queryAll(By.css('.mat-mdc-form-field-error')) .map(el => el.nativeElement.getAttribute('id')).join(' '); describedBy = chipGridEl.getAttribute('aria-describedby'); @@ -1039,13 +1038,14 @@ class FormFieldChipGrid { @Component({ template: ` + New food... {{ food.viewValue }} - { let fixture: ComponentFixture; let testChipInput: TestChipInput; @@ -74,21 +78,6 @@ describe('MDC-based MatChipInput', () => { expect(inputNativeElement.getAttribute('placeholder')).toBe('bound placeholder'); }); - it('should propagate the dynamic `placeholder` value to the form field', () => { - fixture.componentInstance.placeholder = 'add a chip'; - fixture.detectChanges(); - - const label: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field-label'); - - expect(label).toBeTruthy(); - expect(label.textContent).toContain('add a chip'); - - fixture.componentInstance.placeholder = 'or don\'t'; - fixture.detectChanges(); - - expect(label.textContent).toContain('or don\'t'); - }); - it('should become disabled if the list is disabled', () => { expect(inputNativeElement.hasAttribute('disabled')).toBe(false); expect(chipInputDirective.disabled).toBe(false); @@ -143,6 +132,12 @@ describe('MDC-based MatChipInput', () => { expect(gridElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0'); })); + it('should set input styling classes', () => { + expect(inputNativeElement.classList).toContain('mat-mdc-input-element'); + expect(inputNativeElement.classList).toContain('mat-mdc-chip-input'); + expect(inputNativeElement.classList).toContain('mdc-text-field__input'); + }); + }); describe('[addOnBlur]', () => { diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts index 91a37d67a588..aa3faafd5bdf 100644 --- a/src/material-experimental/mdc-chips/chip-input.ts +++ b/src/material-experimental/mdc-chips/chip-input.ts @@ -34,7 +34,10 @@ let nextUniqueId = 0; selector: 'input[matChipInputFor]', exportAs: 'matChipInput, matChipInputFor', host: { - 'class': 'mat-mdc-chip-input mat-input-element', + // TODO: eventually we should remove `mat-input-element` from here since it comes from the + // non-MDC version of the input. It's currently being kept for backwards compatibility, because + // the MDC chips were landed initially with it. + 'class': 'mat-mdc-chip-input mat-mdc-input-element mdc-text-field__input mat-input-element', '(keydown)': '_keydown($event)', '(blur)': '_blur()', '(focus)': '_focus()', diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss index 71fcecae5a1e..d6914a8db7cc 100644 --- a/src/material-experimental/mdc-chips/chips.scss +++ b/src/material-experimental/mdc-chips/chips.scss @@ -108,7 +108,7 @@ $mat-mdc-chip-margin: 4px; margin: -$mat-mdc-chip-margin; // Keep the mat-chip-grid height the same even when there are no chips. - input.mat-input-element { + input.mat-mdc-chip-input { margin: $mat-mdc-chip-margin; } } diff --git a/src/material-experimental/mdc-chips/testing/BUILD.bazel b/src/material-experimental/mdc-chips/testing/BUILD.bazel index f671fbc2bab6..fc5794b9fc19 100644 --- a/src/material-experimental/mdc-chips/testing/BUILD.bazel +++ b/src/material-experimental/mdc-chips/testing/BUILD.bazel @@ -29,6 +29,10 @@ ng_test_library( ng_web_test_suite( name = "unit_tests", static_files = [ + "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js", + "@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js", + "@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js", + "@npm//:node_modules/@material/dom/dist/mdc.dom.js", "@npm//:node_modules/@material/chips/dist/mdc.chips.js", "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js", ], diff --git a/src/material/chips/chip-input.spec.ts b/src/material/chips/chip-input.spec.ts index adb201f95605..2c55e20c4996 100644 --- a/src/material/chips/chip-input.spec.ts +++ b/src/material/chips/chip-input.spec.ts @@ -139,6 +139,11 @@ describe('MatChipInput', () => { expect(inputNativeElement.getAttribute('aria-required')).toBe('true'); }); + it('should set input styling classes', () => { + expect(inputNativeElement.classList).toContain('mat-input-element'); + expect(inputNativeElement.classList).toContain('mat-chip-input'); + }); + }); describe('[addOnBlur]', () => {