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

Removes the outline gap in outlined form fields, if the label element doesn't have any content.
angular · Aug 22, 2018 · 3d4fc82 · 3d4fc82
1 parent 5727eac
commit 3d4fc82
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
@@ -444,7 +444,10 @@ export class MatFormField extends _MatFormFieldMixinBase
    * appearance.
    */
   updateOutlineGap() {
-    if (this.appearance !== 'outline') {
+    const labelEl = this._label ? this._label.nativeElement : null;
+
+    if (this.appearance !== 'outline' || !labelEl || !labelEl.children.length ||
+        !labelEl.textContent.trim()) {
       return;
     }
 
@@ -465,14 +468,14 @@ 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;
       }
       startWidth = labelStart - containerStart - outlineGapPadding;
-      gapWidth = labelWidth * floatingLabelScale + outlineGapPadding * 2;
+      gapWidth = labelWidth > 0 ? labelWidth * floatingLabelScale + outlineGapPadding * 2 : 0;
     }
 
     for (let i = 0; i < startEls.length; i++) {

diff --git a/src/lib/input/input.spec.ts b/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)).toBeFalsy();
+  }));
+
 });
 
 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({