From a12101d6d7d44a5add3d7e3301fc721dfa98ffc9 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Mon, 16 Sep 2019 11:21:05 -0400 Subject: [PATCH] feat(text-field): Add density mixin to text field variants (#5066) --- packages/mdc-textfield/README.md | 6 + packages/mdc-textfield/_mixins.scss | 103 +++++++++++++++++- packages/mdc-textfield/_variables.scss | 11 ++ .../icon/mdc-text-field-icon.scss | 3 +- packages/mdc-textfield/package.json | 1 + test/screenshot/golden.json | 36 ++++-- .../spec/mdc-textfield/fixture.scss | 20 +++- ...ight-invalid.html => density-invalid.html} | 10 +- .../mixins/density-leading-icon-invalid.html | 97 +++++++++++++++++ .../mixins/density-leading-icon.html | 95 ++++++++++++++++ .../mixins/{height.html => density.html} | 10 +- 11 files changed, 363 insertions(+), 29 deletions(-) rename test/screenshot/spec/mdc-textfield/mixins/{height-invalid.html => density-invalid.html} (89%) create mode 100644 test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html create mode 100644 test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html rename test/screenshot/spec/mdc-textfield/mixins/{height.html => density.html} (94%) diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md index f111b8c240f..ebcb6026932 100644 --- a/packages/mdc-textfield/README.md +++ b/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 diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index 6c8d5250b17..3e680b0ccc8 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/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); } diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss index f0852a578c3..36b379a6b61 100644 --- a/packages/mdc-textfield/_variables.scss +++ b/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; diff --git a/packages/mdc-textfield/icon/mdc-text-field-icon.scss b/packages/mdc-textfield/icon/mdc-text-field-icon.scss index 4aa02bb21f1..63298c5ee29 100644 --- a/packages/mdc-textfield/icon/mdc-text-field-icon.scss +++ b/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; } diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json index 14fe6538af2..a2b72c8f759 100644 --- a/packages/mdc-textfield/package.json +++ b/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", diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 716bc39bd94..b09a0dc18b0 100644 --- a/test/screenshot/golden.json +++ b/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": { diff --git a/test/screenshot/spec/mdc-textfield/fixture.scss b/test/screenshot/spec/mdc-textfield/fixture.scss index 46f413b76e3..32c2f4e5a03 100644 --- a/test/screenshot/spec/mdc-textfield/fixture.scss +++ b/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); } diff --git a/test/screenshot/spec/mdc-textfield/mixins/height-invalid.html b/test/screenshot/spec/mdc-textfield/mixins/density-invalid.html similarity index 89% rename from test/screenshot/spec/mdc-textfield/mixins/height-invalid.html rename to test/screenshot/spec/mdc-textfield/mixins/density-invalid.html index ca8b55e6b6c..40cd22ea72b 100644 --- a/test/screenshot/spec/mdc-textfield/mixins/height-invalid.html +++ b/test/screenshot/spec/mdc-textfield/mixins/density-invalid.html @@ -23,7 +23,7 @@ - Invalid Text Field Element with Custom Height - MDC Web Screenshot Test + Invalid Text Field Element with Custom Density - MDC Web Screenshot Test @@ -37,7 +37,7 @@
-
+
@@ -45,7 +45,7 @@
-
+
@@ -58,7 +58,7 @@
-
+
@@ -66,7 +66,7 @@
-
+
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html new file mode 100644 index 00000000000..292d356ae37 --- /dev/null +++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html @@ -0,0 +1,97 @@ + + + + + + Text Field Leading Icon Invalid with Custom Density - MDC Web Screenshot Test + + + + + + + + +
+
+ +
+
+ event + + +
+
+
+ +
+
+ event + +
+
+
+ +
+
+
+
+
+ +
+
+ event + + +
+
+
+ +
+
+ event + +
+
+
+ +
+
+
+
+
+ +
+
+ + + + + + + + + + diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html new file mode 100644 index 00000000000..98ee5febee7 --- /dev/null +++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html @@ -0,0 +1,95 @@ + + + + + + Text Field Leading Icon Variant with Custom Density - MDC Web Screenshot Test + + + + + + + + +
+
+ +
+
+ event + + +
+
+
+ +
+
+ event + +
+
+
+ +
+
+
+
+
+ +
+
+ event + + +
+
+
+ +
+
+ event + +
+
+
+ +
+
+
+
+
+ +
+
+ + + + + + + + + + diff --git a/test/screenshot/spec/mdc-textfield/mixins/height.html b/test/screenshot/spec/mdc-textfield/mixins/density.html similarity index 94% rename from test/screenshot/spec/mdc-textfield/mixins/height.html rename to test/screenshot/spec/mdc-textfield/mixins/density.html index 675a3f2fe8e..a85af9f70df 100644 --- a/test/screenshot/spec/mdc-textfield/mixins/height.html +++ b/test/screenshot/spec/mdc-textfield/mixins/density.html @@ -23,7 +23,7 @@ - Height Mixin for Text Field - MDC Web Screenshot Test + Density Mixin for Text Field - MDC Web Screenshot Test @@ -36,7 +36,7 @@
-
+
@@ -48,7 +48,7 @@
-
+
@@ -65,7 +65,7 @@
-
+
@@ -77,7 +77,7 @@
-
+