feat(textfield): Add mixin allowing customization of border radii (#1446

)

packages/mdc-textfield/README.md

@@ -279,6 +279,20 @@ text, validation, and dense UI.
 </div>
 ```
 
+### Sass Mixins
+
+To customize a Filled Text Field or a Text Field `textarea`'s border radius, you can use the following mixins.
+Alternatively, if you would like to change the border radius for every instance of MDC Text Field uniformly, regardless
+of the variant, you can override $mdc-text-field-border-radius in Sass.
+
+#### `mdc-text-field-box-corner-radius($radius)`
+
+This mixin customizes the border radius for a Text Field Box.
+
+#### `mdc-text-field-textarea-corner-radius($radius)`
+
+This mixin customizes the border radius for a Text Field `textarea`.
+
 ### Using the JS component
 
 MDC Textfield ships with Component / Foundation classes which are used to provide a full-fidelity

packages/mdc-textfield/_mixins.scss

@@ -14,6 +14,29 @@
 // limitations under the License.
 //
 
+@mixin mdc-text-field-box-corner-radius($radius) {
+  border-radius: $radius $radius 0 0;
+}
+
+@mixin mdc-text-field-textarea-corner-radius($radius) {
+  border-radius: $radius;
+
+  .mdc-textfield__label {
+    // 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.
+    border-radius: max($radius - 2, 0);
+  }
+}
+
 @mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {

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-text-field-border-radius: 4px !default;

packages/mdc-textfield/mdc-textfield.scss

@@ -163,10 +163,11 @@
 }
 
 .mdc-textfield--box {
+  @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
+
   display: inline-flex;
   position: relative;
   height: 56px;
-  border-radius: 4px 4px 0 0;
   background-color: $mdc-textfield-box-background;
   overflow: hidden;
 
@@ -502,6 +503,8 @@
 }
 
 .mdc-textfield--textarea {
+  @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
+
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
   $label-offset-x: $padding-inset;
@@ -510,7 +513,7 @@
   height: initial;
   transition: none;
   border: 1px solid $mdc-textarea-border-on-light;
-  border-radius: 4px;
+  overflow: hidden;
 
   @include mdc-theme-dark(".mdc-textfield") {
     border-color: $mdc-textarea-border-on-dark;
@@ -521,7 +524,6 @@
     padding: $padding-inset;
     padding-top: $padding-inset * 2;
     border: 1px solid transparent;
-    border-radius: 2px;
 
     &:focus {
       @include mdc-theme-prop(border-color, primary);