fix(form-field): remove outline gap for empty labels

Removes the outline gap in outlined form fields, if the label element doesn't have any content.

Author: crisbeto

src/lib/form-field/form-field.ts

@@ -456,7 +456,10 @@ export class MatFormField extends _MatFormFieldMixinBase
    * appearance.
    */
   updateOutlineGap() {
-    if (this.appearance === 'outline' && this._label && this._label.nativeElement.children.length) {
+    const labelEl = this._label ? this._label.nativeElement : null;
+
+    if (this.appearance === 'outline' && labelEl && labelEl.children.length &&
+      labelEl.textContent.trim()) {
       if (this._platform && !this._platform.isBrowser) {
         // getBoundingClientRect isn't available on the server.
         this._initialGapCalculated = true;
@@ -468,14 +471,16 @@ export class MatFormField extends _MatFormFieldMixinBase
 
       const containerStart = this._getStartEnd(
           this._connectionContainerRef.nativeElement.getBoundingClientRect());
-      const labelStart = this._getStartEnd(
-          this._label.nativeElement.children[0].getBoundingClientRect());
+      const labelStart = this._getStartEnd(labelEl.children[0].getBoundingClientRect());
       let labelWidth = 0;
-      for (const child of this._label.nativeElement.children) {
+
+      for (const child of labelEl.children) {
         labelWidth += child.offsetWidth;
       }
+
       this._outlineGapStart = labelStart - containerStart - outlineGapPadding;
-      this._outlineGapWidth = labelWidth * floatingLabelScale + outlineGapPadding * 2;
+      this._outlineGapWidth = labelWidth > 0 ?
+          labelWidth * floatingLabelScale + outlineGapPadding * 2 : 0;
     } else {
       this._outlineGapStart = 0;
       this._outlineGapWidth = 0;

src/lib/input/input.spec.ts

@@ -1151,6 +1151,25 @@ describe('MatInput with appearance', () => {
     expect(parseInt(outlineStart.style.width)).toBeGreaterThan(0);
     expect(parseInt(outlineGap.style.width)).toBeGreaterThan(0);
   }));
+
+  it('should not set an outline gap if the label is empty', fakeAsync(() => {
+    fixture.destroy();
+    TestBed.resetTestingModule();
+
+    const outlineFixture = createComponent(MatInputWithAppearanceAndLabel);
+
+    outlineFixture.componentInstance.labelContent = '';
+    outlineFixture.detectChanges();
+    outlineFixture.componentInstance.appearance = 'outline';
+    outlineFixture.detectChanges();
+    flush();
+    outlineFixture.detectChanges();
+
+    const outlineGap = outlineFixture.nativeElement.querySelector('.mat-form-field-outline-gap');
+
+    expect(parseInt(outlineGap.style.width)).toBe(0);
+  }));
+
 });
 
 describe('MatFormField default options', () => {
@@ -1594,13 +1613,14 @@ class MatInputWithAppearance {
 @Component({
   template: `
     <mat-form-field [appearance]="appearance">
-      <mat-label>Label</mat-label>
+      <mat-label>{{labelContent}}</mat-label>
       <input matInput>
     </mat-form-field>
   `
 })
 class MatInputWithAppearanceAndLabel {
   appearance: MatFormFieldAppearance;
+  labelContent = 'Label';
 }
 
 @Component({