fix(material-experimetal/mdc-form-field): account for breaking change…

…s in MDC (#18795)

In material-components/material-components-web@8639c26 MDC reworked how their heights and paddings are set up, causing a compilation error on our end. These changes account for the new setup.

(cherry picked from commit b2e8691)

package.json

@@ -55,7 +55,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "6.0.0-canary.17b9699c4.0",
+    "material-components-web": "6.0.0-canary.d5808057f.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

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

@@ -27,14 +27,15 @@
     border: none;
   }
 
-  // Reset the padding that MDC sets on native input elements. We cannot rely on this
-  // spacing as we support arbitrary form-field controls which aren't necessarily matching
-  // the "mdc-text-field__input" class. Note: We need the first selector to overwrite the
-  // default no-label MDC padding styles which are set with a very high specificity.
+  // Reset the height that MDC sets on native input elements. We cannot rely on their
+  // fixed height as we handle vertical spacing differently. MDC sets a fixed height for
+  // inputs and modifies the baseline so that the textfield matches the spec. This does
+  // not work for us since we support arbitrary form field controls which don't necessarily
+  // use an `input` element. We organize the vertical spacing on the infix container.
   .mdc-text-field--no-label:not(.mdc-text-field--textarea)
   .mat-mdc-input-element.mdc-text-field__input,
   .mat-mdc-text-field-wrapper .mat-mdc-input-element {
-    padding: 0;
+    height: auto;
   }
 
   // MDC adds vertical spacing to inputs. We removed this spacing and intend to add it
@@ -77,12 +78,6 @@
     opacity: 1;
   }
 
-  // We removed the horizontal inset on input elements, but need to re-add the spacing to
-  // the actual form-field flex container that contains the prefixes, suffixes and infix.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
-    padding: 0 $mdc-text-field-input-padding;
-  }
-
   // Since we moved the horizontal spacing from the input to the form-field flex container
   // and the MDC floating label tries to account for the horizontal spacing, we need to reset
   // the shifting since there is no padding the label needs to account for. Note that we do not