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

Commit

Permalink
feat(text-field): Handle leading/trailing icons in outlined text field (
Browse files Browse the repository at this point in the history 
#1858)
  • Loading branch information
@bonniezhou
bonniezhou authored Jan 4, 2018
1 parent b8e4020 commit ca0af1b
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 64 deletions.
146 changes: 87 additions & 59 deletions demos/text-field.html
View file
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">
<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
View file
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
View file
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

0 comments on commit ca0af1b

Please sign in to comment.