feat(text-field): add text-field--box support

stasson · Jan 8, 2018 · 40a03ce · 40a03ce
1 parent 302e428
commit 40a03ce
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/components/textfield/README.md b/components/textfield/README.md
@@ -47,6 +47,7 @@ var vm = new Vue({
 |`v-model`| String || binds textfield value |
 |`dense`| Boolean | | compresses the textfield to make it slightly smaller |
 |`label`| String | | hint text |
+|`box`| Boolean | | whether the textfield is a box  |
 |`helptext`| String | |  help text |
 |`helptext-persistent`| Boolean | | whether help text is persistent |
 |`helptext-validation`| Boolean | | whether help text is a validation  |
@@ -69,4 +70,3 @@ var vm = new Vue({
 
 ### Reference
 - <https://material.io/components/web/catalog/input-controls/text-fields>
-
diff --git a/components/textfield/demo.vue b/components/textfield/demo.vue
@@ -7,6 +7,9 @@
         <mdc-textfield :disabled="!enabled" v-model="textField"
           label="with help text"
           helptext="Help text..."></mdc-textfield>
+        <mdc-textfield :disabled="!enabled" v-model="textField"
+          label="in a box"
+          helptext="Help text..." box></mdc-textfield>
       </mdc-layout-cell>
       <mdc-layout-cell  span=6>
         <p><mdc-textfield :disabled="!enabled" v-model="textField" multiline

diff --git a/components/textfield/mdc-textfield.vue b/components/textfield/mdc-textfield.vue
@@ -85,6 +85,7 @@ export default {
     'helptext': String,
     'helptext-persistent': Boolean,
     'helptext-validation': Boolean,
+    'box': Boolean,
     'disabled': Boolean,
     'required': Boolean,
     'minlength': { type: [Number, String], default: undefined },
@@ -105,7 +106,8 @@ export default {
         'mdc-text-field--disabled': this.disabled,
         'mdc-text-field--dense': this.dense,
         'mdc-text-field--fullwidth': this.fullwidth,
-        'mdc-text-field--textarea': this.multiline
+        'mdc-text-field--textarea': this.multiline,
+        'mdc-text-field--box': this.box
       },
       inputClasses: {
         'mdc-text-field__input': true
@@ -161,10 +163,10 @@ export default {
         notifyAnimationEnd: () => {
           emitCustomEvent(
             this.$refs.bottom,
-            MDCTextFieldBottomLineFoundation.strings.ANIMATION_END_EVENT, 
+            MDCTextFieldBottomLineFoundation.strings.ANIMATION_END_EVENT,
             {});
         },
-      }) 
+      })
       this.bottomLineFoundation.init()
     }
 
@@ -188,7 +190,7 @@ export default {
         setContent: (content) => {
           this.$refs.help.textContent = content;
         }
-      }) 
+      })
       this.helperTextFoundation.init()
     }