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 3 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
8 changes: 4 additions & 4 deletions demos/text-field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,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 +203,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 +212,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 +226,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
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;
}
9 changes: 9 additions & 0 deletions packages/mdc-notched-outline/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,12 @@
border-radius: $radius;
}
}

@mixin mdc-notched-outline-base_ {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
}
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
14 changes: 4 additions & 10 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 @@ -29,11 +29,8 @@
// 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 {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 1px);
height: calc(100% - 2px);
@include mdc-notched-outline-base_;
Copy link
Contributor

@kfranqueiro kfranqueiro Aug 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Rather than (or in addition to) put this in a mixin, should we separate these styles and put them under .mdc-notched-outline, .mdc-notched-outline__idle?


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

.mdc-notched-outline__idle {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
@include mdc-notched-outline-base_;

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
15 changes: 10 additions & 5 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,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.
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_ {
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;
12 changes: 10 additions & 2 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,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 {
Expand All @@ -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;
Expand Down Expand Up @@ -198,6 +201,11 @@
}

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

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