Skip to content

Commit

Permalink
feat(textfield): Implement updated UX states for text fields (#998)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: DOM change to add a bottom line element. Adapter API changes to consolidate event handlers. Renamed multi-line text field to textarea.
  • Loading branch information
@amsheehan
amsheehan authored Sep 29, 2017
1 parent 68f134a commit 45c6cf6
Show file tree
Hide file tree
Showing 11 changed files with 983 additions and 419 deletions.
204 changes: 167 additions & 37 deletions demos/textfield.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,21 @@
.hero .mdc-textfield {
min-width: 240px;
}

.demo-note {
padding: 20px;
margin: 20px 0;
background-color: #f2f2f2;
}

.custom-textfield-input {
width: 300px;
}

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

</style>
</head>
<body>
Expand All @@ -60,9 +75,9 @@
<section class="hero">
<div class="mdc-textfield">
<input type="text" class="mdc-textfield__input" id="my-textfield"
name="email" aria-controls="my-textfield-helptext"
data-demo-no-auto-js autocomplete="email">
aria-controls="my-textfield-helptext" data-demo-no-auto-js>
<label for="my-textfield" class="mdc-textfield__label">Text Field</label>
<div class="mdc-textfield__bottom-line"></div>
</div>
</section>

Expand All @@ -73,13 +88,13 @@
</em></section>

<section class="example">
<h2>Full Functionality JS Component (Floating Label, Validation, Autocomplete)</h2>
<h2>Full Functionality JS Component (Floating Label, Validation)</h2>
<section id="demo-textfield-wrapper">
<div class="mdc-textfield">
<input type="text" class="mdc-textfield__input" id="my-textfield"
name="email" aria-controls="my-textfield-helptext"
data-demo-no-auto-js autocomplete="email">
aria-controls="my-textfield-helptext" data-demo-no-auto-js>
<label for="my-textfield" class="mdc-textfield__label">Email Address</label>
<div class="mdc-textfield__bottom-line"></div>
</div>
<p id="my-textfield-helptext" class="mdc-textfield-helptext"
aria-hidden="true" style="display:none;">
Expand Down Expand Up @@ -128,6 +143,7 @@ <h2>Password field with validation</h2>
aria-controls="pw-validation-msg"
autocomplete="current-password">
<label for="pw" class="mdc-textfield__label">Choose password</label>
<div class="mdc-textfield__bottom-line"></div>
</div>
<p class="mdc-textfield-helptext mdc-textfield-helptext--persistent mdc-textfield-helptext--validation-msg"
id="pw-validation-msg">
Expand All @@ -138,7 +154,7 @@ <h2>Password field with validation</h2>
<h2>Textfield box</h2>
<div id="demo-tf-box-wrapper">
<div id="tf-box-example" class="mdc-textfield mdc-textfield--box" data-demo-no-auto-js>
<input type="text" id="tf-box" class="mdc-textfield__input" required
<input required pattern=".{8,}" type="text" id="tf-box" class="mdc-textfield__input"
aria-controls="name-validation-message">
<label for="tf-box" class="mdc-textfield__label">Your Name</label>
<div class="mdc-textfield__bottom-line"></div>
Expand Down Expand Up @@ -194,12 +210,73 @@ <h2>Textfield box</h2>
}, 0);
</script>
</section>

<section class="example">
<h2>Textfield - 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 textfields.
This demo achieves that by adding a custom class name: <code>custom-textfield-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-textfield-input {
width: 300px;
}</code></pre>
</div>
<div id="demo-tf-box-leading-wrapper">
<div id="tf-box-leading-example"
class="mdc-textfield mdc-textfield--box mdc-textfield--with-leading-icon" data-demo-no-auto-js>
<i class="material-icons mdc-textfield__icon" tabindex="0">event</i>
<input type="text" id="tf-box-leading" class="mdc-textfield__input custom-textfield-input">
<label for="tf-box-leading" class="mdc-textfield__label">Your name</label>
<div class="mdc-textfield__bottom-line"></div>
</div>
</div>
<div id="demo-tf-box-trailing-wrapper">
<div id="tf-box-trailing-example"
class="mdc-textfield mdc-textfield--box mdc-textfield--with-trailing-icon" data-demo-no-auto-js>
<input type="text" id="tf-box-trailing" class="mdc-textfield__input custom-textfield-input">
<label for="tf-box-trailing" class="mdc-textfield__label">Your other name</label>
<i class="material-icons mdc-textfield__icon" tabindex="0">delete</i>
<div class="mdc-textfield__bottom-line"></div>
</div>
</div>
<div>
<input id="box-disable-leading-trailing" type="checkbox">
<label for="box-disable-leading-trailing">Disabled</label>
</div>
<div>
<input id="box-rtl-leading-trailing" type="checkbox">
<label for="box-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>
</div>
<div>
<input id="box-dense-leading-trailing" type="checkbox">
<label for="box-dense-leading-trailing">Dense</label>
</div>
<div>
<input id="box-unclickable-leading-trailing" type="checkbox">
<label for="box-unclickable-leading-trailing">Unclickable icons</label>
</div>
</section>

<section class="example">
<h2>CSS Only Textfield</h2>
<div class="mdc-form-field mdc-form-field--align-end">
<div class="mdc-textfield" data-demo-no-auto-js>
<input type="text" class="mdc-textfield__input" id="css-only-textfield"
placeholder="Name">
<div class="mdc-textfield__bottom-line"></div>
</div>
<label for="css-only-textfield">Your name:</label>
</div>
Expand All @@ -221,51 +298,55 @@ <h2>Preventing FOUC</h2>
<label for="fouc" class="mdc-textfield__label mdc-textfield__label--float-above">
Label floating above
</label>
<div class="mdc-textfield__bottom-line"></div>
</div>
</section>

<section class="example">
<h2>Multi-line Textfields</h2>
<section id="demo-textfield-multiline-wrapper" style="overflow:hidden;">
<div class="mdc-textfield mdc-textfield--multiline">
<textarea id="multi-line" class="mdc-textfield__input" rows="8" cols="40"></textarea>
<label for="multi-line" class="mdc-textfield__label">Multi-line Label</label>
<h2>Textarea</h2>
<section id="demo-textfield-textarea-wrapper">
<div class="mdc-textfield mdc-textfield--textarea">
<textarea id="textarea" class="mdc-textfield__input" rows="8" cols="40"></textarea>
<label for="textarea" class="mdc-textfield__label">Textarea Label</label>
</div>
</section>
<div>
<input id="multi-disable" type="checkbox">
<label for="multi-disable">Disabled</label>
<input id="textarea-disable" type="checkbox">
<label for="textarea-disable">Disabled</label>
</div>
<div>
<input id="multi-rtl" type="checkbox">
<label for="multi-rtl">RTL</label>
<input id="textarea-rtl" type="checkbox">
<label for="textarea-rtl">RTL</label>
</div>
<div>
<input id="multi-dark-theme" type="checkbox">
<label for="multi-dark-theme">Dark Theme</label>
<input id="textarea-dark-theme" type="checkbox">
<label for="textarea-dark-theme">Dark Theme</label>
</div>
<div>
<input id="multi-required" type="checkbox">
<label for="multi-required">Required</label>
<input id="textarea-required" type="checkbox">
<label for="textarea-required">Required</label>
</div>
</section>

<section class="example">
<h2>Multi-line Textfields - CSS Only</h2>
<label for="css-only-multiline" style="margin-bottom:4px;">About you:</label>
<div class="mdc-textfield mdc-textfield--multiline" data-demo-no-auto-js>
<textarea class="mdc-textfield__input"
id="css-only-multiline"
rows="8" cols="40"
placeholder="Tell the world something about yourself!"></textarea>
</div>
<h2>CSS Only Textarea</h2>
<section>
<div class="mdc-textfield mdc-textfield--textarea" data-demo-no-auto-js>
<textarea id="textarea-css-only" class="mdc-textfield__input" rows="8" cols="40" placeholder="Enter something about yourself"></textarea>
</div>
</section>
</section>

<section class="example">
<h2>Full-Width Textfields</h2>
<h2>Full-Width Textfield and Textarea</h2>
<div id="demo-fullwidth-wrapper">
<div class="mdc-textfield mdc-textfield--fullwidth" data-demo-no-auto-js>
<div class="mdc-textfield mdc-textfield--fullwidth">
<input class="mdc-textfield__input" type="text" placeholder="Subject" aria-label="Subject">
<div class="mdc-textfield__bottom-line"></div>
</div>
<div class="mdc-textfield mdc-textfield--multiline mdc-textfield--fullwidth" data-demo-no-auto-js>
<textarea class="mdc-textfield__input" placeholder="Message" rows="8" cols="40" aria-label="Message"></textarea>
<div class="mdc-textfield mdc-textfield--textarea mdc-textfield--fullwidth full-width-textarea-example">
<textarea id="full-width-textarea" class="mdc-textfield__input" rows="8"></textarea>
<label for="full-width-textarea" class="mdc-textfield__label">Textarea Label</label>
</div>
</div>
<div>
Expand Down Expand Up @@ -293,6 +374,55 @@ <h2>Full-Width Textfields</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 tfTrailingEl = document.getElementById('tf-box-trailing-example');
var tfTrailing = new mdc.textfield.MDCTextfield(tfTrailingEl);
var wrapperTrailing = document.getElementById('demo-tf-box-trailing-wrapper');

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

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

document.getElementById('box-rtl-leading-trailing').addEventListener('change', function(evt) {
if (evt.target.checked) {
wrapperLeading.setAttribute('dir', 'rtl');
wrapperTrailing.setAttribute('dir', 'rtl');
} else {
wrapperLeading.removeAttribute('dir');
wrapperTrailing.removeAttribute('dir');
}
tfLeading.ripple.layout();
tfTrailing.ripple.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('box-dense-leading-trailing').addEventListener('change', function(evt) {
tfLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-textfield--dense');
tfLeading.ripple.layout();
tfTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-textfield--dense');
tfTrailing.ripple.layout();
});

document.getElementById('box-unclickable-leading-trailing').addEventListener('change', function(evt) {
[].slice.call(tfIcons).forEach(function (icon) {
icon.setAttribute('tabindex', evt.target.checked ? '-1' : '0');
});
});

}, 0);
</script>
<script>
(function() {
var section = document.getElementById('demo-textfield-wrapper');
Expand Down Expand Up @@ -347,26 +477,26 @@ <h2>Full-Width Textfields</h2>
</script>
<script>
(function() {
var section = document.getElementById('demo-textfield-multiline-wrapper');
var section = document.getElementById('demo-textfield-textarea-wrapper');
var tfRoot = section.querySelector('.mdc-textfield');
var tf = new mdc.textfield.MDCTextfield(tfRoot);
document.getElementById('multi-disable').addEventListener('change', function(evt) {
document.getElementById('textarea-disable').addEventListener('change', function(evt) {
var target = evt.target;
tf.disabled = target.checked;
});
document.getElementById('multi-rtl').addEventListener('change', function(evt) {
document.getElementById('textarea-rtl').addEventListener('change', function(evt) {
var target = evt.target;
if (target.checked) {
section.setAttribute('dir', 'rtl');
} else {
section.removeAttribute('dir');
}
});
document.getElementById('multi-dark-theme').addEventListener('change', function(evt) {
document.getElementById('textarea-dark-theme').addEventListener('change', function(evt) {
var target = evt.target;
section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
});
document.getElementById('multi-required').addEventListener('change', function(evt) {
document.getElementById('textarea-required').addEventListener('change', function(evt) {
var target = evt.target;
tfRoot.querySelector('.mdc-textfield__input').required = target.checked;
});
Expand All @@ -376,7 +506,7 @@ <h2>Full-Width Textfields</h2>
(function() {
var section = document.getElementById('demo-fullwidth-wrapper');
var tfRoot = section.querySelector('.mdc-textfield');
var tfMultiRoot = section.querySelector('.mdc-textfield--multiline');
var tfMultiRoot = section.querySelector('.mdc-textfield--textarea');
var tf = new mdc.textfield.MDCTextfield(tfRoot);
var tfMulti = new mdc.textfield.MDCTextfield(tfMultiRoot);

Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 45c6cf6

Please sign in to comment.