feat(text-field): Add CSS-only version of outlined text field (#1824)

material-components · Jan 2, 2018 · dd5ea7b · dd5ea7b
1 parent 921a41f
commit dd5ea7b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/demos/text-field.html b/demos/text-field.html
@@ -344,6 +344,7 @@ <h2>CSS Only Text Field</h2>
           <label for="css-only-dark-theme-tf">Dark Theme</label>
         </div>
       </section>
+
       <section class="example">
         <h2>CSS Only Text Field box</h2>
         <div>
@@ -354,6 +355,18 @@ <h2>CSS Only Text Field box</h2>
           </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">

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -86,11 +86,10 @@ Un-styled Content (**FOUC**).
 <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 class="mdc-text-field__bottom-line"></div>
 </div>
 ```
 
-> _NOTE_: Do not use `mdc-text-field__bottom-line` inside of `mdc-text-field` _if you plan on using `mdc-text-field--box`, and do not plan on using JavaScript_. Bottom line should not be included as part of the DOM structure of a box text field.
+> _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>

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -610,12 +610,9 @@
 // Graceful degredation for css-only inputs
 
 .mdc-text-field {
-  &:not(.mdc-text-field--upgraded):not(.mdc-text-field--textarea) .mdc-text-field__input {
-    transition: mdc-text-field-transition(border-bottom-color);
+  &:not(.mdc-text-field--upgraded) .mdc-text-field__input {
     border-bottom: 1px solid $mdc-text-field-divider-on-light;
-  }
 
-  &:not(.mdc-text-field--upgraded) .mdc-text-field__input {
     &:focus {
       @include mdc-theme-prop(border-color, primary);
     }
@@ -655,6 +652,26 @@
   }
 }
 
+.mdc-text-field--outlined: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);
+    }
+  }
+}
+
 .mdc-text-field--box:not(.mdc-text-field--upgraded) {
   height: 56px;
 
@@ -667,7 +684,6 @@
     padding-top: 0;
   }
 }
-
 // postcss-bem-linter: end
 
 // postcss-bem-linter: define text-field-helper-text