fix(material-experimental/mdc-form-field): prevent label from jumping in outline notch

Author: devversion

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

@@ -114,4 +114,21 @@
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input {
     display: inline-block;
   }
+
+  // By default, MDC aligns the label using percentage. This will be overwritten based
+  // on whether a textarea is used. This is not possible in our implementation of the
+  // form-field because we do not know what type of form-field control is set up. Hence
+  // we always use a fixed position for the label. This does not have any implications.
+  .mat-mdc-text-field-wrapper .mdc-floating-label {
+    top: $mat-form-field-baseline;
+  }
+
+  // As mentioned in the override before, MDC aligns the label using percentage. This means that
+  // MDC tries to offset the label when the parent element changes in the notched-outline. For
+  // example, the outline stroke width changes on focus. Since we updated the label to use a fixed
+  // position, we don't need the vertical offsetting (that will shift the label incorrectly now).
+  // Note: Increased specificity needed here since MDC overwrites the padding on `:focus`.
+  .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch {
+    padding-top: 0;
+  }
 }

src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss

@@ -30,12 +30,4 @@
     // This brings it in line with other browsers.
     overflow: auto;
   }
-
-  // By default, MDC aligns the label using percentage. This will be overwritten based
-  // on whether a textarea is used. This is not possible in our implementation of the
-  // form-field because we do not know what type of form-field control is set up. Hence
-  // we always use a fixed position for the label. This does not have any implications.
-  .mat-mdc-text-field-wrapper .mdc-floating-label {
-    top: $mat-form-field-baseline;
-  }
 }