Confirm uninstall package: Change old checkbox to use umb-checkbox (#6858)

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

@@ -31,6 +31,7 @@
 @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
 
 **/
 
@@ -78,7 +79,8 @@
             serverValidationField: "@",
             disabled: "<",
             required: "<",
-            onChange: "&?"
+            onChange: "&?",
+            cssClass: "@?"
         }
     };
 

src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less

@@ -12,6 +12,14 @@
     line-height: 22px;
     cursor: pointer !important;
 
+    &.-small-text{
+        font-size: 13px;
+    }
+
+    &.-bold{
+        font-weight: 700;
+    }
+
     &__text {
         margin: 0 0 0 26px;
         position: relative;

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

@@ -1,4 +1,4 @@
-<label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
+<label class="checkbox umb-form-check umb-form-check--checkbox {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <input type="checkbox"
            id="{{vm.inputId}}"
            name="{{vm.name}}"

src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html

@@ -97,10 +97,15 @@
                         </div>
 
                         <div class="umb-info-local-item mt4 flex items-center flex-column" ng-if="vm.installState.status == ''">
-                            <label for="confirm-uninstall" class="umb-package-installer-label">
-                                <input type="checkbox" id="confirm-uninstall" ng-model="vm.package.confirmUninstall" required no-dirty-check>
-                                <strong class="label-text"><localize key="packager_packageUninstallConfirm">Confirm package uninstall</localize></strong>
-                            </label>
+
+                            <umb-checkbox
+                                css-class="-small-text -bold"
+                                model="vm.package.confirmUninstall"
+                                text="Confirm package uninstall"
+                                label-key="packager_packageUninstallConfirm"
+                                required="true">
+                            </umb-checkbox>
+
                             <umb-button
                                 class="mt3"
                                 type="button"