diff --git a/demos/text-field.html b/demos/text-field.html index da4ab706a89..64d32d04664 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -194,7 +194,7 @@

Outlined Text Field

Text Field - Leading/Trailing icons

-
+
event @@ -203,7 +203,7 @@

Text Field - Leading/Trailing icons

-
+
@@ -212,7 +212,7 @@

Text Field - Leading/Trailing icons

-
+
event @@ -226,7 +226,7 @@

Text Field - Leading/Trailing icons

-
+
diff --git a/demos/text-field.scss b/demos/text-field.scss index 221d48a20fd..ea72916389e 100644 --- a/demos/text-field.scss +++ b/demos/text-field.scss @@ -129,3 +129,6 @@ margin-bottom: 8px; } +.demo-tf-add-space { + margin: 10px 0; +} \ No newline at end of file diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js index 710db8c0a61..b81aed98275 100644 --- a/packages/mdc-notched-outline/foundation.js +++ b/packages/mdc-notched-outline/foundation.js @@ -98,7 +98,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation { const width = this.adapter_.getWidth(); const height = this.adapter_.getHeight(); const cornerWidth = radius + 1.2; - const leadingStrokeLength = Math.abs(11 - cornerWidth); + const leadingStrokeLength = Math.abs(12 - cornerWidth); const paddedNotchWidth = notchWidth + 8; // The right, bottom, and left sides of the outline follow the same SVG path. diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss index 065a79f9b18..dd6c20fcaf5 100644 --- a/packages/mdc-notched-outline/mdc-notched-outline.scss +++ b/packages/mdc-notched-outline/mdc-notched-outline.scss @@ -32,8 +32,9 @@ position: absolute; top: 0; left: 0; - width: calc(100% - 1px); - height: calc(100% - 2px); + box-sizing: border-box; + width: 100%; + height: 100%; transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function; opacity: 0; text-align: left; @@ -56,8 +57,9 @@ position: absolute; top: 0; left: 0; - width: calc(100% - 4px); - height: calc(100% - 4px); + box-sizing: border-box; + width: 100%; + height: 100%; transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function, border-color $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function; diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index 5541648d5b7..561272f6fac 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -190,9 +190,6 @@ @include mdc-floating-label-float-position($mdc-text-field-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale); @include mdc-floating-label-shake-animation(text-field-dense); - margin-top: 12px; - margin-bottom: 4px; - .mdc-text-field__input { padding: 12px 12px 0; } @@ -293,7 +290,7 @@ .mdc-text-field__input { display: flex; - padding: 12px; + padding: 12px 16px 14px; border: none !important; // FF adds unwanted border in HC mode on windows. background-color: transparent; z-index: 1; @@ -304,6 +301,8 @@ } .mdc-floating-label { + @include mdc-rtl-reflexive-position(left, 16px); + width: auto; } } @@ -371,7 +370,13 @@ } @mixin mdc-text-field-with-trailing-icon_ { - @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-trailing-icon-position, $mdc-text-field-icon-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); + + } } @mixin mdc-text-field-dense-with-trailing-icon_ { diff --git a/packages/mdc-textfield/icon/_variables.scss b/packages/mdc-textfield/icon/_variables.scss index 90c010a8a90..4bda4f8d96d 100644 --- a/packages/mdc-textfield/icon/_variables.scss +++ b/packages/mdc-textfield/icon/_variables.scss @@ -20,7 +20,8 @@ // THE SOFTWARE. // -$mdc-text-field-icon-position: 15px; +$mdc-text-field-icon-position: 16px; +$mdc-text-field-trailing-icon-position: 12px; $mdc-text-field-icon-padding: 48px; $mdc-text-field-dense-icon-position: 12px; $mdc-text-field-dense-icon-padding: 38px; diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss index 9079f202371..61bd63fbcb9 100644 --- a/packages/mdc-textfield/mdc-text-field.scss +++ b/packages/mdc-textfield/mdc-text-field.scss @@ -72,9 +72,12 @@ position: relative; box-sizing: border-box; height: 56px; - margin-top: 16px; overflow: hidden; will-change: opacity, transform, color; + + .mdc-floating-label { + @include mdc-rtl-reflexive-position(left, 12px); + } } .mdc-text-field__input { @@ -84,7 +87,7 @@ box-sizing: border-box; width: 100%; height: 100%; - padding: 20px 16px 0; + padding: 20px 12px 6px; transition: mdc-text-field-transition(opacity); border: none; border-bottom: 1px solid; @@ -198,6 +201,11 @@ } .mdc-text-field + & { + margin-right: 12px; + margin-left: 12px; + } + + .mdc-text-field--outlined + & { margin-right: 16px; margin-left: 16px; }