Streamline umb-checkbox and umb-radiobutton components (#8441)

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js

@@ -31,8 +31,9 @@
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
 @param {callback} onChange Callback when the value of the checkbox change by interaction.
-@param {string} cssClass Set a css class modifier
-@param {boolean} disableDirtyCheck Disable checking if the model is dirty
+@param {string} cssClass Set a css class modifier.
+@param {string} iconClass Set an icon next to checkbox.
+@param {boolean} disableDirtyCheck Disable checking if the model is dirty.
 
 **/
 

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js

@@ -26,10 +26,14 @@
 @param {string} value Set the value of the radiobutton.
 @param {string} name Set the name of the radiobutton.
 @param {string} text Set the text for the radiobutton label.
-@param {string} labelKey Set a dictinary/localization string for the checkbox label
+@param {string} labelKey Set a dictinary/localization string for the checkbox label.
+@param {string} serverValidationField Set the <code>val-server-field</code> of the radiobutton.
 @param {boolean} disabled Set the radiobutton to be disabled.
 @param {boolean} required Set the radiobutton to be required.
 @param {callback} onChange Callback when the value of the radiobutton change by interaction.
+@param {string} cssClass Set a css class modifier.
+@param {string} iconClass Set an icon next to radiobutton.
+@param {boolean} disableDirtyCheck Disable checking if the model is dirty.
 
 **/
 
@@ -77,9 +81,13 @@
             name: "@",
             text: "@",
             labelKey: "@?",
+            serverValidationField: "@",
             disabled: "<",
             required: "<",
-            onChange: "&?"
+            onChange: "&?",
+            cssClass: "@?",
+            iconClass: "@?",
+            disableDirtyCheck: "=?"
         }
     };
 

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html

@@ -32,10 +32,7 @@
         </span>
     </span>
     <span class="umb-form-check__info" ng-transclude>
-
         <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
-
         <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
-
     </span>
 </label>

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html

@@ -1,10 +1,25 @@
-<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
+<label class="radio umb-form-check umb-form-check--radiobutton {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <span class="umb-form-check__symbol">
-        <input type="radio"
+        <input ng-if="vm.disableDirtyCheck"
+            type="radio"
             id="{{vm.inputId}}"
             name="{{vm.name}}"
             value="{{vm.value}}"
             class="umb-form-check__input"
+            val-server-field="{{vm.serverValidationField}}"
+            ng-model="vm.model"
+            ng-disabled="vm.disabled"
+            ng-required="vm.required"
+            ng-change="vm.change()"
+            no-dirty-check />
+
+        <input ng-if="!vm.disableDirtyCheck"
+            type="radio"
+            id="{{vm.inputId}}"
+            name="{{vm.name}}"
+            value="{{vm.value}}"
+            class="umb-form-check__input"
+            val-server-field="{{vm.serverValidationField}}"
             ng-model="vm.model"
             ng-disabled="vm.disabled"
             ng-required="vm.required"
@@ -15,6 +30,7 @@
         </span>
     </span>
     <span class="umb-form-check__info" ng-transclude>
-        <span class="umb-form-check__text">{{vm.text}}</span>
+        <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
+        <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
     </span>
 </label>