fix(material/form-field): remove hardcoded 16px label padding (#25383)

Author: mmalerba

src/material/form-field/_mdc-text-field-structure-overrides.scss

@@ -57,6 +57,9 @@
   // structure for our form-field in order to support arbitrary height input elements.
   .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
     padding-left: 0;
+    // Signal to the TypeScript label calculation code that the label should be offset 16px less
+    // due to resetting the padding above.
+    --mat-mdc-form-field-label-offset-x: -16px;
   }
   .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
     padding-right: 0;

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

@@ -114,12 +114,6 @@ const DEFAULT_SUBSCRIPT_SIZING: SubscriptSizing = 'fixed';
  */
 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`.
- */
-const WRAPPER_HORIZONTAL_PADDING = 16;
-
 /** Container for form controls that applies Material Design styling and behavior. */
 @Component({
   selector: 'mat-form-field',
@@ -669,19 +663,17 @@ export class MatFormField
     const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
     // If the directionality is RTL, the x-axis transform needs to be inverted. This
     // is because `transformX` does not change based on the page directionality.
-    const labelHorizontalOffset =
-      (this._dir.value === 'rtl' ? -1 : 1) *
-      // If there's an icon prefix, we subtract the default horizontal padding as we
-      // reset the horizontal padding in CSS too.
-      ((iconPrefixContainer ? iconPrefixContainerWidth - WRAPPER_HORIZONTAL_PADDING : 0) +
-        textPrefixContainerWidth);
+    const negate = this._dir.value === 'rtl' ? '-1' : '1';
+    const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
+    const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
+    const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;
 
     // 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
     // floating.
     floatingLabel.style.transform = `var(
         --mat-mdc-form-field-label-transform,
-        ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset}px
+        ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset})
     )`;
   }