From aa2356d3fc3a37b1bdabc7cbeca957e1f59ffb7e Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Mon, 12 Mar 2018 15:37:42 -0700
Subject: [PATCH] refactor(form-field): remove deprecated CSS classes (#10296)

BREAKING CHANGES:
- The following deprecated CSS classes have been removed:
  - mat-input-container instead use mat-form-field
  - mat-input-invalid instead use mat-form-field-invalid
  - mat-input-wrapper instead use mat-form-field-wrapper
  - mat-input-flex instead use mat-form-field-flex
  - mat-input-prefix instead use mat-form-field-prefix
  - mat-input-infix instead use mat-form-field-infix
  - mat-input-placeholder-wrapper instead use mat-form-field-label-wrapper
  - mat-input-placeholder instead use mat-form-field-label
  - mat-input-suffix instead use mat-form-field-suffix
  - mat-input-underline instead use mat-form-field-underline
  - mat-input-ripple instead use mat-form-field-ripple
  - mat-input-subscript-wrapper instead use mat-form-field-subscript-wrapper
  - mat-input-hint-wrapper instead use mat-form-field-hint-wrapper
  - mat-input-hint-spacer instead use mat-form-field-hint-spacer
  - mat-form-field-placeholder-wrapper instead use mat-form-field-label-wrapper
  - mat-form-field-placeholder instead use mat-form-field-label
---
 src/lib/autocomplete/autocomplete.spec.ts |  2 +-
 src/lib/form-field/form-field.html        | 35 ++++++++---------------
 src/lib/form-field/form-field.scss        |  6 ++--
 src/lib/form-field/form-field.ts          |  3 +-
 4 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 704e2bea745..9734e1fdca2 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1298,7 +1298,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       input = fixture.debugElement.query(By.css('input')).nativeElement;
-      inputReference = fixture.debugElement.query(By.css('.mat-input-flex')).nativeElement;
+      inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
     });
 
     it('should use below positioning by default', fakeAsync(() => {
diff --git a/src/lib/form-field/form-field.html b/src/lib/form-field/form-field.html
index 3f2429919c6..4f6adc89a6a 100644
--- a/src/lib/form-field/form-field.html
+++ b/src/lib/form-field/form-field.html
@@ -1,28 +1,17 @@
-<div class="mat-input-wrapper mat-form-field-wrapper">
-  <div class="mat-input-flex mat-form-field-flex" #connectionContainer
+<div class="mat-form-field-wrapper">
+  <div class="mat-form-field-flex" #connectionContainer
        (click)="_control.onContainerClick && _control.onContainerClick($event)">
-    <div class="mat-input-prefix mat-form-field-prefix" *ngIf="_prefixChildren.length">
+    <div class="mat-form-field-prefix" *ngIf="_prefixChildren.length">
       <ng-content select="[matPrefix]"></ng-content>
     </div>
 
-    <div class="mat-input-infix mat-form-field-infix" #inputContainer>
+    <div class="mat-form-field-infix" #inputContainer>
       <ng-content></ng-content>
 
-      <!--
-        TODO: remove `mat-input-placeholder-wrapper` and `mat-form-field-placeholder-wrapper`
-        next time we do breaking changes.
-        @deletion-target 6.0.0
-      -->
-      <span class="mat-form-field-label-wrapper mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper">
+      <span class="mat-form-field-label-wrapper">
         <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
              read if it comes before the control in the DOM. -->
-
-        <!--
-          TODO: remove `mat-input-placeholder` and `mat-form-field-placeholder`
-          next time we do breaking changes.
-          @deletion-target 6.0.0
-        -->
-        <label class="mat-form-field-label mat-input-placeholder mat-form-field-placeholder"
+        <label class="mat-form-field-label"
                [attr.for]="_control.id"
                [attr.aria-owns]="_control.id"
                [class.mat-empty]="_control.empty && !_shouldAlwaysFloat"
@@ -48,15 +37,15 @@
       </span>
     </div>
 
-    <div class="mat-input-suffix mat-form-field-suffix" *ngIf="_suffixChildren.length">
+    <div class="mat-form-field-suffix" *ngIf="_suffixChildren.length">
       <ng-content select="[matSuffix]"></ng-content>
     </div>
   </div>
 
   <!-- Underline used for legacy, standard, and box appearances. -->
-  <div class="mat-input-underline mat-form-field-underline" #underline
+  <div class="mat-form-field-underline" #underline
        *ngIf="appearance != 'outline'">
-    <span class="mat-input-ripple mat-form-field-ripple"
+    <span class="mat-form-field-ripple"
           [class.mat-accent]="color == 'accent'"
           [class.mat-warn]="color == 'warn'"></span>
   </div>
@@ -75,18 +64,18 @@
     </div>
   </ng-container>
 
-  <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"
+  <div class="mat-form-field-subscript-wrapper"
        [ngSwitch]="_getDisplayedMessages()">
     <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
       <ng-content select="mat-error"></ng-content>
     </div>
 
-    <div class="mat-input-hint-wrapper mat-form-field-hint-wrapper" *ngSwitchCase="'hint'"
+    <div class="mat-form-field-hint-wrapper" *ngSwitchCase="'hint'"
       [@transitionMessages]="_subscriptAnimationState">
       <!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->
       <div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
       <ng-content select="mat-hint:not([align='end'])"></ng-content>
-      <div class="mat-input-hint-spacer mat-form-field-hint-spacer"></div>
+      <div class="mat-form-field-hint-spacer"></div>
       <ng-content select="mat-hint[align='end']"></ng-content>
     </div>
   </div>
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss
index 9e242fb46dc..7375167e45f 100644
--- a/src/lib/form-field/form-field.scss
+++ b/src/lib/form-field/form-field.scss
@@ -123,9 +123,9 @@ $mat-form-field-default-infix-width: 180px !default;
 
 // Server-side rendered matInput with focus or a placeholder attribute but placeholder not shown
 // (used as a pure CSS stand-in for mat-form-field-should-float).
-.mat-input-server:focus + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder,
-.mat-input-server[placeholder]:not(:placeholder-shown) + .mat-form-field-placeholder-wrapper
-    .mat-form-field-placeholder {
+.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label,
+.mat-input-server[placeholder]:not(:placeholder-shown) + .mat-form-field-label-wrapper
+    .mat-form-field-label {
   display: none;
 
   .mat-form-field-can-float & {
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index ddc6727f9fc..0aed2a7ae16 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -97,12 +97,11 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
   ],
   animations: [matFormFieldAnimations.transitionMessages],
   host: {
-    'class': 'mat-input-container mat-form-field',
+    'class': 'mat-form-field',
     '[class.mat-form-field-appearance-standard]': 'appearance == "standard"',
     '[class.mat-form-field-appearance-fill]': 'appearance == "fill"',
     '[class.mat-form-field-appearance-outline]': 'appearance == "outline"',
     '[class.mat-form-field-appearance-legacy]': 'appearance == "legacy"',
-    '[class.mat-input-invalid]': '_control.errorState',
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-form-field-can-float]': '_canLabelFloat',
     '[class.mat-form-field-should-float]': '_shouldLabelFloat()',