fix(material-experimental/mdc-form-field): address feedback

Author: mmalerba

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

@@ -87,8 +87,8 @@
   // the width of prefix container.
   .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);
+    --mat-mdc-form-field-label-transform: translateY(
+            -#{mdc-textfield.get-outlined-label-position-y($height)}) scale(0.75);
   }
 
   // Add vertical spacing to the infix to ensure that outlined form fields have their controls

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

@@ -101,6 +101,13 @@ const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
 /** Default way that the subscript element height is set. */
 const DEFAULT_SUBSCRIPT_SIZING: SubscriptSizing = 'fixed';
 
+/**
+ * Default transform for docked floating labels in a MDC text-field. This value has been
+ * extracted from the MDC text-field styles because we programmatically modify the docked
+ * label transform, but do not want to accidentally discard the default label transform.
+ */
+const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
+
 /**
  * Horizontal padding in pixels used by the MDC for the wrapper containing infix.
  * This value is extracted from MDC's Sass variables. See `$padding-horizontal`.
@@ -669,8 +676,13 @@ export class MatFormField
       ((iconPrefixContainer ? iconPrefixContainerWidth - WRAPPER_HORIZONTAL_PADDING : 0) +
         textPrefixContainerWidth);
 
-    // Update the transform x of the floating label to account for the prefix container.
-    floatingLabel.style.transform = `var(--mat-mdc-form-field-label-transform, translateX(${labelHorizontalOffset}px)`;
+    // Update the translateX of the floating label to account for the prefix container,
+    // but allow the CSS to override this setting via a CSS variable when the label is
+    // docked.
+    floatingLabel.style.transform = `var(
+        --mat-mdc-form-field-label-transform,
+        ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset}px
+    )`;
   }
 
   /** Checks whether the form field is attached to the DOM. */