fix(material-experimental/mdc-form-field): fix notch visual artifact (#25201)

* fix(material-experimental/mdc-form-field): fix notch visual artifact

* fixup! fix(material-experimental/mdc-form-field): fix notch visual artifact

* fixup! fix(material-experimental/mdc-form-field): fix notch visual artifact

(cherry picked from commit 63aad54)

Author: mmalerba

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

@@ -58,6 +58,29 @@
       .mat-mdc-form-field.mat-warn {
         @include _color-styles(error);
       }
+
+      // This fixes an issue where the notch appears to be thicker than the rest of the outline when
+      // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
+      // that arises from a combination of the fact that the notch contains text, while the leading
+      // and trailing outline do not, combined with the fact that the border is semi-transparent.
+      // Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
+      // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
+      // (hover, focus, etc.)
+      // TODO(mmalerba): port this fix into MDC
+      .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+        &.mat-mdc-form-field .mdc-notched-outline__notch {
+          border-left: 1px solid transparent;
+        }
+      }
+
+      [dir='rtl'] {
+        .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+          &.mat-mdc-form-field .mdc-notched-outline__notch {
+            border-left: none;
+            border-right: 1px solid transparent;
+          }
+        }
+      }
     }
   }
 }

src/material-experimental/mdc-form-field/directives/notched-outline.ts

@@ -62,8 +62,11 @@ export class MatFormFieldNotchedOutline implements AfterViewInit {
   _getNotchWidth() {
     if (this.open) {
       const NOTCH_ELEMENT_PADDING = 8;
+      const NOTCH_ELEMENT_BORDER = 1;
       return this.labelWidth > 0
-        ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${NOTCH_ELEMENT_PADDING}px)`
+        ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${
+            NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER
+          }px)`
         : '0px';
     }
 

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

@@ -122,6 +122,21 @@
   box-sizing: border-box;
 }
 
+// In the form-field theme, we add a 1px left margin to the notch to fix a rendering bug in Chrome.
+// Here we apply negative margin to offset the effect on the layout and a clip-path to ensure the
+// left border is completely hidden. (Though the border is transparent, it still creates a triangle
+// shaped artifact where it meets the top and bottom borders.)
+.mat-mdc-form-field .mdc-notched-outline__notch {
+  margin-left: -1px;
+  @include mat.private-clip-path(inset(-9em -9em -9em 1px));
+
+  [dir='rtl'] & {
+    margin-left: 0;
+    margin-right: -1px;
+    @include mat.private-clip-path(inset(-9em 1px -9em -9em));
+  }
+}
+
 // In order to make it possible for developers to disable animations for form-fields,
 // we only activate the animation styles if animations are not explicitly disabled.
 .mat-mdc-form-field:not(.mat-form-field-no-animations) {

src/material/_index.scss

@@ -21,7 +21,7 @@
   @forward './core/style/layout-common' as private-* show private-fill;
 @forward './core/style/private' show private-theme-elevation, private-animation-noop;
 @forward './core/style/vendor-prefixes' as private-* show private-user-select,
-  private-position-sticky, private-color-adjust;
+  private-position-sticky, private-color-adjust, private-clip-path;
 @forward './core/theming/palette' as private-* show $private-dark-primary-text,
   $private-dark-disabled-text;
 @forward './core/style/variables' as private-* show $private-swift-ease-in-duration,

src/material/core/style/_vendor-prefixes.scss

@@ -38,4 +38,9 @@
   -webkit-background-clip: $value;
   background-clip: $value;
 }
+
+@mixin clip-path($value) {
+  -webkit-clip-path: $value;
+  clip-path: $value;
+}
 // stylelint-enable