Merge pull request #365 from it-at-m/feature/364-new-form-error-message-design

Feature/364 new form error message design

Author: FabianWilms

src/components/FileDropzone/MucFileDropzone.vue

@@ -22,43 +22,25 @@
       additionalInformation
     }}</span>
   </div>
-  <span
-    v-if="!validFileSizes && maxFileSizeWarning"
-    class="m-error-message drop-zone-error-message"
-  >
-    <MucIcon
-      icon="warning--filled"
-      class="icon"
-    />
-    <span>
-      {{ maxFileSizeWarning }}
-    </span>
-  </span>
-  <span
-    v-if="!validTotalFileSizes && maxTotalFileSizeWarning"
-    class="m-error-message drop-zone-error-message"
-  >
-    <MucIcon icon="warning--filled" />
-    <span>
-      {{ maxTotalFileSizeWarning }}
-    </span>
-  </span>
-  <span
-    v-if="!validFilesAmount"
-    class="m-error-message drop-zone-error-message"
-  >
-    <MucIcon icon="warning--filled" />
-    <span>
-      {{ invalidAmountWarning }}
-    </span>
-  </span>
+
+  <form-error-message v-if="!validFileSizes && maxFileSizeWarning">
+    {{ maxFileSizeWarning }}
+  </form-error-message>
+
+  <form-error-message v-if="!validTotalFileSizes && maxTotalFileSizeWarning">
+    {{ maxTotalFileSizeWarning }}
+  </form-error-message>
+
+  <form-error-message v-if="!validFilesAmount">
+    {{ invalidAmountWarning }}
+  </form-error-message>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUpdated, ref, watch } from "vue";
 
 import { MucButton } from "../Button";
-import { MucIcon } from "../Icon";
+import FormErrorMessage from "../Form/FormErrorMessage.vue";
 import IconFileUpload from "./IconFileUpload.vue";
 
 const {
@@ -297,19 +279,6 @@ const _clearWarnings = () => {
   cursor: pointer;
 }
 
-.drop-zone-error-message {
-  display: flex;
-  align-items: flex-start;
-}
-
-.drop-zone-error-message .icon {
-  margin-top: 0;
-}
-
-.drop-zone-error-message span {
-  margin-left: 4px;
-}
-
 .drop-zone-additional-information {
   font-size: 14px;
 }

src/components/Form/FormErrorMessage.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { MucIcon } from "../Icon";
+</script>
+
+<template>
+  <span class="m-error-message form-error-message">
+    <MucIcon icon="warning--filled" />
+    <span>
+      <slot></slot>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.form-error-message {
+  display: flex;
+  align-items: flex-start;
+}
+
+.form-error-message .icon {
+  margin-top: 0;
+}
+
+.form-error-message span {
+  margin-left: 4px;
+}
+</style>

src/components/Form/MucInput.vue

@@ -17,12 +17,6 @@
         <span class="visually-hidden">(erforderlich)</span>
       </span>
     </label>
-    <p
-      id="text-input-error"
-      class="m-error-message"
-    >
-      {{ errorMsg }}
-    </p>
     <div class="m-input-wrapper m-autocomplete">
       <div
         v-if="!!slots.prefix"
@@ -73,11 +67,19 @@
     >
       {{ hint }}
     </p>
+    <form-error-message
+      id="text-input-error"
+      v-if="errorMsg"
+    >
+      {{ errorMsg }}
+    </form-error-message>
   </div>
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
 
+import FormErrorMessage from "./FormErrorMessage.vue";
+
 /**
  * Type includes all possible input types possible.
  */

src/components/Form/MucTextArea.vue

@@ -14,9 +14,6 @@
         <span class="visually-hidden">(erforderlich)</span>
       </span>
     </label>
-    <p class="m-error-message">
-      {{ errorMsg }}
-    </p>
     <div class="m-input-wrapper">
       <textarea
         class="m-textarea"
@@ -29,10 +26,15 @@
     <p class="m-hint">
       {{ hint }}
     </p>
+    <form-error-message v-if="errorMsg">
+      {{ errorMsg }}
+    </form-error-message>
   </div>
 </template>
 
 <script setup lang="ts">
+import FormErrorMessage from "./FormErrorMessage.vue";
+
 /**
  * Input value from the form component.
  */