fix(b-form-radio-group) make sure to pass state to form radio options for contextual feedback (closes #6357) (#6366)

TomSmith27 · TomSmith · jacobmllr95 · web-flow · commit 5d64a657bfbc · 2021-01-27T14:20:27.000+01:00
* fix(b-form-radio-group) make sure to pass state to form radio options for contextual feedback

* Update form-radio.js

* Update form-radio-check-group.js

* Update form-radio-group.spec.js

* Update form-checkbox-group.spec.js

* Update form-radio-group.spec.js

Co-authored-by: TomSmith &lt;tom.smith@3squared.com&gt;
Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/form-checkbox/form-checkbox-group.spec.js b/src/components/form-checkbox/form-checkbox-group.spec.js
@@ -184,6 +184,60 @@ describe('form-checkbox-group', () => {
     wrapper.destroy()
   })
 
+  it('has checkboxes with input validation class "is-valid" when `state` is `true`', async () => {
+    const wrapper = mount(BFormCheckboxGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: ['one', 'two', 'three'],
+        checked: '',
+        state: true
+      }
+    })
+
+    const $checkboxes = wrapper.findAll('input[type=checkbox]')
+    expect($checkboxes.length).toBe(3)
+    expect($checkboxes.wrappers.every(c => c.classes().includes('is-valid'))).toBe(true)
+    expect($checkboxes.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('has checkboxes with input validation class "is-invalid" when `state` is `false`', async () => {
+    const wrapper = mount(BFormCheckboxGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: ['one', 'two', 'three'],
+        checked: '',
+        state: false
+      }
+    })
+
+    const $checkboxes = wrapper.findAll('input[type=checkbox]')
+    expect($checkboxes.length).toBe(3)
+    expect($checkboxes.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
+    expect($checkboxes.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('has checkboxes with no input validation class when `state` is `null`', async () => {
+    const wrapper = mount(BFormCheckboxGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: ['one', 'two', 'three'],
+        checked: '',
+        state: null
+      }
+    })
+
+    const $checkboxes = wrapper.findAll('input[type=checkbox]')
+    expect($checkboxes.length).toBe(3)
+    expect($checkboxes.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
+    expect($checkboxes.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
+
+    wrapper.destroy()
+  })
+
   // --- Button mode structure ---
 
   it('button mode has classes button-group and button-group-toggle', async () => {
diff --git a/src/components/form-radio/form-radio-group.spec.js b/src/components/form-radio/form-radio-group.spec.js
@@ -167,6 +167,60 @@ describe('form-radio-group', () => {
     wrapper.destroy()
   })
 
+  it('has radios with input validation class "is-valid" when `state` is `true`', async () => {
+    const wrapper = mount(BFormRadioGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: ['one', 'two', 'three'],
+        checked: '',
+        state: true
+      }
+    })
+
+    const $radios = wrapper.findAll('input[type=radio]')
+    expect($radios.length).toBe(3)
+    expect($radios.wrappers.every(c => c.classes().includes('is-valid'))).toBe(true)
+    expect($radios.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('has radios with input validation class "is-invalid" when `state` is `false`', async () => {
+    const wrapper = mount(BFormRadioGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: ['one', 'two', 'three'],
+        checked: '',
+        state: false
+      }
+    })
+
+    const $radios = wrapper.findAll('input[type=radio]')
+    expect($radios.length).toBe(3)
+    expect($radios.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
+    expect($radios.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('has radios with no input validation class when `state` is `null`', async () => {
+    const wrapper = mount(BFormRadioGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: ['one', 'two', 'three'],
+        checked: '',
+        state: null
+      }
+    })
+
+    const $radios = wrapper.findAll('input[type=radio]')
+    expect($radios.length).toBe(3)
+    expect($radios.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
+    expect($radios.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
+
+    wrapper.destroy()
+  })
+
   // --- Button mode structure ---
 
   it('button mode has classes button-group and button-group-toggle', async () => {
diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js
@@ -1,43 +1,23 @@
 import { Vue } from '../../vue'
 import { NAME_FORM_RADIO } from '../../constants/components'
 import { looseEqual } from '../../utils/loose-equal'
-import { sortKeys } from '../../utils/object'
 import { makePropsConfigurable } from '../../utils/props'
-import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
 import {
   MODEL_EVENT_NAME,
   formRadioCheckMixin,
   props as formRadioCheckProps
 } from '../../mixins/form-radio-check'
-import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
-import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
-import { idMixin, props as idProps } from '../../mixins/id'
 
 // --- Props ---
 
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...idProps,
-    ...formControlProps,
-    ...formRadioCheckProps,
-    ...formSizeProps,
-    ...formStateProps
-  }),
-  NAME_FORM_RADIO
-)
+export const props = makePropsConfigurable(formRadioCheckProps, NAME_FORM_RADIO)
 
 // --- Main component ---
 
 // @vue/component
 export const BFormRadio = /*#__PURE__*/ Vue.extend({
   name: NAME_FORM_RADIO,
-  mixins: [
-    idMixin,
-    formRadioCheckMixin, // Includes shared render function
-    formControlMixin,
-    formSizeMixin,
-    formStateMixin
-  ],
+  mixins: [formRadioCheckMixin],
   inject: {
     bvGroup: {
       from: 'bvRadioGroup',
diff --git a/src/mixins/form-radio-check-group.js b/src/mixins/form-radio-check-group.js
@@ -132,7 +132,8 @@ export const formRadioCheckGroupMixin = Vue.extend({
             // We don't need to include these, since the input's will know they are inside here
             // form: this.form || null,
             // name: this.groupName,
-            // required: Boolean(this.name && this.required)
+            // required: Boolean(this.name && this.required),
+            // state: this.state
           },
           attrs,
           key
