fix(text-field): Updated shape mixins to set density scale (#5207)

material-components · Nov 1, 2019 · 719b57e · 719b57e
1 parent bccfc94
commit 719b57e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -178,15 +178,21 @@
 ///     percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
 /// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
 ///
-@mixin mdc-text-field-shape-radius($radius, $text-field-height: $mdc-text-field-height, $rtl-reflexive: false) {
+@mixin mdc-text-field-shape-radius($radius, $density-scale: $mdc-text-field-density-scale, $rtl-reflexive: false) {
   @if length($radius) > 2 {
     @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
   }
 
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-text-field-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
   $masked-radius: mdc-shape-mask-radius($radius, 1 1 0 0);
 
   @include mdc-shape-radius(
-    mdc-shape-resolve-percentage-radius($text-field-height, $masked-radius),
+    mdc-shape-resolve-percentage-radius($height, $masked-radius),
     $rtl-reflexive
   );
 }
@@ -364,8 +370,17 @@
 ///     percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
 /// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
 ///
-@mixin mdc-text-field-outline-shape-radius($radius, $text-field-height: $mdc-text-field-height, $rtl-reflexive: false) {
-  $resolved-radius: nth(mdc-shape-resolve-percentage-radius($text-field-height, mdc-shape-prop-value($radius)), 1);
+@mixin mdc-text-field-outline-shape-radius(
+  $radius,
+  $density-scale: $mdc-text-field-density-scale,
+  $rtl-reflexive: false) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-text-field-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  $resolved-radius: nth(mdc-shape-resolve-percentage-radius($height, mdc-shape-prop-value($radius)), 1);
 
   @if (length(mdc-shape-prop-value($radius)) > 1) {
     // stylelint-disable max-line-length

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -71,7 +71,7 @@ $mdc-text-field-outlined-stroke-width: 2px !default;
 $mdc-text-field-height: 56px !default;
 $mdc-text-field-minimum-height: 40px !default;
 $mdc-text-field-maximum-height: $mdc-text-field-height !default;
-$mdc-text-field-density-default-scale: $mdc-density-default-scale !default;
+$mdc-text-field-density-scale: $mdc-density-default-scale !default;
 $mdc-text-field-density-config: (
   height: (
     default: $mdc-text-field-height,