fix(checkbox,radio): update HTML markup for BS4 (bootstrap-vue#1539)

johnrazeur · pi0 · commit ccfb5b1f45cc · 2018-01-23T12:09:28.000+03:30
* add for attribute in form-checkbox.js for bootstrap beta-3

* update form-radio.js for bootstrap beta-3
diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js
@@ -56,7 +56,10 @@ export default {
 
     const description = h(
       t.is_ButtonMode ? 'span' : 'label',
-      { class: t.is_ButtonMode ? null : (t.is_Plain ? 'form-check-label' : 'custom-control-label') },
+      {
+        class: t.is_ButtonMode ? null : (t.is_Plain ? 'form-check-label' : 'custom-control-label'),
+        attrs: { for: t.is_ButtonMode ? null : t.safeId() }
+      },
       [t.$slots.default]
     )
 
diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js
@@ -32,27 +32,31 @@ export default {
       }
     )
 
-    let indicator = h(false)
-    if (!t.is_ButtonMode && !t.is_Plain) {
-      indicator = h('span', { class: 'custom-control-indicator', attrs: { 'aria-hidden': 'true' } })
-    }
-
     const description = h(
-      'span',
-      { class: t.is_ButtonMode ? null : (t.is_Plain ? 'form-check-description' : 'custom-control-description') },
+      t.is_ButtonMode ? 'span' : 'label',
+      {
+        class: t.is_ButtonMode ? null : (t.is_Plain ? 'form-check-label' : 'custom-control-label'),
+        attrs: { for: t.is_ButtonMode ? null : t.safeId() }
+      },
       [ t.$slots.default ]
     )
 
-    const label = h(
-      'label',
-      { class: [ t.is_ButtonMode ? t.buttonClasses : t.is_Plain ? 'form-check-label' : t.labelClasses ] },
-      [ input, indicator, description ]
-    )
-
-    if (t.is_Plain && !t.is_ButtonMode) {
-      return h('div', { class: ['form-check', {'form-check-inline': !t.is_Stacked}] }, [ label ])
+    if (!t.is_ButtonMode) {
+      return h(
+        'div',
+        { class: [
+          t.is_Plain ? 'form-check' : t.labelClasses,
+          { 'form-check-inline': t.is_Plain && !t.is_Stacked },
+          { 'custom-control-inline': !t.is_Plain && !t.is_Stacked }
+        ] },
+        [input, description]
+      )
     } else {
-      return label
+      return h(
+        'label',
+        { class: [t.buttonClasses] },
+        [input, description]
+      )
     }
   },
   watch: {
