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

fix(text-field): Update to match spec #3397

Merged
merged 10 commits into from
Aug 24, 2018
Merged

fix(text-field): Update to match spec #3397

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a20431f
fix(text-field): Update styles
williamernest Aug 23, 2018
21ba2a4
fix(text-field): Update goldens
williamernest Aug 23, 2018
93c260c
fix(notched-outline): Add mixin for common code.
williamernest Aug 23, 2018
62687cf
fix(notched-outline): Update
williamernest Aug 23, 2018
4d26f65
fix(notched-outline): Update for comments
williamernest Aug 23, 2018
ccb41d9
fix(text-field): Update forlint
williamernest Aug 24, 2018
7be735f
WIP Remove leading/trailing whitespace on helper text to align
Aug 24, 2018
3eff892
Merge branch 'master' into fix/text-field/match-spec
williamernest Aug 24, 2018
b0d8a5e
Merge branch 'master' into fix/text-field/match-spec
williamernest Aug 24, 2018
3ce7053
Merge branch 'master' into fix/text-field/match-spec
williamernest Aug 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 8 additions & 15 deletions demos/text-field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
<div class="mdc-line-ripple"></div>
</div>
<p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
aria-hidden="true" style="visibility: hidden">
Helper Text
</p>
aria-hidden="true" style="visibility: hidden">Helper Text</p>
</section>
<div>
<input id="disable" type="checkbox">
Expand Down Expand Up @@ -137,9 +135,7 @@ <h2>Password field with validation</h2>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
id="pw-validation-msg">
Must be at least 8 characters long
</p>
id="pw-validation-msg">Must be at least 8 characters long</p>
</section>

<section class="example">
Expand All @@ -158,9 +154,7 @@ <h2>Outlined Text Field</h2>
<div class="mdc-notched-outline__idle"></div>
</div>
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
id="name-validation-message">
Helper Text
</p>
id="name-validation-message">Helper Text</p>
</div>
<div>
<input id="outlined-disable" type="checkbox">
Expand Down Expand Up @@ -194,7 +188,7 @@ <h2>Outlined Text Field</h2>

<section class="example" id="demo-tf-icon-container">
<h2>Text Field - Leading/Trailing icons</h2>
<div id="demo-tf-leading-wrapper">
<div id="demo-tf-leading-wrapper" class="demo-tf-add-space">
<div id="tf-leading-example"
class="mdc-text-field mdc-text-field--with-leading-icon" data-demo-no-auto-js>
<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
Expand All @@ -203,7 +197,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div id="demo-tf-trailing-wrapper">
<div id="demo-tf-trailing-wrapper" class="demo-tf-add-space">
<div id="tf-trailing-example"
class="mdc-text-field mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
<input type="text" id="tf-trailing" class="mdc-text-field__input">
Expand All @@ -212,7 +206,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div id="demo-tf-outlined-leading-wrapper">
<div id="demo-tf-outlined-leading-wrapper" class="demo-tf-add-space">
<div id="tf-outlined-leading-example"
class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
Expand All @@ -226,7 +220,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<div class="mdc-notched-outline__idle"></div>
</div>
</div>
<div id="demo-tf-outlined-trailing-wrapper" class="demo-text-field-wrapper">
<div id="demo-tf-outlined-trailing-wrapper" class="demo-text-field-wrapper demo-tf-add-space">
<div id="tf-outlined-trailing-example"
class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
<input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
Expand Down Expand Up @@ -346,8 +340,7 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
<div class="mdc-line-ripple"></div>
</div>
<p id="username-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true"
>Enter 10 digit phone number including area code
</p>
>Enter 10 digit phone number including area code</p>
</section>
</section>
</main>
Expand Down
3 changes: 3 additions & 0 deletions demos/text-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,6 @@
margin-bottom: 8px;
}

.demo-tf-add-space {
margin: 10px 0;
}
2 changes: 1 addition & 1 deletion packages/mdc-notched-outline/foundation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
16 changes: 8 additions & 8 deletions packages/mdc-notched-outline/mdc-notched-outline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,17 @@

// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-notched-outline") {
.mdc-notched-outline {
.mdc-notched-outline,
.mdc-notched-outline__idle {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 1px);
height: calc(100% - 2px);
box-sizing: border-box;
width: 100%;
height: 100%;
}

.mdc-notched-outline {
transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
opacity: 0;
text-align: left;
Expand All @@ -53,11 +58,6 @@
}

.mdc-notched-outline__idle {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
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;
Expand Down
16 changes: 9 additions & 7 deletions packages/mdc-textfield/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -304,6 +301,8 @@
}

.mdc-floating-label {
@include mdc-rtl-reflexive-position(left, 16px);

width: auto;
}
}
Expand Down Expand Up @@ -371,15 +370,19 @@
}

@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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where did you get this from? The spec seems to show 8px between the trailing icon and the side for outlined text field. (The spec also doesn't seem to show leading icons at all though...)

&.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_ {
@include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
}

// Full Width

@mixin mdc-text-field-fullwidth_ {
width: 100%;

Expand All @@ -400,7 +403,6 @@
}

// Textarea

@mixin mdc-text-field-textarea-disabled_ {
@include mdc-text-field-textarea-stroke-color_($mdc-textarea-disabled-border-color);
@include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
Expand Down
3 changes: 2 additions & 1 deletion packages/mdc-textfield/icon/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
26 changes: 15 additions & 11 deletions packages/mdc-textfield/mdc-text-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,15 @@
position: relative;
box-sizing: border-box;
height: 56px;
margin-top: 16px;
overflow: hidden;
will-change: opacity, transform, color;

// stylelint-disable-next-line plugin/selector-bem-pattern
.mdc-floating-label {
@include mdc-rtl-reflexive-position(left, 12px);

pointer-events: none;
}
}

.mdc-text-field__input {
Expand All @@ -84,7 +90,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;
Expand All @@ -106,20 +112,13 @@
box-shadow: none;
}
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-floating-label {
pointer-events: none;
}

// Move label when text-field gets autofilled in Chrome
// stylelint-disable-next-line plugin/selector-bem-pattern
// Move label when text-field gets auto-filled in Chrome.
.mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
transform: translateY(-50%) scale(.75);
cursor: auto;
}

// stylelint-enable plugin/selector-bem-pattern

.mdc-text-field--outlined {
@include mdc-text-field-outlined_;
}
Expand Down Expand Up @@ -198,6 +197,11 @@
}

.mdc-text-field + & {
margin-right: 12px;
margin-left: 12px;
}

.mdc-text-field--outlined + & {
margin-right: 16px;
margin-left: 16px;
}
Expand Down
Loading