fix(material-experimental/mdc-form-field): not adding mat-primary theme class (#20605)

The MDC-based form field doesn't add the `mat-primary` class if the color isn't `accent`
or `warn`, because it doesn't go through the `color` mixin.

Author: crisbeto

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

@@ -112,8 +112,9 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
     '[class.mat-form-field-appearance-outline]': 'appearance == "outline"',
     '[class.mat-form-field-hide-placeholder]': '_hasFloatingLabel() && !_shouldLabelFloat()',
     '[class.mat-focused]': '_control.focused',
-    '[class.mat-accent]': 'color == "accent"',
-    '[class.mat-warn]': 'color == "warn"',
+    '[class.mat-primary]': 'color !== "accent" && color !== "warn"',
+    '[class.mat-accent]': 'color === "accent"',
+    '[class.mat-warn]': 'color === "warn"',
     '[class.ng-untouched]': '_shouldForward("untouched")',
     '[class.ng-touched]': '_shouldForward("touched")',
     '[class.ng-pristine]': '_shouldForward("pristine")',

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

@@ -32,6 +32,7 @@ import {
   ErrorStateMatcher,
   MAT_LABEL_GLOBAL_OPTIONS,
   ShowOnDirtyErrorStateMatcher,
+  ThemePalette,
 } from '@angular/material/core';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -854,6 +855,27 @@ describe('MatMdcInput without forms', () => {
     expect(formField._control.empty).toBe(false);
   }));
 
+  it('should default the form field color to primary', fakeAsync(() => {
+    const fixture = createComponent(MatInputWithColor);
+    fixture.detectChanges();
+
+    const formField = fixture.nativeElement.querySelector('.mat-mdc-form-field');
+    expect(formField.classList).toContain('mat-primary');
+  }));
+
+  it('should be able to change the form field color', fakeAsync(() => {
+    const fixture = createComponent(MatInputWithColor);
+    fixture.componentInstance.color = 'accent';
+    fixture.detectChanges();
+    const formField = fixture.nativeElement.querySelector('.mat-mdc-form-field');
+
+    expect(formField.classList).toContain('mat-accent');
+
+    fixture.componentInstance.color = 'warn';
+    fixture.detectChanges();
+    expect(formField.classList).toContain('mat-warn');
+  }));
+
 });
 
 describe('MatMdcInput with forms', () => {
@@ -1717,3 +1739,14 @@ class CustomMatInputAccessor {
   set value(_value: any) {}
   private _value = null;
 }
+
+
+@Component({
+  template: `
+    <mat-form-field [color]="color">
+      <input matNativeControl>
+    </mat-form-field>`
+})
+class MatInputWithColor {
+  color: ThemePalette;
+}

src/material-experimental/mdc-select/_select-theme.scss

@@ -48,7 +48,7 @@
 
     .mat-mdc-form-field {
       &.mat-focused {
-        .mat-mdc-select-arrow {
+        &.mat-primary .mat-mdc-select-arrow {
           color: _get-mdc-focused-text-color(primary);
         }
 

src/material/input/input.spec.ts

@@ -31,6 +31,7 @@ import {
   FloatLabelType,
   MAT_LABEL_GLOBAL_OPTIONS,
   ShowOnDirtyErrorStateMatcher,
+  ThemePalette,
 } from '@angular/material/core';
 import {
   getMatFormFieldDuplicatedHintError,
@@ -1036,6 +1037,27 @@ describe('MatInput without forms', () => {
     }).not.toThrow();
   }));
 
+  it('should default the form field color to primary', fakeAsync(() => {
+    const fixture = createComponent(MatInputWithColor);
+    fixture.detectChanges();
+
+    const formField = fixture.nativeElement.querySelector('.mat-form-field');
+    expect(formField.classList).toContain('mat-primary');
+  }));
+
+  it('should be able to change the form field color', fakeAsync(() => {
+    const fixture = createComponent(MatInputWithColor);
+    fixture.componentInstance.color = 'accent';
+    fixture.detectChanges();
+    const formField = fixture.nativeElement.querySelector('.mat-form-field');
+
+    expect(formField.classList).toContain('mat-accent');
+
+    fixture.componentInstance.color = 'warn';
+    fixture.detectChanges();
+    expect(formField.classList).toContain('mat-warn');
+  }));
+
 });
 
 describe('MatInput with forms', () => {
@@ -2323,3 +2345,14 @@ class MatInputWithDefaultNgIf {}
 class MatInputWithAnotherNgIf {
   inputValue = 'test';
 }
+
+
+@Component({
+  template: `
+    <mat-form-field [color]="color">
+      <input matNativeControl>
+    </mat-form-field>`
+})
+class MatInputWithColor {
+  color: ThemePalette;
+}