feat(text-field): Remove css only options. Update docs. Update demo (#2012)

BREAKING CHANGE: Removes the css only version of the text-field component.

Author: williamernest

demos/text-field.html

@@ -352,49 +352,6 @@ <h2>Text Field - Leading/Trailing icons</h2>
         </div>
       </section>
 
-      <section class="example">
-        <h2>CSS Only Text Field</h2>
-        <div class="mdc-form-field mdc-form-field--align-end" id="css-only-text-field-wrapper">
-          <div class="mdc-text-field" data-demo-no-auto-js>
-            <input type="text" class="mdc-text-field__input" id="css-only-text-field"
-                   placeholder="Name">
-            <div class="mdc-text-field__bottom-line"></div>
-          </div>
-          <label for="css-only-text-field">Your name:</label>
-        </div>
-
-        <div>
-          <input id="css-only-tf-disabled" type="checkbox">
-          <label for="css-only-tf-disabled">Disabled</label>
-        </div>
-        <div>
-          <input id="css-only-dark-theme-tf" type="checkbox">
-          <label for="css-only-dark-theme-tf">Dark Theme</label>
-        </div>
-      </section>
-
-      <section class="example">
-        <h2>CSS Only Text Field box</h2>
-        <div>
-          <label for="css-only-text-field-box">Your name:</label>
-          <div class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
-            <input type="text" class="mdc-text-field__input" id="css-only-text-field-box"
-                   placeholder="Name">
-          </div>
-        </div>
-      </section>
-
-      <section class="example">
-        <h2>CSS-Only Outlined Text Field</h2>
-        <div>
-          <label for="css-only-outlined-text-field">Your name:</label>
-          <div class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
-            <input type="text" class="mdc-text-field__input" id="css-only-outlined-text-field"
-                   placeholder="Name">
-          </div>
-        </div>
-      </section>
-
       <section class="example">
         <h2>Preventing FOUC</h2>
         <div class="mdc-text-field mdc-text-field--upgraded">
@@ -432,15 +389,6 @@ <h2>Textarea</h2>
         </div>
       </section>
 
-      <section class="example">
-        <h2>CSS Only Textarea</h2>
-        <section>
-          <div class="mdc-text-field mdc-text-field--textarea" data-demo-no-auto-js>
-            <textarea id="textarea-css-only" class="mdc-text-field__input" rows="8" cols="40" placeholder="Enter something about yourself"></textarea>
-          </div>
-        </section>
-      </section>
-
       <section class="example">
         <h2>Full-Width Text Field and Textarea</h2>
         <div id="demo-fullwidth-wrapper">
@@ -557,18 +505,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
       });
 
-      demoReady(function() {
-        var wrapperCssOnly = document.getElementById('css-only-text-field-wrapper');
-        var tfCssOnly = document.getElementById('css-only-text-field');
-
-        document.getElementById('css-only-tf-disabled').addEventListener('change', function(evt) {
-          tfCssOnly.disabled = evt.target.checked;
-        });
-        document.getElementById('css-only-dark-theme-tf').addEventListener('change', function(evt) {
-          wrapperCssOnly.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
-        });
-      });
-
       demoReady(function() {
         var section = document.getElementById('demo-text-field-wrapper');
         var tfRoot = section.querySelector('.mdc-text-field');

packages/mdc-textfield/README.md

@@ -77,26 +77,6 @@ Un-styled Content (**FOUC**).
   <div class="mdc-text-field__bottom-line"></div>
 </div>
 ```
-> _NOTE_: Only place an `mdc-text-field__label` inside of `mdc-text-field` _if you plan on using
-> JavaScript_. Otherwise, the label must go outside of `mdc-text-field`, as shown below.
-
-#### CSS Only
-
-```html
-<label for="text-field-no-js">TextField with no JS: </label>
-<div class="mdc-text-field">
-  <input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
-</div>
-```
-
-> _NOTE_: Do not use `mdc-text-field__bottom-line`, `mdc-text-field__outline`, or `mdc-text-field__idle-outline` inside of `mdc-text-field` _if you plan on using `mdc-text-field--box` or `mdc-text-field--outlined` without using JavaScript_. Bottom line and outline should not be included as part of the DOM structure of a CSS-only text field.
-
-```html
-<label for="css-only-text-field-box">Your name:</label>
-<div class="mdc-text-field mdc-text-field--box">
-  <input type="text" class="mdc-text-field__input" id="css-only-text-field-box" placeholder="Name">
-</div>
-```
 
 #### Full Width
 
@@ -121,19 +101,6 @@ included as part of the DOM structure of a full width text field.
 </div>
 ```
 
-> _NOTE_: Only use `mdc-text-field__label` within `mdc-text-field--textarea` _if you plan on using
-> Javascript_. Otherwise, use the `placeholder` attribute, as shown below.
-
-```html
-<div class="mdc-text-field mdc-text-field--textarea">
-  <textarea id="textarea-css-only"
-    class="mdc-text-field__input"
-    rows="8"
-    cols="40"
-    placeholder="Enter something about yourself"></textarea>
-</div>
-```
-
 #### Disabled
 
 Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. You also need to add `mdc-text-field--disabled` to the `mdc-text-field`.

packages/mdc-textfield/_mixins.scss

@@ -273,26 +273,6 @@
     opacity: 1;
   }
   // stylelint-enable plugin/selector-bem-pattern
-
-  &:not(.mdc-text-field--upgraded) {
-    height: 56px;
-
-    .mdc-text-field__input {
-      @include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
-
-      height: 100%;
-      padding: 0 0 0 12px;
-      border: 1px solid $mdc-text-field-outlined-idle-border;
-
-      &:hover {
-        border-color: $mdc-text-field-outlined-hover-border;
-      }
-
-      &:focus {
-        @include mdc-theme-prop(border-color, primary);
-      }
-    }
-  }
 }
 
 // Box
@@ -439,11 +419,6 @@
     @include mdc-text-field-textarea-disabled_;
   }
 
-  &:not(.mdc-text-field--upgraded) {
-    .mdc-text-field__input {
-      padding-top: $padding-inset;
-    }
-  }
 
   &.mdc-text-field--invalid {
     @include mdc-text-field-textarea-invalid_;

packages/mdc-textfield/mdc-text-field.scss

@@ -368,65 +368,6 @@
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-// Graceful degredation for css-only inputs
-
-.mdc-text-field {
-  &:not(.mdc-text-field--upgraded) .mdc-text-field__input {
-    border-bottom: 1px solid $mdc-text-field-divider-on-light;
-
-    &:focus {
-      @include mdc-theme-prop(border-color, primary);
-    }
-
-    &:disabled {
-      @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
-
-      border-bottom-style: dotted;
-    }
-
-    // stylelint-disable selector-max-specificity
-    &:invalid:not(:focus) {
-      border-color: $mdc-text-field-error-on-light;
-    }
-    // stylelint-enable selector-max-specificity
-  }
-
-  @include mdc-theme-dark {
-    &:not(.mdc-text-field--upgraded) .mdc-text-field__input {
-      &:not(:focus) {
-        border-color: $mdc-text-field-underline-on-dark-idle;
-      }
-
-      &:disabled {
-        @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
-
-        border-color: $mdc-text-field-disabled-border-on-dark;
-        background-color: $mdc-textarea-disabled-background-on-dark;
-      }
-
-      // stylelint-disable selector-max-specificity
-      &:invalid:not(:focus) {
-        border-color: $mdc-text-field-error-on-dark;
-      }
-      // stylelint-enable selector-max-specificity
-    }
-  }
-}
-
-.mdc-text-field--box:not(.mdc-text-field--upgraded) {
-  height: 56px;
-
-  &::before,
-  &::after {
-    border-radius: 0;
-  }
-
-  .mdc-text-field__input {
-    padding-top: 0;
-  }
-}
-// postcss-bem-linter: end
-
 // postcss-bem-linter: define text-field-helper-text
 
 .mdc-text-field-helper-text {