refactor(material-experimental/mdc-form-field): disambiguate mixin names from non-mdc form-field

Mixins like `_mat-form-field-density` also exist in the non-mdc
form-field implementation. Even though there might be no density styles
there, the actual MDC-based from-field will loose its default density
styles and render incorrectly.

Author: devversion

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

@@ -5,7 +5,7 @@
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
 // We need to apply spacing to the infix container because we removed the input padding
 // provided by MDC in order to support arbitrary form-field controls.
-@mixin _mat-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
+@mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
   .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
     padding-top: map_get($with-label-padding, top);
     padding-bottom: map_get($with-label-padding, bottom);
@@ -21,7 +21,7 @@
 // Mixin that sets the vertical spacing for the infix container of outlined form fields.
 // We need to apply spacing to the infix container because we removed the input padding
 // provided by MDC in order to support arbitrary form-field controls.
-@mixin _mat-form-field-infix-vertical-spacing-outlined($padding) {
+@mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) {
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
     padding-top: map_get($padding, top);
     padding-bottom: map_get($padding, bottom);
@@ -35,7 +35,7 @@
 // provide spacing that makes arbitrary controls align as specified in the Material Design
 // specification. In order to support density, we need to adjust the vertical spacing to be
 // based on the density scale.
-@mixin _mat-form-field-density($config-or-theme) {
+@mixin _mat-mdc-form-field-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
   // Height of the form field that is based on the current density scale.
   $height: mdc-density-prop-value(
@@ -96,13 +96,14 @@
   // aligned as if there is no label. This is done similarly in MDC and is specified in the
   // Material Design specification. Outline form fields position the control as if there is no
   // label. This is because the label overflows the form-field and doesn't need space at the top.
-  @include _mat-form-field-infix-vertical-spacing-outlined($no-label-padding);
+  @include _mat-mdc-form-field-infix-vertical-spacing-outlined($no-label-padding);
 
   // MDC hides labels for filled form fields when the form field height decreases. We match
   // this behavior in our custom density styles.
   @if $hide-filled-floating-label {
     // Update the spacing for filled form fields to account for the hidden floating label.
-    @include _mat-form-field-infix-vertical-spacing-filled($no-label-padding, $no-label-padding);
+    @include _mat-mdc-form-field-infix-vertical-spacing-filled(
+          $no-label-padding, $no-label-padding);
     .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label {
         display: none;
     }
@@ -111,6 +112,7 @@
     // By default, filled form fields align their controls differently based on whether there
     // is a label or not. MDC does this too, but we cannot rely on their styles as we support
     // arbitrary form field controls and MDC only applies their spacing to the `<input>` elements.
-    @include _mat-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding);
+    @include _mat-mdc-form-field-infix-vertical-spacing-filled(
+          $with-label-padding, $no-label-padding);
   }
 }

src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss

@@ -9,14 +9,14 @@
 // runtime code for launching interaction ripples at pointer location. This is not needed
 // for the text-field, so we create our own minimal focus overlay styles. Our focus overlay
 // uses the exact same logic to compute the colors as in the default MDC text-field ripples.
-@mixin _mat-form-field-focus-overlay() {
+@mixin _mat-mdc-form-field-focus-overlay() {
   .mat-mdc-form-field-focus-overlay {
     @include mat-fill;
     opacity: 0;
   }
 }
 
-@mixin _mat-form-field-focus-overlay-color() {
+@mixin _mat-mdc-form-field-focus-overlay-color() {
   $focus-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, focus);
   $hover-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, hover);
 

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -10,7 +10,7 @@ $mat-form-field-select-arrow-height: 5px;
 $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
 
 // Mixin that creates styles for native select controls in a form-field.
-@mixin _mat-form-field-native-select() {
+@mixin _mat-mdc-form-field-native-select() {
   // Remove the native select down arrow and ensure that the native appearance
   // does not conflict with the form-field. e.g. Focus indication of the native
   // select is undesired since we handle focus as part of the form-field.
@@ -90,7 +90,7 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
   }
 }
 
-@mixin _mat-form-field-native-select-color($config) {
+@mixin _mat-mdc-form-field-native-select-color($config) {
   select.mat-mdc-input-element {
     // On dark themes we set the native `select` color to some shade of white,
     // however the color propagates to all of the `option` elements, which are

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

@@ -1,7 +1,7 @@
 @import 'form-field-sizing';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin _mat-form-field-subscript() {
+@mixin _mat-mdc-form-field-subscript() {
   // Wrapper for the hints and error messages.
   .mat-mdc-form-field-subscript-wrapper {
     box-sizing: border-box;
@@ -34,14 +34,14 @@
   }
 }
 
-@mixin _mat-form-field-subscript-color() {
+@mixin _mat-mdc-form-field-subscript-color() {
   // MDC does not have built-in error treatment.
   .mat-mdc-form-field-error {
     @include mdc-theme-prop(color, $mdc-text-field-error);
   }
 }
 
-@mixin _mat-form-field-subscript-typography($config-or-theme) {
+@mixin _mat-mdc-form-field-subscript-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);

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

@@ -43,9 +43,9 @@
       @include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
       @include mdc-notched-outline-core-styles($query: $mat-theme-styles-query);
       @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query);
-      @include _mat-form-field-subscript-color();
-      @include _mat-form-field-focus-overlay-color();
-      @include _mat-form-field-native-select-color($config);
+      @include _mat-mdc-form-field-subscript-color();
+      @include _mat-mdc-form-field-focus-overlay-color();
+      @include _mat-mdc-form-field-native-select-color($config);
 
       .mat-mdc-form-field.mat-accent {
         @include _mdc-text-field-color-styles(secondary);
@@ -65,7 +65,7 @@
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
     @include mdc-notched-outline-core-styles($query: $mat-typography-styles-query);
     @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query);
-    @include _mat-form-field-subscript-typography($config);
+    @include _mat-mdc-form-field-subscript-typography($config);
 
     .mat-mdc-form-field {
       @include mat-typography-level-to-styles($config, input);
@@ -75,7 +75,7 @@
 
 @mixin mat-mdc-form-field-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  @include _mat-form-field-density($density-scale);
+  @include _mat-mdc-form-field-density($density-scale);
 }
 
 @mixin mat-mdc-form-field-theme($theme-or-color-config) {

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

@@ -18,9 +18,9 @@
 @include _mat-mdc-text-field-structure-overrides();
 
 // Include the subscript, focus-overlay and native select styles.
-@include _mat-form-field-subscript();
-@include _mat-form-field-focus-overlay();
-@include _mat-form-field-native-select();
+@include _mat-mdc-form-field-subscript();
+@include _mat-mdc-form-field-focus-overlay();
+@include _mat-mdc-form-field-native-select();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.