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

Commit

Permalink
refactor(text-field): Change text-field--box to be the new default (#…
Browse files Browse the repository at this point in the history
…2859)

BREAKING CHANGE: Removes the default version of the text field and changes the new default variant to be the `--box` variant. Changes the box-sizing to border-box.
  • Loading branch information
EstebanG23 authored and williamernest committed Aug 23, 2018
1 parent 5007604 commit 01b6be7
Show file tree
Hide file tree
Showing 54 changed files with 745 additions and 842 deletions.
193 changes: 38 additions & 155 deletions demos/text-field.html
Original file line number Diff line number Diff line change
Expand Up @@ -192,77 +192,22 @@ <h2>Outlined Text Field</h2>
</div>
</section>

<section class="example" id="text-field-box-example">
<h2>Text Field box</h2>
<div id="demo-tf-box-wrapper" class="demo-text-field-wrapper">
<div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
<input type="text" id="tf-box" class="mdc-text-field__input"
aria-controls="box-name-validation-message"
aria-describedby="box-name-validation-message">
<label for="tf-box" class="mdc-floating-label">Your Name</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text"
id="box-name-validation-message" style="visibility: hidden">
Helper Text
</p>
</div>
<div>
<input id="box-disable" type="checkbox">
<label for="box-disable">Disabled</label>
</div>
<div>
<input id="box-rtl" type="checkbox">
<label for="box-rtl">RTL</label>
</div>
<div>
<input id="box-dense" type="checkbox">
<label for="box-dense">Dense</label>
</div>
<div>
<input id="box-alternate-colors" type="checkbox">
<label for="box-alternate-colors">Alternate Colors</label>
</div>
<div>
<input id="box-required" type="checkbox">
<label for="box-required">Required</label>
</div>
<div>
<input id="box-pattern" type="checkbox">
<label for="box-pattern">Must be at least 8 characters</label>
</div>
<div>
<input id="box-use-helper-text" type="checkbox">
<label for="box-use-helper-text">Use Helper Text</label>
</div>
<div>
<input id="box-persistent-helper-text" type="checkbox" disabled>
<label for="box-persistent-helper-text">Make helper text persistent</label>
</div>
<div>
<input id="box-helper-text-as-validation" type="checkbox" disabled>
<label for="box-helper-text-as-validation">
Use helper text as validation message
</label>
</div>
</section>

<section class="example" id="demo-tf-icon-container">
<h2>Text Field - Leading/Trailing icons</h2>
<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>
<div id="demo-tf-leading-wrapper">
<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>
<input type="text" id="tf-box-leading" class="mdc-text-field__input">
<label for="tf-box-leading" class="mdc-floating-label">Your name</label>
<input type="text" id="tf-leading" class="mdc-text-field__input">
<label for="tf-leading" class="mdc-floating-label">Your name</label>
<div class="mdc-line-ripple"></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">
<label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
<div id="demo-tf-trailing-wrapper">
<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">
<label for="tf-trailing" class="mdc-floating-label">Your other name</label>
<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">delete</i>
<div class="mdc-line-ripple"></div>
</div>
Expand Down Expand Up @@ -466,68 +411,6 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
});
});

demoReady(function() {
var tfEl = document.getElementById('tf-box-example');
var tf = new mdc.textField.MDCTextField(tfEl);
var wrapper = document.getElementById('demo-tf-box-wrapper');
var helperText = document.getElementById('box-name-validation-message');

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

document.getElementById('box-rtl').addEventListener('change', function(evt) {
if (evt.target.checked) {
wrapper.setAttribute('dir', 'rtl');
} else {
wrapper.removeAttribute('dir');
}
tf.layout();
});

document.getElementById('box-dense').addEventListener('change', function(evt) {
tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tf.layout();
});

document.getElementById('box-alternate-colors').addEventListener('change', function (evt) {
var target = evt.target;
tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
});

document.getElementById('box-required').addEventListener('change', function(evt) {
toggleRequired(tf, evt.target.checked);
});
document.getElementById('box-pattern').addEventListener('change', function(evt) {
var checked = evt.target.checked;
var requiredHelperText = 'Must be at least 8 characters';
var plainHelperText = 'Helper Text';
togglePattern(tf, checked);
tf.helperTextContent = checked ? requiredHelperText : plainHelperText;
});

document.getElementById('box-use-helper-text').addEventListener('change', function(evt) {
var target = evt.target;
helperText.style.visibility = target.checked ? 'visible' : 'hidden';
document.getElementById('box-persistent-helper-text').disabled = !target.checked;
document.getElementById('box-helper-text-as-validation').disabled = !target.checked;
});

document.getElementById('box-persistent-helper-text').addEventListener('change', function(evt) {
var target = evt.target;
helperText.classList[target.checked ? 'add' : 'remove'](
'mdc-text-field-helper-text--persistent'
);
});

document.getElementById('box-helper-text-as-validation').addEventListener('change', function(evt) {
helperText.classList[evt.target.checked ? 'add' : 'remove'](
'mdc-text-field-helper-text--validation-msg'
);
});
});

demoReady(function() {
var tfs = document.querySelectorAll(
'.mdc-text-field:not([data-demo-no-auto-js])'
Expand All @@ -540,13 +423,13 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
demoReady(function() {
var tfIconContainer = document.getElementById('demo-tf-icon-container');

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 tfLeadingEl = document.getElementById('tf-leading-example');
var tfLeading = new mdc.textField.MDCTextField(tfLeadingEl);
var wrapperLeading = document.getElementById('demo-tf-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 tfTrailingEl = document.getElementById('tf-trailing-example');
var tfTrailing = new mdc.textField.MDCTextField(tfTrailingEl);
var wrapperTrailing = document.getElementById('demo-tf-trailing-wrapper');

var tfOutlinedLeadingEl = document.getElementById('tf-outlined-leading-example');
var tfOutlinedLeading = new mdc.textField.MDCTextField(tfOutlinedLeadingEl);
Expand All @@ -560,35 +443,35 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
var tfInputs = tfIconContainer.querySelectorAll('.mdc-text-field__input');

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

document.getElementById('rtl-leading-trailing').addEventListener('change', function(evt) {
if (evt.target.checked) {
wrapperBoxLeading.setAttribute('dir', 'rtl');
wrapperBoxTrailing.setAttribute('dir', 'rtl');
wrapperLeading.setAttribute('dir', 'rtl');
wrapperTrailing.setAttribute('dir', 'rtl');
wrapperOutlinedLeading.setAttribute('dir', 'rtl');
wrapperOutlinedTrailing.setAttribute('dir', 'rtl');
} else {
wrapperBoxLeading.removeAttribute('dir');
wrapperBoxTrailing.removeAttribute('dir');
wrapperLeading.removeAttribute('dir');
wrapperTrailing.removeAttribute('dir');
wrapperOutlinedLeading.removeAttribute('dir');
wrapperOutlinedTrailing.removeAttribute('dir');
}
tfBoxLeading.layout();
tfBoxTrailing.layout();
tfLeading.layout();
tfTrailing.layout();
tfOutlinedLeading.layout();
tfOutlinedTrailing.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();
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();
tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
tfOutlinedLeading.layout();
tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
Expand All @@ -603,27 +486,27 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i

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

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

document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
tfBoxLeading.layout();
tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
tfBoxTrailing.layout();
tfLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
tfLeading.layout();
tfTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
tfTrailing.layout();
tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
tfOutlinedLeading.layout();
Expand Down
8 changes: 7 additions & 1 deletion demos/theme/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,23 @@

@import "../../packages/mdc-theme/color-palette";
@import "../../packages/mdc-theme/mixins";
@import "../../packages/mdc-menu-surface/mixins";

//
// Toolbar and menu
//

.demo-theme-menu {
@include mdc-menu-width(6);
}

.demo-theme-menu__list-item--selected {
background-color: $material-color-grey-400;
}

.demo-theme-list {
@include mdc-theme-prop(color, text-primary-on-light);
text-overflow: ellipsis;
white-space: nowrap;
}

//
Expand Down
1 change: 1 addition & 0 deletions demos/theme/_theme-shared.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
@import "../../packages/mdc-linear-progress/mdc-linear-progress";
@import "../../packages/mdc-list/mdc-list";
@import "../../packages/mdc-menu/mdc-menu";
@import "../../packages/mdc-menu-surface/mdc-menu-surface";
@import "../../packages/mdc-radio/mdc-radio";
@import "../../packages/mdc-ripple/mdc-ripple";
@import "../../packages/mdc-select/mdc-select";
Expand Down
34 changes: 20 additions & 14 deletions demos/theme/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@
<span class="mdc-toolbar__title catalog-title">Color Theming</span>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end mdc-toolbar__section--shrink-to-fit" role="toolbar">
<div class="mdc-menu-anchor">
<div class="mdc-menu-surface--anchor">
<button id="theme-color-action" class="mdc-toolbar__icon mdc-icon-button" title="Change theme colors" data-theme="baseline" data-mdc-ripple-is-unbounded>
<i class="demo-theme-color-radio">
<span class="demo-theme-color-radio__inner"></span>
</i>
</button>
<div class="mdc-menu demo-theme-menu" style="position: absolute;" tabindex="-1" id="theme-color-menu">
<ul class="mdc-menu__items mdc-list demo-theme-list"
<div class="mdc-menu mdc-menu-surface demo-theme-menu" style="position: absolute;" tabindex="-1" id="theme-color-menu">
<ul class="mdc-list demo-theme-list"
role="menu"
aria-hidden="true"
style="list-style-type: none"><!-- Inline style needed to fix IE 11 rendering bug (see https://stackoverflow.com/a/23717689/467582) -->
Expand Down Expand Up @@ -728,6 +728,7 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
<span class="mdc-tab-bar__indicator"></span>
</nav>
</figure>

<figure class="demo-figure--tab-bar">
<figcaption>Primary Color</figcaption>

Expand Down Expand Up @@ -806,15 +807,20 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
</p>
</figure>
<figure class="demo-text-field-wrapper">
<div class="mdc-text-field mdc-text-field--box demo-text-field">
<div class="mdc-text-field mdc-text-field--outlined demo-text-field">
<input type="text" class="mdc-text-field__input"
id="demo-text-field-box"
aria-controls="demo-text-field-box-helper-text"
aria-describedby="demo-text-field-box-helper-text">
<label for="demo-text-field-box" class="mdc-floating-label">With <code>--box</code> modifier</label>
<div class="mdc-line-ripple"></div>
id="demo-text-field"
aria-controls="demo-text-field-helper-text"
aria-describedby="demo-text-field-helper-text">
<label for="demo-text-field" class="mdc-floating-label">Outlined Text Field</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"/>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
<p class="mdc-text-field-helper-text" id="demo-text-field-helper-text"
aria-hidden="true">
Helper text
</p>
Expand Down Expand Up @@ -944,16 +950,16 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
*/

[].forEach.call(document.querySelectorAll('.mdc-switch'), function(switchEl) {
mdc.switchComponent.MDCSwitch.attachTo(switchEl);
mdc.switchControl.MDCSwitch.attachTo(switchEl);
});

/*
* Tab Bar
*/

[].forEach.call(document.querySelectorAll('.mdc-tab-bar'), function(tabBar) {
mdc.tabs.MDCTabBar.attachTo(tabBar);
});
// [].forEach.call(document.querySelectorAll('.mdc-tab-bar'), function(tabBar) {
// mdc.tabBar.MDCTabBar.attachTo(tabBar);
// });

/*
* Text Field
Expand Down
7 changes: 1 addition & 6 deletions demos/theme/theme-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
$mdc-theme-primary: $material-color-amber-300;
$mdc-theme-secondary: $material-color-pink-400;
$mdc-theme-background: $material-color-grey-900;
$mdc-theme-surface: $material-color-grey-900;

@import "./theme-shared";
@import "../../packages/mdc-checkbox/mixins";
Expand All @@ -42,12 +43,6 @@ $mdc-theme-background: $material-color-grey-900;
@include mdc-radio-unchecked-stroke-color(text-secondary-on-dark);
}

.demo-text-field {
@include mdc-text-field-ink-color(text-primary-on-dark);
@include mdc-text-field-label-color(text-secondary-on-dark);
@include mdc-text-field-line-ripple-color(text-hint-on-dark);
}

.demo-checkbox-wrapper,
.demo-radio-form-field {
@include mdc-theme-prop(color, text-primary-on-dark);
Expand Down
Loading

0 comments on commit 01b6be7

Please sign in to comment.