feat(MdChips): Support with field variants (#1668)

* feat(MdChips): Support with field variants

* docs(MdChips): Support with field variants

Author: shafimsp

docs/app/pages/Components/Chips/Chips.vue

@@ -142,7 +142,7 @@ export default {
             defaults: 'text'
           },
           {
-            name: 'md-placeholder',
+            name: 'placeholder',
             type: 'String',
             description: 'The input placeholder. It is useful to show to the user which type of data will be inserted.',
             defaults: 'null'

docs/app/pages/Components/Chips/examples/ChipCustomTemplate.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
-    <md-chips v-model="projects" :md-limit="5" md-placeholder="Add project...">
-      <template slot="md-chip" slot-scope="{ chip }">
-        {{ chip }} <small v-if="chip === currentProject">(Marcos Moura)</small>
-      </template>
-
+    <md-field>
+      <md-chips v-model="projects" :md-limit="5" md-placeholder="Add project...">
+        <template slot="md-chip" slot-scope="{ chip }">
+          {{ chip }} <small v-if="chip === currentProject">(Marcos Moura)</small>
+        </template>
+      </md-chips>
       <div class="md-helper-text">Up to 5 projects</div>
-    </md-chips>
+    </md-field>
   </div>
 </template>
 

docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue

@@ -1,14 +1,19 @@
 <template>
   <div>
-    <md-chips class="md-primary" v-model="chips" md-placeholder="Add genre...">
+    <md-field>
+      <md-chips class="md-primary" v-model="chips" md-placeholder="Add genre..."></md-chips>
       <div class="md-helper-text">Default</div>
-    </md-chips>
-    <md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre...">
+    </md-field>
+
+    <md-field>
+      <md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre..."></md-chips>
       <div class="md-helper-text">Shake duplicated chip on insertion</div>
-    </md-chips>
-    <md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated>
+    </md-field>
+
+    <md-field>
+      <md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated></md-chips>
       <div class="md-helper-text">Always pulse duplicated chip</div>
-    </md-chips>
+    </md-field>
   </div>
 </template>
 

docs/app/pages/Components/Chips/examples/Editable.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <md-chips v-model="fruits" md-placeholder="Add fruit..."></md-chips>
+    <md-field>
+      <md-chips v-model="fruits" md-placeholder="Add fruit..."></md-chips>
+    </md-field>
   </div>
 </template>
 

docs/app/pages/Components/Chips/examples/Format.vue

@@ -1,14 +1,16 @@
 <template>
   <div>
-    <md-chips class="md-primary" v-model="clubs" md-placeholder="Add club..." :md-format="toUppercase">
+    <md-field>
       <label>La Liga Clubs</label>
+      <md-chips class="md-primary" v-model="clubs" :md-format="toUppercase"></md-chips>
       <div class="md-helper-text">Three uppercase letters</div>
-    </md-chips>
-    
-    <md-chips class="md-primary" v-model="artists" md-placeholder="Add artist..." :md-format="formatName">
+    </md-field>
+
+    <md-field>
       <label>Artists</label>
+      <md-chips class="md-primary" v-model="artists" placeholder="Add artist..." :md-format="formatName"></md-chips>
       <div class="md-helper-text">Try inserting `Eugène Ysaÿe`. The formatter will remove diacritics.</div>
-    </md-chips>
+    </md-field>
   </div>
 </template>
 

docs/app/pages/Components/Chips/examples/Static.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <md-chips v-model="cities" md-static></md-chips>
+    <md-field>
+      <md-chips v-model="cities" readonly></md-chips>
+    </md-field>
   </div>
 </template>