fix: make field to have an required indicator

Author: marcosmoura

docs/app/pages/Components/Checkbox/examples/RegularCheckboxes.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
-    <md-checkbox v-model="array" value="1">Array Checkbox</md-checkbox>
-    <md-checkbox v-model="array" value="2">Array Checkbox</md-checkbox>
-    <md-checkbox v-model="boolean" :value="false">Boolean Checkbox</md-checkbox>
-    <md-checkbox v-model="string" value="my-checkbox">String Checkbox</md-checkbox>
-    <md-checkbox v-model="novalue">No Value Checkbox</md-checkbox>
+    <md-checkbox v-model="array" value="1">Array</md-checkbox>
+    <md-checkbox v-model="array" value="2">Array</md-checkbox>
+    <md-checkbox v-model="boolean" :value="false">Boolean</md-checkbox>
+    <md-checkbox v-model="string" required value="my-checkbox">String <small>(required)</small></md-checkbox>
+    <md-checkbox v-model="novalue">No Value</md-checkbox>
+    <md-checkbox v-model="novalue" disabled>Disabled</md-checkbox>
 
     <table>
       <tr>
-        <th>Array Checkbox</th>
-        <th>Boolean Checkbox</th>
-        <th>String Checkbox</th>
-        <th>No Value Checkbox</th>
+        <th>Array</th>
+        <th>Boolean</th>
+        <th>String</th>
+        <th>No Value</th>
       </tr>
 
       <tr>

docs/app/pages/Components/Radio/examples/RegularRadio.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
-    <md-radio v-model="radio" :value="false">Boolean Radio</md-radio>
-    <md-radio v-model="radio" value="my-Radio">String Radio</md-radio>
-    <md-radio v-model="radio">No Value Radio</md-radio>
+    <md-radio v-model="radio" :value="false">Boolean</md-radio>
+    <md-radio v-model="radio" value="my-radio">String</md-radio>
+    <md-radio v-model="radio">No Value</md-radio>
+    <md-radio v-model="radio" disabled>Disabled</md-radio>
 
-    Radio value: {{ radio }}
+    Model value: {{ radio }}
   </div>
 </template>
 

src/components/MdCheckbox/MdCheckbox.vue

@@ -65,7 +65,8 @@
       checkboxClasses () {
         return {
           'md-checked': this.isSelected,
-          'md-disabled': this.disabled
+          'md-disabled': this.disabled,
+          'md-required': this.required
         }
       }
     },
@@ -196,6 +197,7 @@
     .md-checkbox-label {
       height: $md-checkbox-size;
       padding-left: 16px;
+      position: relative;
       line-height: $md-checkbox-size;
     }
   }
@@ -215,5 +217,17 @@
       border-color: transparent !important;
     }
   }
+
+  .md-checkbox.md-required {
+    label:after {
+      position: absolute;
+      top: 2px;
+      right: 0;
+      transform: translateX(calc(100% + 2px));
+      content: "*";
+      line-height: 1em;
+      vertical-align: top;
+    }
+  }
 </style>
 

src/components/MdRadio/MdRadio.vue

@@ -51,7 +51,8 @@
       radioClasses () {
         return {
           'md-checked': this.isSelected,
-          'md-disabled': this.disabled
+          'md-disabled': this.disabled,
+          'md-required': this.required
         }
       }
     },
@@ -146,6 +147,7 @@
     .md-radio-label {
       height: $md-radio-size;
       padding-left: 16px;
+      position: relative;
       line-height: $md-radio-size;
     }
   }
@@ -159,5 +161,17 @@
       }
     }
   }
+
+  .md-radio.md-required {
+    label:after {
+      position: absolute;
+      top: 2px;
+      right: 0;
+      transform: translateX(calc(100% + 2px));
+      content: "*";
+      line-height: 1em;
+      vertical-align: top;
+    }
+  }
 </style>