From 7c9793b93d9065ccf90dd589b0bb6b59cc9e7214 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 13 Mar 2019 15:43:15 +0000 Subject: [PATCH] fix(text-field): Fix for input alignment in textfield with trailing icon (#4478) (cherry picked from commit b9c5fc6c684d82f63d007761214edf3ca21f99d4) --- packages/mdc-textfield/_mixins.scss | 12 +++---- packages/mdc-textfield/_variables.scss | 3 +- packages/mdc-textfield/icon/_mixins.scss | 6 ++-- test/screenshot/golden.json | 40 ++++++++++++------------ 4 files changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index 0134f968728..dd46e4ae73d 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -349,7 +349,7 @@ // Icons @mixin mdc-text-field-with-leading-icon_ { - @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding); + @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding); .mdc-floating-label { @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding); @@ -357,7 +357,7 @@ } @mixin mdc-text-field-dense-with-leading-icon_ { - @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding); + @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding); .mdc-floating-label { @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding); @@ -365,7 +365,7 @@ } @mixin mdc-text-field-outlined-with-leading-icon_ { - @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding); + @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding); @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 32px); @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon); @@ -392,16 +392,16 @@ } @mixin mdc-text-field-with-trailing-icon_ { - @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding); + @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding); // Outlined uses 16px for text alignment when using a trailing icon. &.mdc-text-field--outlined { - @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding); + @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding); } } @mixin mdc-text-field-dense-with-trailing-icon_ { - @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding); + @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding); } @mixin mdc-text-field-with-both-icons_ { diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss index 2ed95d312d2..aef3b97f623 100644 --- a/packages/mdc-textfield/_variables.scss +++ b/packages/mdc-textfield/_variables.scss @@ -62,5 +62,6 @@ $mdc-text-field-outlined-dense-label-position-y: 120% !default; $mdc-text-field-outlined-with-leading-icon-label-position-x: 0 !default; $mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px !default; $mdc-text-field-textarea-label-position-y: 130% !default; -$mdc-text-field-helper-line-padding: 16px; +$mdc-text-field-helper-line-padding: 16px !default; +$mdc-text-field-input-padding: 16px !default; // Note that the scale factor is an eyeballed approximation of what's shown in the mocks. diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss index e64c34a2c90..7503a8bcfde 100644 --- a/packages/mdc-textfield/icon/_mixins.scss +++ b/packages/mdc-textfield/icon/_mixins.scss @@ -30,7 +30,7 @@ // Private mixins -@mixin mdc-text-field-icon-horizontal-position_($position-property, $position, $padding) { +@mixin mdc-text-field-icon-horizontal-position_($position-property, $position, $padding, $input-padding) { .mdc-text-field__icon { @include mdc-rtl-reflexive-position($position-property, $position); } @@ -38,11 +38,11 @@ // Move the input's position, to allow room for the icon @if ($position-property == left) { .mdc-text-field__input { - @include mdc-rtl-reflexive-property(padding, $padding /* left-value */, $position /* right-value */); + @include mdc-rtl-reflexive-property(padding, $padding /* left-value */, $input-padding /* right-value */); } } @else { .mdc-text-field__input { - @include mdc-rtl-reflexive-property(padding, $position /* left-value */, $padding /* right-value */); + @include mdc-rtl-reflexive-property(padding, $input-padding /* left-value */, $padding /* right-value */); } } } diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index de8f1818bb9..755a6e94f4b 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -1272,11 +1272,11 @@ } }, "spec/mdc-textfield/classes/baseline-trailing-icon.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/baseline-trailing-icon.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/baseline-trailing-icon.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/baseline-trailing-icon.html.windows_chrome_71.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/baseline-trailing-icon.html.windows_firefox_64.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/baseline-trailing-icon.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/baseline-trailing-icon.html.windows_chrome_72.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/baseline-trailing-icon.html.windows_firefox_65.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/baseline-trailing-icon.html.windows_ie_11.png" } }, "spec/mdc-textfield/classes/baseline-without-label.html": { @@ -1344,11 +1344,11 @@ } }, "spec/mdc-textfield/classes/disabled-trailing-icon.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/disabled-trailing-icon.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/disabled-trailing-icon.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/disabled-trailing-icon.html.windows_chrome_71.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/disabled-trailing-icon.html.windows_firefox_64.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/disabled-trailing-icon.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/disabled-trailing-icon.html.windows_chrome_72.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/disabled-trailing-icon.html.windows_firefox_65.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/disabled-trailing-icon.html.windows_ie_11.png" } }, "spec/mdc-textfield/classes/disabled.html": { @@ -1416,11 +1416,11 @@ } }, "spec/mdc-textfield/classes/focused-trailing-icon.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/focused-trailing-icon.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/focused-trailing-icon.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/focused-trailing-icon.html.windows_chrome_71.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/focused-trailing-icon.html.windows_firefox_64.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/focused-trailing-icon.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/focused-trailing-icon.html.windows_chrome_72.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/focused-trailing-icon.html.windows_firefox_65.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/focused-trailing-icon.html.windows_ie_11.png" } }, "spec/mdc-textfield/classes/focused.html": { @@ -1488,11 +1488,11 @@ } }, "spec/mdc-textfield/classes/invalid-focused-trailing-icon.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html.windows_chrome_71.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html.windows_firefox_64.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html.windows_chrome_72.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html.windows_firefox_65.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html.windows_ie_11.png" } }, "spec/mdc-textfield/classes/invalid-focused.html": { @@ -1552,11 +1552,11 @@ } }, "spec/mdc-textfield/classes/invalid-trailing-icon.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-trailing-icon.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-trailing-icon.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-trailing-icon.html.windows_chrome_71.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-trailing-icon.html.windows_firefox_64.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/31/18_07_04_819/spec/mdc-textfield/classes/invalid-trailing-icon.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-trailing-icon.html.windows_chrome_72.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-trailing-icon.html.windows_firefox_65.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/12/20_53_58_968/spec/mdc-textfield/classes/invalid-trailing-icon.html.windows_ie_11.png" } }, "spec/mdc-textfield/classes/invalid.html": {