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
angular · Mar 12, 2018 · aa2356d · aa2356d
1 parent d065aea
commit aa2356d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()',