fix(input): don't add empty prefix & suffix wrappers (#3724)

* fix(input): don't add empty prefix & suffix wrappers

* add tests

Author: mmalerba

src/lib/input/index.ts

@@ -1,10 +1,12 @@
-import {NgModule, ModuleWithProviders} from '@angular/core';
+import {ModuleWithProviders, NgModule} from '@angular/core';
 import {
-  MdPlaceholder,
-  MdInputContainer,
+  MdErrorDirective,
   MdHint,
+  MdInputContainer,
   MdInputDirective,
-  MdErrorDirective,
+  MdPlaceholder,
+  MdPrefix,
+  MdSuffix
 } from './input-container';
 import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
@@ -14,25 +16,29 @@ import {PlatformModule} from '../core/platform/index';
 
 @NgModule({
   declarations: [
-    MdPlaceholder,
-    MdInputContainer,
+    MdErrorDirective,
     MdHint,
-    MdTextareaAutosize,
+    MdInputContainer,
     MdInputDirective,
-    MdErrorDirective
+    MdPlaceholder,
+    MdPrefix,
+    MdSuffix,
+    MdTextareaAutosize,
   ],
   imports: [
     CommonModule,
     FormsModule,
     PlatformModule,
   ],
   exports: [
-    MdPlaceholder,
-    MdInputContainer,
+    MdErrorDirective,
     MdHint,
-    MdTextareaAutosize,
+    MdInputContainer,
     MdInputDirective,
-    MdErrorDirective
+    MdPlaceholder,
+    MdPrefix,
+    MdSuffix,
+    MdTextareaAutosize,
   ],
 })
 export class MdInputModule {

src/lib/input/input-container.html

@@ -1,6 +1,6 @@
 <div class="mat-input-wrapper">
   <div class="mat-input-table">
-    <div class="mat-input-prefix">
+    <div class="mat-input-prefix" *ngIf="_prefixChildren.length">
       <!-- TODO(andrewseguin): remove [md-prefix] -->
       <ng-content select="[mdPrefix], [matPrefix], [md-prefix]"></ng-content>
     </div>
@@ -23,7 +23,7 @@
       </span>
     </div>
 
-    <div class="mat-input-suffix">
+    <div class="mat-input-suffix" *ngIf="_suffixChildren.length">
       <!-- TODO(andrewseguin): remove [md-suffix] -->
       <ng-content select="[mdSuffix], [matSuffix], [md-suffix]"></ng-content>
     </div>

src/lib/input/input-container.spec.ts

@@ -1,13 +1,13 @@
-import {async, TestBed, inject, ComponentFixture} from '@angular/core/testing';
+import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {
-  FormsModule,
-  ReactiveFormsModule,
   FormControl,
-  NgForm,
-  Validators,
-  FormGroupDirective,
   FormGroup,
+  FormGroupDirective,
+  FormsModule,
+  NgForm,
+  ReactiveFormsModule,
+  Validators
 } from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -18,52 +18,53 @@ import {PlatformModule} from '../core/platform/index';
 import {wrappedErrorMessage} from '../core/testing/wrapped-error-message';
 import {dispatchFakeEvent} from '../core/testing/dispatch-events';
 import {
+  MdInputContainerDuplicatedHintError,
   MdInputContainerMissingMdInputError,
-  MdInputContainerPlaceholderConflictError,
-  MdInputContainerDuplicatedHintError
+  MdInputContainerPlaceholderConflictError
 } from './input-container-errors';
 
 
 describe('MdInputContainer', function () {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        MdInputModule.forRoot(),
-        PlatformModule.forRoot(),
         FormsModule,
+        MdInputModule,
+        NoopAnimationsModule,
+        PlatformModule,
         ReactiveFormsModule,
-        NoopAnimationsModule
       ],
       declarations: [
-        MdInputContainerPlaceholderRequiredTestComponent,
-        MdInputContainerPlaceholderElementTestComponent,
-        MdInputContainerPlaceholderAttrTestComponent,
+        MdInputContainerBaseTestController,
+        MdInputContainerDateTestController,
         MdInputContainerHintLabel2TestController,
         MdInputContainerHintLabelTestController,
-        MdInputContainerInvalidTypeTestController,
-        MdInputContainerInvalidPlaceholderTestController,
         MdInputContainerInvalidHint2TestController,
         MdInputContainerInvalidHintTestController,
-        MdInputContainerBaseTestController,
-        MdInputContainerWithId,
-        MdInputContainerDateTestController,
-        MdInputContainerTextTestController,
-        MdInputContainerPasswordTestController,
+        MdInputContainerInvalidPlaceholderTestController,
+        MdInputContainerInvalidTypeTestController,
+        MdInputContainerMissingMdInputTestController,
+        MdInputContainerMultipleHintMixedTestController,
+        MdInputContainerMultipleHintTestController,
         MdInputContainerNumberTestController,
-        MdInputContainerZeroTestController,
-        MdTextareaWithBindings,
+        MdInputContainerPasswordTestController,
+        MdInputContainerPlaceholderAttrTestComponent,
+        MdInputContainerPlaceholderElementTestComponent,
+        MdInputContainerPlaceholderRequiredTestComponent,
+        MdInputContainerTextTestController,
         MdInputContainerWithDisabled,
+        MdInputContainerWithDynamicPlaceholder,
+        MdInputContainerWithFormControl,
+        MdInputContainerWithFormErrorMessages,
+        MdInputContainerWithFormGroupErrorMessages,
+        MdInputContainerWithId,
+        MdInputContainerWithPrefixAndSuffix,
         MdInputContainerWithRequired,
+        MdInputContainerWithStaticPlaceholder,
         MdInputContainerWithType,
         MdInputContainerWithValueBinding,
-        MdInputContainerWithFormControl,
-        MdInputContainerWithStaticPlaceholder,
-        MdInputContainerMissingMdInputTestController,
-        MdInputContainerMultipleHintTestController,
-        MdInputContainerMultipleHintMixedTestController,
-        MdInputContainerWithDynamicPlaceholder,
-        MdInputContainerWithFormErrorMessages,
-        MdInputContainerWithFormGroupErrorMessages
+        MdInputContainerZeroTestController,
+        MdTextareaWithBindings,
       ],
     });
 
@@ -685,6 +686,29 @@ describe('MdInputContainer', function () {
 
   });
 
+  it('should not have prefix and suffix elements when none are specified', () => {
+    let fixture = TestBed.createComponent(MdInputContainerWithId);
+    fixture.detectChanges();
+
+    let prefixEl = fixture.debugElement.query(By.css('.mat-input-prefix'));
+    let suffixEl = fixture.debugElement.query(By.css('.mat-input-suffix'));
+
+    expect(prefixEl).toBeNull();
+    expect(suffixEl).toBeNull();
+  });
+
+  it('should add prefix and suffix elements when specified', () => {
+    let fixture = TestBed.createComponent(MdInputContainerWithPrefixAndSuffix);
+    fixture.detectChanges();
+
+    let prefixEl = fixture.debugElement.query(By.css('.mat-input-prefix'));
+    let suffixEl = fixture.debugElement.query(By.css('.mat-input-suffix'));
+
+    expect(prefixEl).not.toBeNull();
+    expect(suffixEl).not.toBeNull();
+    expect(prefixEl.nativeElement.innerText.trim()).toEqual('Prefix');
+    expect(suffixEl.nativeElement.innerText.trim()).toEqual('Suffix');
+  });
 });
 
 @Component({
@@ -927,7 +951,6 @@ class MdInputContainerWithFormErrorMessages {
   renderError = true;
 }
 
-
 @Component({
   template: `
     <form [formGroup]="formGroup" novalidate>
@@ -945,3 +968,14 @@ class MdInputContainerWithFormGroupErrorMessages {
     name: new FormControl('', Validators.required)
   });
 }
+
+@Component({
+  template: `
+    <md-input-container>
+      <div mdPrefix>Prefix</div>
+      <input mdInput>
+      <div mdSuffix>Suffix</div>
+    </md-input-container>
+  `
+})
+class MdInputContainerWithPrefixAndSuffix {}

src/lib/input/input-container.ts

@@ -1,30 +1,24 @@
 import {
-  AfterViewInit,
   AfterContentInit,
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   ContentChildren,
   Directive,
   ElementRef,
+  EventEmitter,
   Input,
   Optional,
   Output,
-  EventEmitter,
+  QueryList,
   Renderer,
-  ChangeDetectorRef,
-  ViewEncapsulation,
   Self,
-  QueryList,
+  ViewEncapsulation
 } from '@angular/core';
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 import {coerceBooleanProperty} from '../core';
-import {NgControl, NgForm, FormGroupDirective} from '@angular/forms';
+import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {getSupportedInputTypes} from '../core/platform/features';
 import {
   MdInputContainerDuplicatedHintError,
@@ -90,6 +84,20 @@ export class MdHint {
 })
 export class MdErrorDirective { }
 
+/** The input prefix. */
+@Directive({
+  selector: '[mdPrefix], [matPrefix], [md-prefix]'
+})
+export class MdPrefix {}
+
+
+/** The input suffix. */
+@Directive({
+  selector: '[mdSuffix], [matSuffix], [md-suffix]'
+})
+export class MdSuffix {}
+
+
 /** The input directive, used to mark the input that `MdInputContainer` is wrapping. */
 @Directive({
   selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
@@ -327,6 +335,10 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
 
   @ContentChildren(MdHint) _hintChildren: QueryList<MdHint>;
 
+  @ContentChildren(MdPrefix) _prefixChildren: QueryList<MdPrefix>;
+
+  @ContentChildren(MdSuffix) _suffixChildren: QueryList<MdSuffix>;
+
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     @Optional() private _parentForm: NgForm,