feat(MdField): add prefixes and suffixes (#1592)

* feat(MdField): add prefixes, suffixes

* docs(MdField): prefixes, suffixes example

* docs(MdField): example name

* feat(MdField): remove padding

Author: Samuell1

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

@@ -5,6 +5,7 @@
 <example src="./examples/InlineActions.vue" />
 <example src="./examples/FieldVariations.vue" />
 <example src="./examples/AppBarNested.vue" />
+<example src="./examples/Fixes.vue" />
 
 <template>
   <page-container centered :title="$t('pages.input.title')">
@@ -62,7 +63,16 @@
 
       <p>Fields can have a clearable feature to make easy for users to clear the value. And to be easier to type passwords we can show a toggle button to reveal the password. This is really useful for mobile applications:</p>
       <code-example title="Clear and password" :component="examples['inline-actions']" />
+    </div>
+
+    <div class="page-container-section">
+      <h2>Prefixes & suffixes</h2>
 
+      <p>Prefixes and suffixes can be used to clarify units or to add input in advance. Prefixes are left justified in the text field; suffixes are right justified. Text fields can have both prefixes and suffixes.</p>
+      <code-example title="Prefixes & suffixes" :component="examples['fixes']" />
+    </div>
+
+    <div class="page-container-section">
       <api-item title="API - md-field">
         <p>The following options can be applied to any field:</p>
 

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

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <md-field>
+      <label>Prefix</label>
+      <span class="md-prefix">$</span>
+      <md-input v-model="initial"></md-input>
+    </md-field>
+
+    <md-field>
+      <label>Suffix</label>
+      <md-input v-model="empty"></md-input>
+      <span class="md-suffix">@gmail.com</span>
+    </md-field>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Fixes',
+    data: () => ({
+      initial: 0,
+      empty: ''
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-field:last-child {
+    margin-bottom: 40px;
+  }
+</style>

src/components/MdField/MdField.vue

@@ -196,6 +196,27 @@
       transition-duration: .3s;
       line-height: 1;
     }
+    .md-suffix {
+      font-size: 16px;
+      line-height: 32px;
+      align-self: center;
+      justify-self: center;
+    }
+
+    .md-prefix {
+      display: none;
+      padding-right: 4px;
+      font-size: 16px;
+      line-height: 32px;
+      align-self: center;
+      justify-self: center;
+    }
+
+    &.md-focused, &.md-has-value {
+      .md-prefix {
+        display: block;
+      }
+    }
 
     .md-input,
     .md-textarea {

src/components/MdField/theme.scss

@@ -29,6 +29,10 @@
         color: rgba(#000, .54);
       }
 
+      .md-suffix, .md-prefix {
+        color: rgba(#000, .54);
+      }
+
       .md-input,
       .md-textarea {
         &::-webkit-input-placeholder {
@@ -58,6 +62,10 @@
         color: rgba(#fff, .7);
       }
 
+      .md-suffix, .md-prefix {
+        color: rgba(#fff, .7);
+      }
+
       .md-input,
       .md-textarea {
         &::-webkit-input-placeholder {