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

feat(text-field): Handle leading/trailing icons in outlined text field #1858

Merged
merged 23 commits into from
Jan 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
d6cb998
Specify box style for leading/trailing icons in demo
bonniezhou Dec 21, 2017
4caa077
Add outlined style to leading/trailing icon demo
bonniezhou Dec 21, 2017
90ea139
WIP including changing label position and changing SVG path to accomm…
bonniezhou Dec 21, 2017
32b9def
WIP wiring up to dense/dark theme
bonniezhou Dec 21, 2017
bd5ed1d
Revert all JS changes
bonniezhou Dec 22, 2017
d8bb1ba
Get label shake working
bonniezhou Dec 22, 2017
19c1e0c
Parameterize outline path for readability
bonniezhou Dec 22, 2017
0519954
Make keyframes positionX parameter optional
bonniezhou Dec 22, 2017
5b4bac7
Remove extra code
bonniezhou Dec 22, 2017
8224fed
Remove dense/dark mode and extra param
bonniezhou Jan 3, 2018
619c7b9
Revert outline updateSvgPath changes
bonniezhou Jan 3, 2018
e1cca1b
Revert demo hero id name change
bonniezhou Jan 3, 2018
62a2e21
Merge branch 'master' into feat/text-field/outline-icon
bonniezhou Jan 3, 2018
8dd79c2
Fix z-indices and label position in dense
bonniezhou Jan 3, 2018
51c60df
Remove useless code and fix label shake
bonniezhou Jan 3, 2018
2afae38
Make linter happy
bonniezhou Jan 3, 2018
01354e1
Remove duplicate code and adjust icon position in dense mode
bonniezhou Jan 3, 2018
19ca8a2
Adjust translateY for label shake
bonniezhou Jan 4, 2018
9454ba4
Fix order for tabindex and remove extra whitespace
bonniezhou Jan 4, 2018
d325b8a
Merge branch 'master' into feat/text-field/outline-icon
bonniezhou Jan 4, 2018
05d06c9
Revert changes to do with label shake
bonniezhou Jan 4, 2018
a04a2ab
Missed one more change to revert
bonniezhou Jan 4, 2018
1eefbab
Fix tab order for trailing icon
bonniezhou Jan 4, 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
146 changes: 87 additions & 59 deletions demos/text-field.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,9 @@
background-color: #f2f2f2;
}

.custom-text-field-input {
width: 300px;
}

.full-width-textarea-example {
margin-top: 16px;
}

</style>
</head>
<body class="mdc-typography">
Expand Down Expand Up @@ -275,60 +270,71 @@ <h2>Text Field box</h2>

<section class="example">
<h2>Text Field - Leading/Trailing icons</h2>
<div class="demo-note">
Copy link
Contributor

@kfranqueiro kfranqueiro Jan 4, 2018

Choose a reason for hiding this comment

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

Are we sure about removing this advice? I think the intent was to tell people how to make text fields consistent size both with and without icons in them, though that's not really visible from this demo example alone since we only use the class on the icon examples. It might make more sense to move this to a note within the icon readme?

cc @amsheehan

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep, Alex confirmed it's fine since the input elements have width:100%.
Making text fields consistent size both with and without icons is done the same way (by setting the width of the top-level mdc-text-field element).

<em>
Note: Some implementations utilizing leading and trailing icons may wish to set a width on the
<code>input</code> element to achieve uniform widths on text fields.
This demo achieves that by adding a custom class name: <code>custom-text-field-input</code> and setting
some style:
</em>
<br />
<!--
The following text formatting achieves the visual output we are aiming for
since the <pre> tag honors whitespace and line breaks.
-->
<pre>
<code>.custom-text-field-input {
width: 300px;
}</code></pre>
</div>
<div id="demo-tf-box-leading-wrapper">
<div id="tf-box-leading-example"
class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon" data-demo-no-auto-js>
<i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
<input type="text" id="tf-box-leading" class="mdc-text-field__input custom-text-field-input">
<input type="text" id="tf-box-leading" class="mdc-text-field__input">
<label for="tf-box-leading" class="mdc-text-field__label">Your name</label>
<div class="mdc-text-field__bottom-line"></div>
</div>
</div>
<div id="demo-tf-box-trailing-wrapper">
<div id="tf-box-trailing-example"
class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
<input type="text" id="tf-box-trailing" class="mdc-text-field__input custom-text-field-input">
<input type="text" id="tf-box-trailing" class="mdc-text-field__input">
<label for="tf-box-trailing" class="mdc-text-field__label">Your other name</label>
<i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
<div class="mdc-text-field__bottom-line"></div>
</div>
</div>
<div id="demo-tf-outlined-leading-wrapper">
<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">event</i>
<input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
<label for="tf-outlined-leading" class="mdc-text-field__label">Your other name</label>
<div class="mdc-text-field__outline">
<svg>
<path class="mdc-text-field__outline-path"/>
</svg>
</div>
<div class="mdc-text-field__idle-outline"></div>
</div>
</div>
<div id="demo-tf-outlined-trailing-wrapper">
<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">
<label for="tf-outlined-trailing" class="mdc-text-field__label">Your other name</label>
<i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
<div class="mdc-text-field__outline">
<svg>
<path class="mdc-text-field__outline-path"/>
</svg>
</div>
<div class="mdc-text-field__idle-outline"></div>
</div>
</div>
<div>
<input id="box-disable-leading-trailing" type="checkbox">
<label for="box-disable-leading-trailing">Disabled</label>
<input id="disable-leading-trailing" type="checkbox">
<label for="disable-leading-trailing">Disabled</label>
</div>
<div>
<input id="box-rtl-leading-trailing" type="checkbox">
<label for="box-rtl-leading-trailing">RTL</label>
<input id="rtl-leading-trailing" type="checkbox">
<label for="rtl-leading-trailing">RTL</label>
</div>
<div>
<input id="box-dark-theme-leading-trailing" type="checkbox">
<label for="box-dark-theme-leading-trailing">Dark Theme</label>
<input id="dark-theme-leading-trailing" type="checkbox">
<label for="dark-theme-leading-trailing">Dark Theme</label>
</div>
<div>
<input id="box-dense-leading-trailing" type="checkbox">
<label for="box-dense-leading-trailing">Dense</label>
<input id="dense-leading-trailing" type="checkbox">
<label for="dense-leading-trailing">Dense</label>
</div>
<div>
<input id="box-unclickable-leading-trailing" type="checkbox">
<label for="box-unclickable-leading-trailing">Unclickable icons</label>
<input id="unclickable-leading-trailing" type="checkbox">
<label for="unclickable-leading-trailing">Unclickable icons</label>
</div>
</section>

Expand Down Expand Up @@ -460,46 +466,68 @@ <h2>Full-Width Text Field and Textarea</h2>
</script>
<script>
setTimeout(function() {
var tfLeadingEl = document.getElementById('tf-box-leading-example');
var tfLeading = new mdc.textField.MDCTextField(tfLeadingEl);
var wrapperLeading = document.getElementById('demo-tf-box-leading-wrapper');
var tfBoxLeadingEl = document.getElementById('tf-box-leading-example');
var tfBoxLeading = new mdc.textField.MDCTextField(tfBoxLeadingEl);
var wrapperBoxLeading = document.getElementById('demo-tf-box-leading-wrapper');

var tfBoxTrailingEl = document.getElementById('tf-box-trailing-example');
var tfBoxTrailing = new mdc.textField.MDCTextField(tfBoxTrailingEl);
var wrapperBoxTrailing = document.getElementById('demo-tf-box-trailing-wrapper');

var tfOutlinedLeadingEl = document.getElementById('tf-outlined-leading-example');
var tfOutlinedLeading = new mdc.textField.MDCTextField(tfOutlinedLeadingEl);
var wrapperOutlinedLeading = document.getElementById('demo-tf-outlined-leading-wrapper');

var tfTrailingEl = document.getElementById('tf-box-trailing-example');
var tfTrailing = new mdc.textField.MDCTextField(tfTrailingEl);
var wrapperTrailing = document.getElementById('demo-tf-box-trailing-wrapper');
var tfOutlinedTrailingEl = document.getElementById('tf-outlined-trailing-example');
var tfOutlinedTrailing = new mdc.textField.MDCTextField(tfOutlinedTrailingEl);
var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');

var tfIcons = document.querySelectorAll('.mdc-text-field__icon');

document.getElementById('box-disable-leading-trailing').addEventListener('change', function(evt) {
tfLeading.disabled = evt.target.checked;
tfTrailing.disabled = evt.target.checked;
document.getElementById('disable-leading-trailing').addEventListener('change', function(evt) {
tfBoxLeading.disabled = evt.target.checked;
tfBoxTrailing.disabled = evt.target.checked;
tfOutlinedLeading.disabled = evt.target.checked;
tfOutlinedTrailing.disabled = evt.target.checked;
});

document.getElementById('box-rtl-leading-trailing').addEventListener('change', function(evt) {
document.getElementById('rtl-leading-trailing').addEventListener('change', function(evt) {
if (evt.target.checked) {
wrapperLeading.setAttribute('dir', 'rtl');
wrapperTrailing.setAttribute('dir', 'rtl');
wrapperBoxLeading.setAttribute('dir', 'rtl');
wrapperBoxTrailing.setAttribute('dir', 'rtl');
wrapperOutlinedLeading.setAttribute('dir', 'rtl');
wrapperOutlinedTrailing.setAttribute('dir', 'rtl');
} else {
wrapperLeading.removeAttribute('dir');
wrapperTrailing.removeAttribute('dir');
wrapperBoxLeading.removeAttribute('dir');
wrapperBoxTrailing.removeAttribute('dir');
wrapperOutlinedLeading.removeAttribute('dir');
wrapperOutlinedTrailing.removeAttribute('dir');
}
tfLeading.layout();
tfTrailing.layout();
tfBoxLeading.layout();
tfBoxTrailing.layout();
tfOutlinedLeading.layout();
tfOutlinedTrailing.layout();
});

document.getElementById('box-dark-theme-leading-trailing').addEventListener('change', function(evt) {
wrapperLeading.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
wrapperTrailing.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
document.getElementById('dark-theme-leading-trailing').addEventListener('change', function(evt) {
wrapperBoxLeading.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
wrapperBoxTrailing.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
wrapperOutlinedLeading.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
wrapperOutlinedTrailing.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
});

document.getElementById('box-dense-leading-trailing').addEventListener('change', function(evt) {
tfLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfLeading.layout();
tfTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfTrailing.layout();
document.getElementById('dense-leading-trailing').addEventListener('change', function(evt) {
tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfBoxLeading.layout();
tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfBoxTrailing.layout();
tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfOutlinedLeading.layout();
tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfOutlinedTrailing.layout();
});

document.getElementById('box-unclickable-leading-trailing').addEventListener('change', function(evt) {
document.getElementById('unclickable-leading-trailing').addEventListener('change', function(evt) {
[].slice.call(tfIcons).forEach(function (icon) {
icon.setAttribute('tabindex', evt.target.checked ? '-1' : '0');
});
Expand Down
41 changes: 38 additions & 3 deletions packages/mdc-textfield/mdc-text-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@
padding: 12px;
border: none;
background-color: transparent;
z-index: 3;
z-index: 1;

&:hover ~ .mdc-text-field__idle-outline {
border: 1px solid $mdc-text-field-outlined-hover-border;
Expand All @@ -144,7 +144,6 @@
position: absolute;
bottom: 20px;
transition: transform 260ms ease;
z-index: 2;

&--float-above {
transform: scale(.75) translateY(-170%);
Expand All @@ -155,6 +154,14 @@
}
}

.mdc-text-field__icon {
z-index: 2;

&:hover ~ .mdc-text-field__idle-outline {
border: 1px solid $mdc-text-field-outlined-hover-border;
}
}

&.mdc-text-field--focused .mdc-text-field__idle-outline,
.mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
opacity: 0;
Expand Down Expand Up @@ -207,8 +214,11 @@
// stylelint-enable max-nesting-depth
}
}
}

.mdc-text-field__icon {
top: 12px;
}
}
// stylelint-enable plugin/selector-bem-pattern
}

Expand All @@ -221,6 +231,7 @@
display: inline-flex;
position: relative;
height: 56px;
margin-top: 16px;
background-color: $mdc-text-field-box-background;
overflow: hidden;

Expand Down Expand Up @@ -306,6 +317,30 @@
.mdc-text-field__label {
@include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
}

// stylelint-disable plugin/selector-bem-pattern
&.mdc-text-field--outlined {
.mdc-text-field__label--float-above {
transform: scale(.75) translateX(-36%) translateY(-170%);

@include mdc-rtl {
transform: scale(.75) translateX(36%) translateY(-170%);
}
}

&.mdc-text-field--dense {
.mdc-text-field__label--float-above {
transform: translateX(-25%) translateY(-145%) scale(.923);

// stylelint-disable max-nesting-depth
@include mdc-rtl {
transform: translateX(25%) translateY(-145%) scale(.923);
}
// stylelint-enable max-nesting-depth
}
}
}
// stylelint-enable plugin/selector-bem-pattern
}

.mdc-text-field--with-trailing-icon {
Expand Down
2 changes: 0 additions & 2 deletions packages/mdc-textfield/outline/mdc-text-field-outline.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
transition: opacity 100ms ease;
border: 1px solid $mdc-text-field-outlined-idle-border;
opacity: 1;
z-index: 2;
}

.mdc-text-field__outline {
Expand All @@ -48,7 +47,6 @@
height: calc(100% - 2px);
transition: mdc-text-field-transition(opacity);
opacity: 0;
z-index: 2;
overflow: hidden;

svg {
Expand Down