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

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

This allows the value to be shared across CSS & JS.

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

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

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

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

(cherry picked from commit 47dfcb3)

Author: mmalerba

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -88,7 +88,8 @@
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
   .mdc-floating-label--float-above {
     --mat-mdc-form-field-label-transform: translateY(
-            -#{mdc-textfield.get-outlined-label-position-y($height)}) scale(0.75);
+            -#{mdc-textfield.get-outlined-label-position-y($height)})
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
     transform: var(--mat-mdc-form-field-label-transform);
   }
 

src/material-experimental/mdc-form-field/_form-field-theme.scss

@@ -90,7 +90,8 @@
       // For the non-upgraded notch label (i.e. when rendered on the server), also
       // use the correct `body1` typography level.
       .mdc-floating-label--float-above {
-        font-size: mdc-typography.get-size(body1) * 0.75;
+        font-size: calc(#{
+            mdc-typography.get-size(body1)} * var(--mat-mdc-form-field-floating-label-scale, 0.75));
       }
       .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
         font-size: mdc-typography.get-size(body1);

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

@@ -35,8 +35,8 @@ import {
   encapsulation: ViewEncapsulation.None,
 })
 export class MatFormFieldNotchedOutline implements AfterViewInit {
-  /** Width of the notch. */
-  @Input('matFormFieldNotchedOutlineWidth') width: number = 0;
+  /** Width of the label (original scale) */
+  @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, 0.75) + ${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.scss

@@ -36,6 +36,9 @@
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.
 .mat-mdc-form-field {
+  // The scale to use for the form-field's label when its in the floating position.
+  --mat-mdc-form-field-floating-label-scale: 0.75;
+
   display: inline-flex;
   // This container contains the text-field and the subscript. The subscript
   // should be displayed below the text-field. Hence the column direction.

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

@@ -114,9 +114,6 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
  */
 const WRAPPER_HORIZONTAL_PADDING = 16;
 
-/** Amount by which to scale the label when the form field is focused. */
-const LABEL_SCALE = 0.75;
-
 /** Container for form controls that applies Material Design styling and behavior. */
 @Component({
   selector: 'mat-form-field',
@@ -270,8 +267,8 @@ export class MatFormField
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState = '';
 
-  /** Width of the outline notch. */
-  _outlineNotchWidth = 0;
+  /** Width of the label element (at scale=1). */
+  _labelWidth = 0;
 
   /** Gets the current form field control */
   get _control(): MatFormFieldControl<any> {
@@ -558,10 +555,7 @@ export class MatFormField
     if (!this._hasOutline() || !this._floatingLabel) {
       return;
     }
-    // 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() * LABEL_SCALE;
+    this._labelWidth = this._floatingLabel.getWidth();
   }
 
   /** Does any extra processing that is required when handling the hints. */