feat(textfield): Shorten check for textarea border radius, README upd…

…ates
material-components · Oct 20, 2017 · b861824 · b861824
1 parent 36b7010
commit b861824
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -287,11 +287,11 @@ of the variant, you can override $mdc-text-field-border-radius in Sass.
 
 #### `mdc-text-field-box-corner-radius($radius)`
 
-This mixin is provided for customizing the border radius for Text Field Box.
+This mixin customizes the border radius for a Text Field Box.
 
 #### `mdc-text-field-textarea-corner-radius($radius)`
 
-This mixin is provided for customizing the border radius for a Text Field `textarea`.
+This mixin customizes the border radius for a Text Field `textarea`.
 
 ### Using the JS component
 

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -22,20 +22,18 @@
   border-radius: $radius;
 
   .mdc-textfield__label {
-    border-radius: $radius;
+    // Bottom corners are square to prevent weird edge cases
+    // where text would be visible outside of the curve.
+    border-radius: $radius $radius 0 0;
   }
 
   .mdc-textfield__input {
     // The input element is required to have 2 pixels shaved off
     // of the radius of its parent. This prevents an ugly space of
     // background between the two borders in each corner when the
     // textarea is focused. This also means we need to guard against
-    // invalid output with @if/@else directives.
-    @if ($radius >= 2) {
-      border-radius: $radius - 2;
-    } @else {
-      border-radius: 0;
-    }
+    // invalid output.
+    border-radius: max($radius - 2, 0);
   }
 }