feat(textfield): Limit notched outline max-width

PiperOrigin-RevId: 306891191

Author: patrickrodee

packages/mdc-notched-outline/_mixins.scss

@@ -250,6 +250,21 @@
  }
 }
 
+///
+/// Sets the max-width for the notch
+///
+/// @param {Number} $max-width Max-width for the notch
+///
+@mixin notch-max-width($max-width, $query: feature-targeting-functions.all()) {
+ $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+ :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
+ @include feature-targeting-mixins.targets($feat-structure) {
+ max-width: $max-width;
+ }
+ }
+}
+
 //
 // Private
 //

packages/mdc-textfield/_mixins.scss

@@ -1134,14 +1134,15 @@
  @include floating-label-mixins.shake-animation(text-field-outlined-leading-icon-rtl, $query: $query);
  }
 
+ $icon-padding: icon-variables.$leading-icon-padding-left + icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;
+ $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;
+ $left-spacing: $icon-padding - notched-outline-variables.$leading-width;
+
+ @include notched-outline-mixins.notch-max-width(calc(100% - #{$notch-truncation}), $query: $query);
+
  .mdc-floating-label {
  @include feature-targeting-mixins.targets($feat-structure) {
- $icon-padding: icon-variables.$leading-icon-padding-left + icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;
-
- @include rtl-mixins.reflexive-position(
- left,
- $icon-padding - notched-outline-variables.$leading-width
- );
+ @include rtl-mixins.reflexive-position(left, $left-spacing);
  }
  }
 }