feat(text-field): Add density mixin to text field variants

packages/mdc-textfield/README.md

@@ -304,6 +304,8 @@ Mixin | Description
 `mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outlined and textarea variants.
 `mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outlined and textarea variants.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
+`mdc-text-field-density($density-scale)` | Sets density scale for default text field variant. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
+`mdc-text-field-height($height)` | Sets height of default text field variant.
 
 #### Mixins for Outlined Text Field
 
@@ -313,6 +315,10 @@ Mixin | Description
 `mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
 `mdc-text-field-outline-color($color)` | Customizes the border color of the outlined text field.
 `mdc-text-field-outline-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to outlined text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
+`mdc-text-field-outlined-density($density-scale)` | Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
+`mdc-text-field-outlined-height($height)` | Sets height of outlined text field variant (Excluding outlined text field with leading icon).
+`mdc-text-field-outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined text field with leading icon. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
+`mdc-text-field-outlined-with-leading-icon-height($height)` | Sets height of outlined text field with leading icon variant.
 
 #### Mixins for Textarea
 

packages/mdc-textfield/_mixins.scss

@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/density/functions";
 @import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
 @import "@material/notched-outline/mixins";
@@ -34,6 +35,54 @@
 @import "./variables";
 @import "./functions";
 
+///
+/// Sets density scale for default text field variant.
+///
+/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
+///     `-3`, `-2`, `-1`, `0`. Default is `0`.
+///
+@mixin mdc-text-field-density($density-scale) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-text-field-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  @include mdc-text-field-height($height);
+}
+
+///
+/// Sets density scale for outlined text field (Excluding outlined text field with leading icon).
+///
+/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
+///     `-3`, `-2`, `-1`, `0`. Default is `0`.
+///
+@mixin mdc-text-field-outlined-density($density-scale) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-text-field-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  @include mdc-text-field-outlined-height($height);
+}
+
+///
+/// Sets density scale for outlined text field with leading icon.
+///
+/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
+///     `-3`, `-2`, `-1`, `0`. Default is `0`.
+///
+@mixin mdc-text-field-outlined-with-leading-icon-density($density-scale) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-text-field-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  @include mdc-text-field-outlined-with-leading-icon-height($height);
+}
+
 ///
 /// Sets height of default text field variant.
 ///
@@ -45,18 +94,64 @@
 }
 
 ///
-/// Sets height of outlined text field variant.
+/// Sets height of outlined text field variant (Excluding outlined text field with leading icon).
 ///
 /// @param {Number} $height
 /// @access public
 ///
 @mixin mdc-text-field-outlined-height($height) {
-  $keyframe-name: text-field-outlined-#{$height};
+  $keyframe-suffix: text-field-outlined-#{$height};
   $positionY: mdc-text-field-get-outlined-label-position-y($height);
 
   @include mdc-notched-outline-floating-label-float-position-absolute($positionY);
-  @include mdc-floating-label-shake-keyframes($keyframe-name, $positionY);
-  @include mdc-floating-label-shake-animation($keyframe-name);
+
+  @at-root {
+    @include mdc-floating-label-shake-keyframes($keyframe-suffix, $positionY);
+  }
+
+  @include mdc-floating-label-shake-animation($keyframe-suffix);
+  @include mdc-text-field-height($height);
+}
+
+///
+/// Sets height of outlined text field with leading icon variant.
+///
+/// @param {Number} $height
+/// @access public
+///
+@mixin mdc-text-field-outlined-with-leading-icon-height($height) {
+  $keyframe-suffix: text-field-outlined-with-leading-icon-#{$height};
+  $positionY: mdc-text-field-get-outlined-label-position-y($height);
+
+  // For specificity
+  &.mdc-text-field--outlined {
+    @include mdc-notched-outline-floating-label-float-position-absolute($positionY, 32px);
+  }
+
+  @at-root {
+    @include mdc-floating-label-shake-keyframes(
+      $keyframe-suffix,
+      $positionY,
+      $mdc-text-field-outlined-with-leading-icon-label-position-x
+    );
+  }
+
+  @include mdc-floating-label-shake-animation($keyframe-suffix);
+
+  $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;
+
+  @at-root {
+    @include mdc-floating-label-shake-keyframes(
+      $keyframe-suffix-rtl,
+      $positionY,
+      -$mdc-text-field-outlined-with-leading-icon-label-position-x
+    );
+  }
+
+  @include mdc-rtl {
+    @include mdc-floating-label-shake-animation($keyframe-suffix);
+  }
+
   @include mdc-text-field-height($height);
 }
 

packages/mdc-textfield/_variables.scss

@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/density/variables";
 @import "@material/floating-label/variables";
 @import "@material/notched-outline/variables";
 
@@ -68,6 +69,16 @@ $mdc-textarea-disabled-background: rgba(249, 249, 249, 1) !default;
 
 $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-config: (
+  height: (
+    default: $mdc-text-field-height,
+    maximum: $mdc-text-field-maximum-height,
+    minimum: $mdc-text-field-minimum-height,
+  ),
+) !default;
 $mdc-text-field-label-position-y: $mdc-floating-label-position-y !default;
 $mdc-text-field-label-offset: 16px !default;
 $mdc-text-field-dense-label-position-y: 70% !default;

packages/mdc-textfield/icon/mdc-text-field-icon.scss

@@ -26,7 +26,8 @@
 .mdc-text-field--with-leading-icon .mdc-text-field__icon,
 .mdc-text-field--with-trailing-icon .mdc-text-field__icon {
   position: absolute;
-  bottom: 16px;
+  top: 50%;
+  transform: translateY(-50%);
   cursor: pointer;
 }
 

packages/mdc-textfield/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@material/animation": "^3.1.0",
     "@material/base": "^3.1.0",
+    "@material/density": "^0.0.0",
     "@material/dom": "^3.1.0",
     "@material/floating-label": "^3.2.0",
     "@material/line-ripple": "^3.1.0",

test/screenshot/golden.json

@@ -1791,20 +1791,36 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/18_06_17_850/spec/mdc-textfield/issues/4170.html.windows_ie_11.png"
     }
   },
-  "spec/mdc-textfield/mixins/height-invalid.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html?utm_source=golden_json",
+  "spec/mdc-textfield/mixins/density-invalid.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html.windows_chrome_76.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html.windows_firefox_67.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html.windows_ie_11.png"
     }
   },
-  "spec/mdc-textfield/mixins/height.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html?utm_source=golden_json",
+  "spec/mdc-textfield/mixins/density-leading-icon-invalid.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html.windows_chrome_76.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html.windows_firefox_67.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html.windows_ie_11.png"
+    }
+  },
+  "spec/mdc-textfield/mixins/density-leading-icon.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html.windows_ie_11.png"
+    }
+  },
+  "spec/mdc-textfield/mixins/density.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html.windows_ie_11.png"
     }
   },
   "spec/mdc-textfield/mixins/outline-shape-radius.html": {

test/screenshot/spec/mdc-textfield/fixture.scss

@@ -38,6 +38,10 @@
   @include test-cell-size(301, 121);
 }
 
+.test-cell--textfield-small {
+  @include test-cell-size(301, 81);
+}
+
 .test-cell--textarea {
   @include test-cell-size(301, 181);
 }
@@ -62,10 +66,18 @@
   }
 }
 
-.custom-height-text-field--default {
-  @include mdc-text-field-height(40px);
+.custom-density-text-field--default {
+  @include mdc-text-field-density(-4);
+}
+
+.custom-density-text-field--outlined {
+  @include mdc-text-field-outlined-density(-4);
+}
+
+.custom-density-text-field-leading-icon--default {
+  @include mdc-text-field-density(-4);
 }
 
-.custom-height-text-field--outlined {
-  @include mdc-text-field-outlined-height(40px);
+.custom-density-text-field-leading-icon--outlined {
+  @include mdc-text-field-outlined-with-leading-icon-density(-4);
 }

test/screenshot/spec/mdc-textfield/mixins/height-invalid.html → test/screenshot/spec/mdc-textfield/mixins/density-invalid.html

@@ -23,7 +23,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Invalid Text Field Element with Custom Height - MDC Web Screenshot Test</title>
+    <title>Invalid Text Field Element with Custom Density - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.textfield.css">
     <link rel="stylesheet" href="../../../out/mdc.typography.css">
@@ -37,15 +37,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field custom-height-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
+          <div class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined custom-height-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
+          <div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -58,15 +58,15 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field custom-height-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
+          <div class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined custom-height-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
+          <div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>