fix(material-experimental/mdc-form-field): replace !important with CSS var

Author: mmalerba

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

@@ -84,16 +84,11 @@
 
   // For the outline appearance, we re-create the active floating label transform. This is
   // necessary because the transform for docked floating labels can be updated to account for
-  // the width of prefix container. We need to re-create these styles with `!important` because
-  // the horizontal adjustment for the label is applied through inline styles, and we want to
-  // make sure that the label can still float as expected. It should be okay using `!important`
-  // because it's unlikely that developers commonly overwrite the floating label transform.
+  // the width of prefix container.
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
   .mdc-floating-label--float-above {
-    $outlined-label-floating-position-y: mdc-textfield.get-outlined-label-position-y($height);
-    // This transform has been extracted from the MDC text-field styles. We can't access it
-    // through a variable because MDC generates this label transform through a mixin.
-    transform: translateY(-$outlined-label-floating-position-y) scale(0.75) !important;
+    --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,13 +101,6 @@ 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`.
@@ -676,9 +669,8 @@ export class MatFormField
       ((iconPrefixContainer ? iconPrefixContainerWidth - WRAPPER_HORIZONTAL_PADDING : 0) +
         textPrefixContainerWidth);
 
-    // Update the transform the floating label to account for the prefix container. Note
-    // that we do not want to overwrite the default transform for docked floating labels.
-    floatingLabel.style.transform = `${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset}px)`;
+    // 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)`;
   }
 
   /** Checks whether the form field is attached to the DOM. */