feat(MdField): make icons work together with fields

Author: marcosmoura

docs/app/pages/Components/Input/Input.vue

@@ -1,6 +1,7 @@
 <example src="./examples/TextFields.vue" />
 <example src="./examples/ErrorsMessages.vue" />
 <example src="./examples/Counters.vue" />
+<example src="./examples/Icons.vue" />
 
 <template>
   <page-container centered :title="$t('pages.input.title')">
@@ -25,6 +26,12 @@
 
       <code-example title="Counter" :component="examples['counters']" />
     </div>
+
+    <div class="page-container-section">
+      <h2>Icons and Clear button</h2>
+
+      <code-example title="Outside, inline and clear" :component="examples['icons']" />
+    </div>
   </page-container>
 </template>
 

docs/app/pages/Components/Input/examples/Counters.vue

@@ -2,17 +2,22 @@
   <div>
     <md-field>
       <label>Required Field</label>
-      <md-input required maxlength="30" />
+      <md-input maxlength="30" />
+    </md-field>
+
+    <md-field :md-counter="false">
+      <label>Maxlength with disabled counter</label>
+      <md-input maxlength="10" />
     </md-field>
 
     <md-field>
       <label>Autogrow</label>
-      <md-textarea md-autogrow required maxlength="200" />
+      <md-textarea md-autogrow maxlength="200" />
     </md-field>
 
     <md-field>
       <label>Textarea</label>
-      <md-textarea required maxlength="80" />
+      <md-textarea maxlength="80" />
     </md-field>
   </div>
 </template>

docs/app/pages/Components/Input/examples/Icons.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <md-field>
+      <md-icon>event</md-icon>
+      <label>Date</label>
+      <md-input />
+    </md-field>
+
+    <md-field>
+      <label>Voice</label>
+      <md-input />
+      <md-icon>keyboard_voice</md-icon>
+    </md-field>
+
+    <md-field>
+      <label>Description</label>
+      <md-textarea />
+      <md-icon>description</md-icon>
+    </md-field>
+
+    <md-field>
+      <md-icon class="md-accent">warning</md-icon>
+      <label>Transfer Money</label>
+      <md-input />
+      <md-icon>attach_money</md-icon>
+    </md-field>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .md-field:last-child {
+    margin-bottom: 40px;
+  }
+</style>
+
+<script>
+  export default {
+    name: 'Icons'
+  }
+</script>

src/components/MdField/MdField.vue

@@ -81,7 +81,6 @@
     margin: 4px 0 24px;
     padding-top: 16px;
     display: flex;
-    flex-direction: column;
     position: relative;
 
     &:before,
@@ -179,18 +178,23 @@
       right: 0;
     }
 
-    .md-icon:not(.md-icon-delete) {
+    > .md-icon {
       margin: 4px auto;
+      position: relative;
+      z-index: 3;
       color: rgba(#000, .54);
       transition: $md-transition-stand;
 
+      &:last-of-type:not(:first-child):after {
+        display: none;
+      }
+
       &:after {
         width: 36px;
         height: 2px;
         position: absolute;
         left: 0;
-        bottom: 0;
-        z-index: 2;
+        bottom: -4px;
         content: "";
       }
 
@@ -253,6 +257,13 @@
         padding: 0 16px;
       }
 
+      .md-icon {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 3;
+      }
+
       .md-count {
         right: 6px;
         bottom: 2px;

src/components/MdField/theme.scss

@@ -5,7 +5,6 @@
         background-color: rgba(#000, .42);
       }
 
-
       .md-helper-text,
       .md-count,
       label {
@@ -89,6 +88,13 @@
       }
     }
 
+
+    > .md-icon {
+      &:after {
+        @include md-theme-property(background-color, background);
+      }
+    }
+
     &.md-invalid {
       &:after {
         @include md-theme-property-by-hue(background-color, red, A400, field, error);

src/components/MdIcon/theme.scss

@@ -9,7 +9,7 @@
         }
 
         &.md-accent {
-          @include md-theme-property(fill, primary, background);
+          @include md-theme-property(fill, accent, background);
         }
       }
     }
@@ -22,7 +22,7 @@
       }
 
       &.md-accent {
-        @include md-theme-property(color, primary, background);
+        @include md-theme-property(color, accent, background);
       }
     }
   }