Merge pull request #473 from ProcessMaker/bugfix/FOUR-29727

Fix visibility of required asterisk on toggle checkboxes

Author: nolanpro

src/components/FormCheckbox.vue

@@ -10,7 +10,7 @@
         :checked="isChecked"
         @change="$emit('change', $event.target.checked)"
       >
-      <required-asterisk />
+      <required-asterisk :toggle-enabled="toggle"/>
       <label :class="labelClass" v-uni-for="name">{{label}}</label>
       <div v-if="(validator && validator.errorCount) || error" class="invalid-feedback">
         <div v-for="(error, index) in validatorErrors" :key="index">{{error}}</div>

src/components/common/RequiredAsterisk.vue

@@ -1,13 +1,36 @@
 <template>
-    <span v-if="$parent.required" :title="$t('required')" class="required-asterisk">*</span>
+    <span v-if="$parent.required" :title="$t('required')" :class="classList">*</span>
 </template>
 
+<script>
+export default {
+  props: {
+    toggleEnabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    classList() {
+      return {
+        'required-asterisk': true,
+        'toggle-enabled': this.toggleEnabled
+      }
+    }
+  }
+}
+</script>
 <style>
 .required-asterisk {
   color: #dc3545;
   padding-right: 0.5em;
 }
 
+.required-asterisk.toggle-enabled {
+  position:relative;
+  left: -33px;
+}
+
 .conversational-chat .required-asterisk {
   display: none;
 }