feat(MdField): add required fields and error messages

Author: marcosmoura

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

@@ -1,4 +1,5 @@
 <example src="./examples/TextFields.vue" />
+<example src="./examples/ErrorsMessages.vue" />
 
 <template>
   <page-container centered :title="$t('pages.input.title')">
@@ -11,6 +12,12 @@
 
       <code-example title="Input and Textarea" :component="examples['text-fields']" />
     </div>
+
+    <div class="page-container-section">
+      <h2>Errors and Messages</h2>
+
+      <code-example title="Validation" :component="examples['errors-messages']" />
+    </div>
   </page-container>
 </template>
 

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

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <md-field>
+      <label>Required Field</label>
+      <md-input required />
+    </md-field>
+
+    <md-field class="md-invalid">
+      <label>Error</label>
+      <md-input required />
+      <span class="md-error">There is an error</span>
+    </md-field>
+
+    <md-field class="md-invalid">
+      <label>Textarea</label>
+      <md-textarea required />
+      <span class="md-error">There is an error</span>
+    </md-field>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ErrorsMessages'
+  }
+</script>

src/components/MdField/MdField.vue

@@ -20,6 +20,7 @@
         value: null,
         focused: false,
         disabled: false,
+        required: false,
         placeholder: false,
         textarea: false,
         autogrow: false
@@ -188,6 +189,10 @@
   }
 
   .md-field {
+    + .md-has-textarea:not(.md-autogrow) {
+      margin-top: 36px;
+    }
+
     &.md-has-placeholder {
       label {
         pointer-events: auto;
@@ -203,8 +208,6 @@
     }
 
     &.md-has-textarea:not(.md-autogrow) {
-      padding-top: 0;
-
       &:after {
         display: none;
       }
@@ -227,7 +230,7 @@
 
       textarea {
         min-height: 100px;
-        padding: 16px 16px 0;
+        padding: 0 16px;
       }
 
       &:hover,
@@ -244,7 +247,7 @@
         }
 
         textarea {
-          padding-top: 26px;
+          padding-top: 10px;
         }
       }
     }
@@ -348,6 +351,12 @@
     }
 
     &.md-invalid {
+      &.md-has-textarea:not(.md-autogrow) {
+        &:before {
+          border-width: 2px;
+        }
+      }
+
       .md-error {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -366,7 +375,6 @@
         right: 0;
         transform: translateX(calc(100% + 2px));
         content: "*";
-        font-size: 12px;
         line-height: 1em;
         vertical-align: top;
       }

src/components/MdField/MdFieldMixin.js

@@ -29,6 +29,9 @@ export default {
     },
     disabled () {
       this.setDisabled()
+    },
+    required () {
+      this.setRequired()
     }
   },
   methods: {
@@ -41,6 +44,9 @@ export default {
     setDisabled () {
       this.state.disabled = Boolean(this.disabled)
     },
+    setRequired () {
+      this.state.required = Boolean(this.required)
+    },
     onFocus () {
       this.state.focused = true
     },
@@ -55,5 +61,6 @@ export default {
     this.setStateValue()
     this.setPlaceholder()
     this.setDisabled()
+    this.setRequired()
   }
 }

src/components/MdField/theme.scss

@@ -18,10 +18,6 @@
         }
       }
 
-      .md-error {
-        @include md-theme-property-by-hue(color, red, A400, field, error);
-      }
-
       &.md-focused,
       &.md-has-value {
         input,
@@ -91,6 +87,26 @@
       }
     }
 
+    &.md-invalid {
+      &:after {
+        @include md-theme-property-by-hue(background-color, red, A400, field, error);
+      }
+
+      &.md-has-textarea:not(.md-autogrow) {
+        &:before {
+          @include md-theme-property-by-hue(border-color, red, A400, field, error);
+        }
+      }
+
+      label {
+        @include md-theme-property-by-hue(color, red, A400, field, error);
+      }
+
+      .md-error {
+        @include md-theme-property-by-hue(color, red, A400, field, error);
+      }
+    }
+
     &.md-focused {
       &:before {
         @include md-theme-property(background-color, primary);