Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit b9c5fc6

Browse files
abhiomkarabhiomkar
authored
fix(text-field): Fix for input alignment in textfield with trailing icon (#4478)
1 parent 6a86818 commit b9c5fc6

File tree

4 files changed

+31
-30
lines changed

4 files changed

+31
-30
lines changed

‎packages/mdc-textfield/_mixins.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -349,23 +349,23 @@
349349
// Icons
350350

351351
@mixin mdc-text-field-with-leading-icon_ {
352-
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
352+
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
353353

354354
.mdc-floating-label {
355355
@include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
356356
}
357357
}
358358

359359
@mixin mdc-text-field-dense-with-leading-icon_ {
360-
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
360+
@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);
361361

362362
.mdc-floating-label {
363363
@include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
364364
}
365365
}
366366

367367
@mixin mdc-text-field-outlined-with-leading-icon_ {
368-
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
368+
@include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
369369
@include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 32px);
370370
@include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
371371

@@ -392,16 +392,16 @@
392392
}
393393

394394
@mixin mdc-text-field-with-trailing-icon_ {
395-
@include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding);
395+
@include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
396396

397397
// Outlined uses 16px for text alignment when using a trailing icon.
398398
&.mdc-text-field--outlined {
399-
@include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
399+
@include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
400400
}
401401
}
402402

403403
@mixin mdc-text-field-dense-with-trailing-icon_ {
404-
@include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
404+
@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);
405405
}
406406

407407
@mixin mdc-text-field-with-both-icons_ {

‎packages/mdc-textfield/_variables.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,5 +62,6 @@ $mdc-text-field-outlined-dense-label-position-y: 120% !default;
6262
$mdc-text-field-outlined-with-leading-icon-label-position-x: 0 !default;
6363
$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px !default;
6464
$mdc-text-field-textarea-label-position-y: 130% !default;
65-
$mdc-text-field-helper-line-padding: 16px;
65+
$mdc-text-field-helper-line-padding: 16px !default;
66+
$mdc-text-field-input-padding: 16px !default;
6667
// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.

‎packages/mdc-textfield/icon/_mixins.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,19 @@
3030

3131
// Private mixins
3232

33-
@mixin mdc-text-field-icon-horizontal-position_($position-property, $position, $padding) {
33+
@mixin mdc-text-field-icon-horizontal-position_($position-property, $position, $padding, $input-padding) {
3434
.mdc-text-field__icon {
3535
@include mdc-rtl-reflexive-position($position-property, $position);
3636
}
3737

3838
// Move the input's position, to allow room for the icon
3939
@if ($position-property == left) {
4040
.mdc-text-field__input {
41-
@include mdc-rtl-reflexive-property(padding, $padding /* left-value */, $position /* right-value */);
41+
@include mdc-rtl-reflexive-property(padding, $padding /* left-value */, $input-padding /* right-value */);
4242
}
4343
} @else {
4444
.mdc-text-field__input {
45-
@include mdc-rtl-reflexive-property(padding, $position /* left-value */, $padding /* right-value */);
45+
@include mdc-rtl-reflexive-property(padding, $input-padding /* left-value */, $padding /* right-value */);
4646
}
4747
}
4848
}

‎test/screenshot/golden.json

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1272,11 +1272,11 @@
12721272
}
12731273
},
12741274
"spec/mdc-textfield/classes/baseline-trailing-icon.html": {
1275-
"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",
1275+
"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",
12761276
"screenshots": {
1277-
"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",
1278-
"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",
1279-
"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"
1277+
"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",
1278+
"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",
1279+
"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"
12801280
}
12811281
},
12821282
"spec/mdc-textfield/classes/baseline-without-label.html": {
@@ -1344,11 +1344,11 @@
13441344
}
13451345
},
13461346
"spec/mdc-textfield/classes/disabled-trailing-icon.html": {
1347-
"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",
1347+
"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",
13481348
"screenshots": {
1349-
"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",
1350-
"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",
1351-
"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"
1349+
"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",
1350+
"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",
1351+
"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"
13521352
}
13531353
},
13541354
"spec/mdc-textfield/classes/disabled.html": {
@@ -1416,11 +1416,11 @@
14161416
}
14171417
},
14181418
"spec/mdc-textfield/classes/focused-trailing-icon.html": {
1419-
"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",
1419+
"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",
14201420
"screenshots": {
1421-
"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",
1422-
"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",
1423-
"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"
1421+
"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",
1422+
"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",
1423+
"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"
14241424
}
14251425
},
14261426
"spec/mdc-textfield/classes/focused.html": {
@@ -1488,11 +1488,11 @@
14881488
}
14891489
},
14901490
"spec/mdc-textfield/classes/invalid-focused-trailing-icon.html": {
1491-
"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",
1491+
"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",
14921492
"screenshots": {
1493-
"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",
1494-
"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",
1495-
"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"
1493+
"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",
1494+
"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",
1495+
"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"
14961496
}
14971497
},
14981498
"spec/mdc-textfield/classes/invalid-focused.html": {
@@ -1552,11 +1552,11 @@
15521552
}
15531553
},
15541554
"spec/mdc-textfield/classes/invalid-trailing-icon.html": {
1555-
"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",
1555+
"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",
15561556
"screenshots": {
1557-
"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",
1558-
"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",
1559-
"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"
1557+
"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",
1558+
"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",
1559+
"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"
15601560
}
15611561
},
15621562
"spec/mdc-textfield/classes/invalid.html": {

0 commit comments

Comments
 (0)