feat(material-experimental/mdc-form-field): support for disabl… (#18397)

By leveraging the animations feature target, we can add support for
disabling animations of the form-field. Unlike in non experimental
Material components, the class for toggling the animations is now
scoped to the component. This gives more fine-grained control and
makes it public. The class doesn't need to be denoted as private, as
it can be useful for implementers of custom form-field controls.

Also fixes that the line-ripple styles are not included.

Author: devversion

src/material-experimental/mdc-form-field/form-field.scss

@@ -7,9 +7,10 @@
 @import 'mdc-text-field-structure-overrides';
 
 // Base styles for MDC notched-outline, MDC floating label and MDC text-field.
-@include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
-@include mdc-floating-label-core-styles($query: $mat-base-styles-query);
-@include mdc-text-field-core-styles($query: $mat-base-styles-query);
+@include mdc-notched-outline-core-styles($query: $mat-base-styles-without-animation-query);
+@include mdc-floating-label-core-styles($query: $mat-base-styles-without-animation-query);
+@include mdc-text-field-core-styles($query: $mat-base-styles-without-animation-query);
+@include mdc-line-ripple-core-styles($query: $mat-base-styles-without-animation-query);
 
 // MDC text-field overwrites.
 @include _mat-mdc-text-field-textarea-overrides();
@@ -52,3 +53,12 @@
   min-height: $mdc-text-field-height;
   box-sizing: border-box;
 }
+
+// In order to make it possible for developers to disable animations for form-fields,
+// we only activate the animation styles if animations are not explicitly disabled.
+.mat-mdc-form-field:not(.mat-form-field-no-animations) {
+  @include mdc-notched-outline-core-styles($query: animation);
+  @include mdc-floating-label-core-styles($query: animation);
+  @include mdc-text-field-core-styles($query: animation);
+  @include mdc-line-ripple-core-styles($query: animation);
+}

src/material-experimental/mdc-form-field/form-field.ts

@@ -104,6 +104,7 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-form-field-disabled]': '_control.disabled',
     '[class.mat-form-field-autofilled]': '_control.autofilled',
+    '[class.mat-form-field-no-animations]': '_animationMode === "NoopAnimations"',
     '[class.mat-focused]': '_control.focused',
     '[class.mat-accent]': 'color == "accent"',
     '[class.mat-warn]': 'color == "warn"',
@@ -114,7 +115,6 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
     '[class.ng-valid]': '_shouldForward("valid")',
     '[class.ng-invalid]': '_shouldForward("invalid")',
     '[class.ng-pending]': '_shouldForward("pending")',
-    '[class._mat-animation-noopable]': '!_animationsEnabled',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -194,9 +194,6 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   // Unique id for the internal form field label.
   _labelId = `mat-form-field-label-${nextUniqueId++}`;
 
-  /** Whether the Angular animations are enabled. */
-  _animationsEnabled: boolean;
-
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState: string = '';
 
@@ -283,9 +280,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
               @Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS)
               private _defaults?: MatFormFieldDefaultOptions,
               @Optional() @Inject(MAT_LABEL_GLOBAL_OPTIONS) private _labelOptions?: LabelOptions,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string) {
-    this._animationsEnabled = _animationMode !== 'NoopAnimations';
-
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     if (_defaults && _defaults.appearance) {
       this.appearance = _defaults.appearance;
     } else if (_defaults && _defaults.hideRequiredMarker) {

src/material-experimental/mdc-input/input.spec.ts

@@ -33,7 +33,7 @@ import {
   ShowOnDirtyErrorStateMatcher,
 } from '@angular/material/core';
 import {By} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule} from './index';
 
 describe('MatMdcInput without forms', () => {
@@ -400,6 +400,15 @@ describe('MatMdcInput without forms', () => {
     expect(selectEl.disabled).toBe(true);
   }));
 
+  it('should add a class to the form-field if animations are disabled', () => {
+    configureTestingModule(MatInputWithId, {animations: false});
+    const fixture = TestBed.createComponent(MatInputWithId);
+    fixture.detectChanges();
+
+    const formFieldEl = fixture.nativeElement.querySelector('.mat-mdc-form-field');
+    expect(formFieldEl.classList).toContain('mat-form-field-no-animations');
+  });
+
   it('should add a class to the form field if it has a native select', fakeAsync(() => {
     const fixture = createComponent(MatInputSelect);
     fixture.detectChanges();
@@ -1139,16 +1148,15 @@ describe('MatFormField default options', () => {
 
 });
 
-function createComponent<T>(component: Type<T>,
-                            providers: Provider[] = [],
-                            imports: any[] = [],
-                            declarations: any[] = []): ComponentFixture<T> {
+function configureTestingModule(component: Type<any>, options:
+    {providers?: Provider[], imports?: any[], declarations?: any[], animations?: boolean} = {}) {
+  const {providers = [], imports = [], declarations = [], animations = true} = options;
   TestBed.configureTestingModule({
     imports: [
       FormsModule,
       MatFormFieldModule,
       MatInputModule,
-      BrowserAnimationsModule,
+      animations ? BrowserAnimationsModule : NoopAnimationsModule,
       PlatformModule,
       ReactiveFormsModule,
       ...imports
@@ -1163,7 +1171,13 @@ function createComponent<T>(component: Type<T>,
       ...providers
     ],
   }).compileComponents();
+}
 
+function createComponent<T>(component: Type<T>,
+                            providers: Provider[] = [],
+                            imports: any[] = [],
+                            declarations: any[] = []): ComponentFixture<T> {
+  configureTestingModule(component, {providers, imports, declarations});
   return TestBed.createComponent<T>(component);
 }