feat(textfield): Limit notched outline max-width

PiperOrigin-RevId: 306891191
material-components · Apr 16, 2020 · 0ab62a6 · 0ab62a6
1 parent ce6cb70
commit 0ab62a6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/packages/mdc-notched-outline/_mixins.scss b/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
 //

diff --git a/packages/mdc-textfield/_mixins.scss b/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);
     }
   }
 }