fixup! fix(material-experimental/mdc-form-field): use a CSS var for the floating label scale

Author: mmalerba

src/material-experimental/mdc-form-field/directives/notched-outline.ts

@@ -36,7 +36,7 @@ import {
 })
 export class MatFormFieldNotchedOutline implements AfterViewInit {
   /** Width of the notch. */
-  @Input('matFormFieldNotchedOutlineWidth') width: number = 0;
+  @Input('matFormFieldNotchedOutlineLabelWidth') labelWidth: number = 0;
 
   /** Whether the notch should be opened. */
   @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;
@@ -62,7 +62,9 @@ export class MatFormFieldNotchedOutline implements AfterViewInit {
   _getNotchWidth() {
     if (this.open) {
       const NOTCH_ELEMENT_PADDING = 8;
-      return `${this.width > 0 ? this.width + NOTCH_ELEMENT_PADDING : 0}px`;
+      return this.labelWidth > 0
+        ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale) + ${NOTCH_ELEMENT_PADDING}px)`
+        : '0px';
     }
 
     return null;

src/material-experimental/mdc-form-field/form-field.html

@@ -46,7 +46,7 @@
   <div class="mat-mdc-form-field-flex">
     <div *ngIf="_hasOutline()" matFormFieldNotchedOutline
          [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()"
-         [matFormFieldNotchedOutlineWidth]="_outlineNotchWidth">
+         [matFormFieldNotchedOutlineLabelWidth]="_labelWidth">
       <ng-template [ngIf]="!_forceDisplayInfixLabel()">
         <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
       </ng-template>

src/material-experimental/mdc-form-field/form-field.ts

@@ -268,7 +268,7 @@ export class MatFormField
   _subscriptAnimationState = '';
 
   /** Width of the outline notch. */
-  _outlineNotchWidth = 0;
+  _labelWidth = 0;
 
   /** Gets the current form field control */
   get _control(): MatFormFieldControl<any> {
@@ -282,7 +282,6 @@ export class MatFormField
   private _isFocused: boolean | null = null;
   private _explicitFormFieldControl: MatFormFieldControl<any>;
   private _needsOutlineLabelOffsetUpdateOnStable = false;
-  private _labelScale = 0;
 
   constructor(
     private _elementRef: ElementRef,
@@ -556,17 +555,7 @@ export class MatFormField
     if (!this._hasOutline() || !this._floatingLabel) {
       return;
     }
-    if (!this._labelScale) {
-      this._labelScale = Number(
-        getComputedStyle(this._elementRef.nativeElement).getPropertyValue(
-          '--mat-mdc-form-field-floating-label-scale',
-        ),
-      );
-    }
-    // The outline notch should be based on the label width, but needs to respect the scaling
-    // applied to the label if it actively floats. Since the label always floats when the notch
-    // is open, the MDC text-field floating label scaling is respected in notch width calculation.
-    this._outlineNotchWidth = this._floatingLabel.getWidth() * this._labelScale;
+    this._labelWidth = this._floatingLabel.getWidth();
   }
 
   /** Does any extra processing that is required when handling the hints. */