From 01b6be7c610bc16f4cdb7445a110997c7d4fd29c Mon Sep 17 00:00:00 2001 From: Esteban Gonzalez Date: Thu, 23 Aug 2018 10:58:31 -0700 Subject: [PATCH] refactor(text-field): Change text-field--box to be the new default (#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. --- demos/text-field.html | 193 +++--------- demos/theme/_menu.scss | 8 +- demos/theme/_theme-shared.scss | 1 + demos/theme/index.html | 34 ++- demos/theme/theme-dark.scss | 7 +- packages/mdc-textfield/README.md | 35 ++- packages/mdc-textfield/_mixins.scss | 131 +++----- packages/mdc-textfield/_variables.scss | 13 +- packages/mdc-textfield/constants.js | 2 +- packages/mdc-textfield/icon/README.md | 4 +- packages/mdc-textfield/index.js | 2 +- packages/mdc-textfield/mdc-text-field.scss | 72 +++-- test/screenshot/golden.json | 288 +++++++++--------- ...helper-text-persistent-validation-msg.html | 4 +- .../baseline-helper-text-persistent.html | 4 +- .../baseline-helper-text-validation-msg.html | 4 +- .../classes/baseline-helper-text.html | 4 +- .../classes/baseline-leading-icon.html | 4 +- .../classes/baseline-trailing-icon.html | 4 +- .../spec/mdc-textfield/classes/baseline.html | 4 +- ...helper-text-persistent-validation-msg.html | 4 +- .../disabled-helper-text-persistent.html | 4 +- .../disabled-helper-text-validation-msg.html | 4 +- .../classes/disabled-helper-text.html | 4 +- .../classes/disabled-leading-icon.html | 4 +- .../classes/disabled-trailing-icon.html | 4 +- .../spec/mdc-textfield/classes/disabled.html | 118 +++---- ...helper-text-persistent-validation-msg.html | 137 +++++---- .../focused-helper-text-persistent.html | 4 +- .../focused-helper-text-validation-msg.html | 4 +- .../classes/focused-helper-text.html | 4 +- .../classes/focused-leading-icon.html | 4 +- .../classes/focused-trailing-icon.html | 4 +- .../spec/mdc-textfield/classes/focused.html | 125 ++++---- ...helper-text-persistent-validation-msg.html | 4 +- ...nvalid-focused-helper-text-persistent.html | 4 +- ...id-focused-helper-text-validation-msg.html | 4 +- .../classes/invalid-focused-helper-text.html | 4 +- .../classes/invalid-focused-leading-icon.html | 4 +- .../invalid-focused-trailing-icon.html | 4 +- .../classes/invalid-focused.html | 4 +- ...helper-text-persistent-validation-msg.html | 4 +- .../invalid-helper-text-persistent.html | 4 +- .../invalid-helper-text-validation-msg.html | 4 +- .../classes/invalid-helper-text.html | 4 +- .../classes/invalid-leading-icon.html | 4 +- .../classes/invalid-trailing-icon.html | 4 +- .../spec/mdc-textfield/classes/invalid.html | 4 +- .../classes/textarea-disabled.html | 85 +++--- .../classes/textarea-focused.html | 84 ++--- .../classes/textarea-invalid.html | 85 +++--- .../spec/mdc-textfield/classes/textarea.html | 14 +- .../spec/mdc-textfield/issues/3332.html | 4 +- .../unit/mdc-textfield/mdc-text-field.test.js | 17 +- 54 files changed, 745 insertions(+), 842 deletions(-) diff --git a/demos/text-field.html b/demos/text-field.html index 36803703626..da4ab706a89 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -192,77 +192,22 @@

Outlined Text Field

-
-

Text Field box

-
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-

Text Field - Leading/Trailing icons

-
-
+
+
event - - + +
-
-
- - +
+
+ + delete
@@ -466,68 +411,6 @@

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])' @@ -540,13 +423,13 @@

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); @@ -560,35 +443,35 @@

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'); @@ -603,27 +486,27 @@

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(); diff --git a/demos/theme/_menu.scss b/demos/theme/_menu.scss index 75f7e42a8bf..1c2142bfe1b 100644 --- a/demos/theme/_menu.scss +++ b/demos/theme/_menu.scss @@ -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; } // diff --git a/demos/theme/_theme-shared.scss b/demos/theme/_theme-shared.scss index e393bfa85f3..0d67ac1db7b 100644 --- a/demos/theme/_theme-shared.scss +++ b/demos/theme/_theme-shared.scss @@ -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"; diff --git a/demos/theme/index.html b/demos/theme/index.html index 91c908ae176..359dbe08a99 100644 --- a/demos/theme/index.html +++ b/demos/theme/index.html @@ -45,14 +45,14 @@ Color Theming