feat(textfield): Parameterize border radius for text field

material-components · Oct 20, 2017 · be494d7 · be494d7
1 parent f91f269
commit be494d7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -14,6 +14,31 @@
 // limitations under the License.
 //
 
+@mixin mdc-text-field-box-corner-radius($top-left-radius, $top-right-radius: $top-left-radius) {
+  border-radius: $top-left-radius $top-right-radius 0 0;
+}
+
+@mixin mdc-text-field-textarea-corner-radius($radius) {
+  border-radius: $radius;
+
+  .mdc-textfield__label {
+    border-radius: $radius;
+  }
+
+  .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;
+    }
+  }
+}
+
 @mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {
@@ -35,11 +60,3 @@
     }
   }
 }
-
-@mixin mdc-text-field-corner-radius($position, $radius) {
-  border-#{$position}-radius: $radius;
-}
-
-@mixin mdc-text-field-corner-radius-all($radius) {
-  border-radius: $radius;
-}
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -49,3 +49,5 @@ $mdc-textarea-light-background: rgba(white, 1);
 $mdc-textarea-dark-background: rgba(48, 48, 48, 1);
 $mdc-textarea-disabled-background-on-light: rgba(249, 249, 249, 1);
 $mdc-textarea-disabled-background-on-dark: rgba(47, 47, 47, 1);
+
+$mdc-textfield-border-radius: 4px !default;
diff --git a/packages/mdc-textfield/mdc-textfield.scss b/packages/mdc-textfield/mdc-textfield.scss
@@ -163,9 +163,7 @@
 }
 
 .mdc-textfield--box {
-  @include mdc-text-field-corner-radius-all(0);
-  @include mdc-text-field-corner-radius(top-left, 4px);
-  @include mdc-text-field-corner-radius(top-right, 4px);
+  @include mdc-text-field-box-corner-radius($mdc-textfield-default-border-radius);
 
   display: inline-flex;
   position: relative;
@@ -179,13 +177,12 @@
 
   &::before,
   &::after {
-    @include mdc-text-field-corner-radius-all(50%);
-
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    border-radius: 50%;
     background-color: inherit;
     opacity: 0;
     pointer-events: none;
@@ -506,7 +503,7 @@
 }
 
 .mdc-textfield--textarea {
-  @include mdc-text-field-corner-radius-all(4px);
+  @include mdc-text-field-textarea-corner-radius($mdc-textfield-default-border-radius);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
@@ -516,15 +513,14 @@
   height: initial;
   transition: none;
   border: 1px solid $mdc-textarea-border-on-light;
+  overflow: hidden;
 
   @include mdc-theme-dark(".mdc-textfield") {
     border-color: $mdc-textarea-border-on-dark;
   }
 
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-textfield__input {
-    @include mdc-text-field-corner-radius-all(2px);
-
     padding: $padding-inset;
     padding-top: $padding-inset * 2;
     border: 1px solid transparent;
@@ -688,7 +684,7 @@
 
   &::before,
   &::after {
-    @include mdc-text-field-corner-radius-all(0);
+    border-radius: 0;
   }
 
   .mdc-textfield__input {