correctly position and size the gap

Author: mmalerba

src/lib/form-field/form-field-outline.scss

@@ -40,31 +40,41 @@ $mat-form-field-outline-subscript-padding:
     left: 0;
     right: 0;
     pointer-events: none;
+  }
 
-    &::before,
-    &::after {
-      content: '';
-      width: $mat-form-field-outline-side-padding;
-      border: $mat-form-field-outline-width solid currentColor;
-      flex-grow: 1;
-    }
+  .mat-form-field-outline-start,
+  .mat-form-field-outline-end {
+    border: $mat-form-field-outline-width solid currentColor;
+    min-width: $mat-form-field-outline-border-radius;
+  }
 
-    &::before {
-      border-radius: $mat-form-field-outline-border-radius 0 0
-                     $mat-form-field-outline-border-radius;
-      border-right: none;
-    }
+  .mat-form-field-outline-start {
+    border-radius: $mat-form-field-outline-border-radius 0 0 $mat-form-field-outline-border-radius;
+    border-right-style: none;
 
-    &::after {
+    [dir="rtl"] & {
+      border-right-style: solid;
+      border-left-style: none;
       border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius
                      0;
-      border-left: none;
+    }
+  }
+
+  .mat-form-field-outline-end {
+    border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius 0;
+    border-left-style: none;
+    flex-grow: 1;
+
+    [dir="rtl"] & {
+      border-left-style: solid;
+      border-right-style: none;
+      border-radius: $mat-form-field-outline-border-radius 0 0
+                     $mat-form-field-outline-border-radius;
     }
   }
 
   .mat-form-field-outline-gap {
     border-bottom: $mat-form-field-outline-width solid currentColor;
-    width: 100px; // TODO(mmalerba): set size dynamically.
 
     &::before {
       content: '';
@@ -85,8 +95,8 @@ $mat-form-field-outline-subscript-padding:
   .mat-form-field-outline-thick {
     opacity: 0;
 
-    &::before,
-    &::after,
+    .mat-form-field-outline-start,
+    .mat-form-field-outline-end,
     .mat-form-field-outline-gap,
     .mat-form-field-outline-gap::before {
       border-width: $mat-form-field-outline-thick-width;

src/lib/form-field/form-field.html

@@ -64,10 +64,14 @@
   <!-- Outline used for  outline appearance. -->
   <ng-container *ngIf="appearance == 'outline'">
     <div class="mat-form-field-outline">
-      <div class="mat-form-field-outline-gap"></div>
+      <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
+      <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+      <div class="mat-form-field-outline-end"></div>
     </div>
     <div class="mat-form-field-outline mat-form-field-outline-thick">
-      <div class="mat-form-field-outline-gap"></div>
+      <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
+      <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+      <div class="mat-form-field-outline-end"></div>
     </div>
   </ng-container>
 

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

@@ -48,6 +48,12 @@ import {MatLabel} from './label';
 import {MatPlaceholder} from './placeholder';
 import {MatPrefix} from './prefix';
 import {MatSuffix} from './suffix';
+import {Directionality} from '@angular/cdk/bidi';
+
+
+let nextUniqueId = 0;
+const floatingLabelScale = 0.75;
+const outlineGapPadding = 5;
 
 
 // Boilerplate for applying mixins to MatFormField.
@@ -56,10 +62,8 @@ export class MatFormFieldBase {
   constructor(public _elementRef: ElementRef) { }
 }
 
-export const _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary');
-
 
-let nextUniqueId = 0;
+export const _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary');
 
 
 export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
@@ -118,7 +122,7 @@ export class MatFormField extends _MatFormFieldMixinBase
   private _labelOptions: LabelOptions;
 
   /** The form-field appearance style. */
-  @Input() appearance: MatFormFieldAppearance = 'outline';
+  @Input() appearance: MatFormFieldAppearance = 'legacy';
 
   /**
    * @deprecated Use `color` instead.
@@ -191,6 +195,10 @@ export class MatFormField extends _MatFormFieldMixinBase
   }
   private _floatLabel: FloatLabelType;
 
+  _outlineGapWidth = 0;
+
+  _outlineGapStart = 0;
+
   /** @deletion-target 7.0.0 */
   @ViewChild('underline') underlineRef: ElementRef;
 
@@ -208,7 +216,8 @@ export class MatFormField extends _MatFormFieldMixinBase
   constructor(
       public _elementRef: ElementRef,
       private _changeDetectorRef: ChangeDetectorRef,
-      @Optional() @Inject(MAT_LABEL_GLOBAL_OPTIONS) labelOptions: LabelOptions) {
+      @Optional() @Inject(MAT_LABEL_GLOBAL_OPTIONS) labelOptions: LabelOptions,
+      @Optional() private _dir: Directionality) {
     super(_elementRef);
 
     this._labelOptions = labelOptions ? labelOptions : {};
@@ -255,6 +264,11 @@ export class MatFormField extends _MatFormFieldMixinBase
       this._syncDescribedByIds();
       this._changeDetectorRef.markForCheck();
     });
+
+    Promise.resolve().then(() => {
+      this._updateOutlineGap();
+      this._changeDetectorRef.detectChanges();
+    });
   }
 
   ngAfterContentChecked() {
@@ -394,4 +408,32 @@ export class MatFormField extends _MatFormFieldMixinBase
       throw getMatFormFieldMissingControlError();
     }
   }
+
+  /**
+   * Updates the width and position of the gap in the outline. Only relevant for the outline
+   * appearance.
+   */
+  private _updateOutlineGap() {
+    if (this.appearance === 'outline' && this._label && this._label.nativeElement.children.length) {
+      const containerStart = this._getStartEnd(
+          this._connectionContainerRef.nativeElement.getBoundingClientRect());
+      const labelStart = this._getStartEnd(
+          this._label.nativeElement.children[0].getBoundingClientRect());
+      let labelWidth = 0;
+      for (const child of this._label.nativeElement.children) {
+        labelWidth += child.offsetWidth;
+      }
+      this._outlineGapStart = labelStart - containerStart - outlineGapPadding;
+      this._outlineGapWidth = labelWidth * floatingLabelScale + outlineGapPadding * 2;
+    } else {
+      this._outlineGapStart = 0;
+      this._outlineGapWidth = 0;
+    }
+    this._changeDetectorRef.markForCheck();
+  }
+
+  /** Gets the start end of the rect considering the current directionality. */
+  private _getStartEnd(rect: ClientRect): number {
+    return this._dir && this._dir.value === 'rtl' ? rect.right : rect.left;
+  }
 }