improvement(checkbox): markup change

Updated markup so label no longer wraps checkbox and radio input unless it is a toggle control

#581

package.json

@@ -106,7 +106,7 @@
     "tag:minor": "babel-node -- node_modules/gulp/bin/gulp tag --minor",
     "release:patch": "npm run tag:patch --patch && npm run deploy",
     "release:minor": "npm run tag:minor --minor && npm run deploy",
-    "start": "babel-node -- node_modules/webpack/bin/webpack -d --progress --config tools/webpack.config | babel-node -- node_modules/webpack-dev-server/bin/webpack-dev-server --config tools/webpack.config",
+    "start": "babel-node -- node_modules/webpack-dev-server/bin/webpack-dev-server --config tools/webpack.config",
     "build": "babel-node -- node_modules/webpack/bin/webpack -p --progress --config tools/webpack.config && cp demo/assets/js/form-* dist/",
     "build:vendor": "babel-node -- tools/run build-vendor",
     "build:plugins": "babel-node -- node_modules/webpack/bin/webpack -p --display-entrypoints --progress --config tools/webpack.plugins.config"

src/js/control/select.js

@@ -71,6 +71,7 @@ export default class controlSelect extends control {
           options.push(o);
         } else {
           let wrapperClass = optionType;
+          let labelContents = [label];
           if (inline) {
             wrapperClass += '-inline';
           }
@@ -81,15 +82,16 @@ export default class controlSelect extends control {
           }
           let input = this.markup('input', null, Object.assign({}, data, optionAttrs));
           let labelAttrs = {for: optionAttrs.id};
-          let labelContent = [input, label];
+          label = this.markup('label', labelContents, labelAttrs);
+          let output = [input, label];
           if (toggle) {
-            let kcToggle = this.markup('span');
-            labelContent = [input, kcToggle, label];
             labelAttrs.className = 'kc-toggle';
+            // output.splice(1, 0, this.markup('span'));
+            labelContents.unshift(input, this.markup('span'));
+            output = this.markup('label', labelContents, labelAttrs);
           }
 
-          let inputLabel = this.markup('label', labelContent, labelAttrs);
-          let wrapper = this.markup('div', inputLabel, {className: wrapperClass});
+          let wrapper = this.markup('div', output, {className: wrapperClass});
           options.push(wrapper);
         }
       }

src/js/form-builder.js

@@ -1404,7 +1404,7 @@ let stageOnChangeSelectors = [
     let enableRolesCB = $(e.target);
     roles.slideToggle(250, function() {
       if (!enableRolesCB.is(':checked')) {
-        $('input[type="checkbox"]', roles).removeAttr('checked');
+        $('input[type=checkbox]', roles).removeAttr('checked');
       }
     });
   });

src/sass/_kc-toggle.scss

@@ -13,6 +13,7 @@
     overflow: hidden;
     float: left;
     margin-right: 5px;
+    will-change: transform;
 
     &::after,
     &::before {
@@ -30,7 +31,7 @@
       border-radius: 3px;
       background: linear-gradient(to bottom, lighten($grey-light-30, 30%) 0%, $grey-light 100%);
       border: 1px solid lighten($grey, 20%);
-      transition: transform 50ms;
+      transition: transform 100ms;
       transform: translateX(0);
     }
 

src/sass/_stage.scss

@@ -311,6 +311,7 @@
     input[type='checkbox'],
     input[type='radio'] {
       display: inline-block;
+      margin-left: 0;
     }
 
     input[type='color'] {

src/sass/base/_bs.scss

@@ -218,6 +218,12 @@ textarea.form-control {
   color: $error;
 }
 
+.fb-checkbox-group {
+  .checkbox input {
+    margin-left: 0;
+  }
+}
+
 .fb-checkbox-inline,
 .fb-radio-inline {
   display: inline-block;

src/sass/form-builder.scss

@@ -109,13 +109,6 @@ textarea {
   }
 }
 
-.fresh .frmb .legend .element-info {
-  display: inline-block;
-  visibility: visible;
-  line-height: 12px;
-  margin-left: 6px;
-}
-
 .frmb-xml .ui-dialog-content {
   white-space: pre-wrap;
   word-wrap: break-word;