feat(form): optional support all field errors in inline prompt

According to the (unclear) docs there are two possibilities to show errors in an inline prompt label. You can supply either a string or an array of strings.

However, this was always ignored. It always uses only the very first field error, regardless how many other errors may exists.

The error message instead (when not using inline errors) is always showing all possible rule errors by default.
This PR now also shows all errors of a field in an inline prompt label just like the error message already does.

That said, the existing prompt template now, more logical, is used to created the label content (just like the error template does for non inline errors), rather than the label node itself (this is now done automatically).

Even if this is a breaking change, i doubt the prompt label was ever customised by somebody , because of the overriding logic (which made the prompt template useless.)

The previous behavior totally ignored the prompt templates inner content, because right after that, the html content inside the label was immediatly overridden all the time. (see comments below)

Author: lubber-de

src/definitions/behaviors/form.js

@@ -887,13 +887,13 @@ $.fn.form = function(parameters) {
             }
             if(settings.inline) {
               if(!promptExists) {
-                $prompt = settings.templates.prompt(errors, className.label);
+                $prompt = $('<div/>').addClass(className.label);
                 $prompt
                   .appendTo($fieldGroup)
                 ;
               }
               $prompt
-                .html(errors[0])
+                .html(settings.templates.prompt(errors))
               ;
               if(!promptExists) {
                 if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
@@ -1638,15 +1638,22 @@ $.fn.form.settings = {
         html += '<li>' + value + '</li>';
       });
       html += '</ul>';
-      return $(html);
+      return html;
     },
 
-    // template that produces label
-    prompt: function(errors, labelClasses) {
-      return $('<div/>')
-        .addClass(labelClasses)
-        .html(errors[0])
+    // template that produces label content
+    prompt: function(errors) {
+      if(errors.length === 1){
+        return errors[0];
+      }
+      var
+          html = '<ul class="ui list">'
       ;
+      $.each(errors, function(index, value) {
+        html += '<li>' + value + '</li>';
+      });
+      html += '</ul>';
+      return html;
     }
   },
 

src/definitions/collections/form.less

@@ -325,6 +325,9 @@
   background: @promptBackground !important;
   border: @promptBorder !important;
   color: @promptTextColor !important;
+  & li:before {
+    color: @promptTextColor;
+  }
 }
 & when (@variationFormInline) {
   .ui.form .inline.fields .field .prompt,