Merge pull request #259 from rvsia/pf3MultipleChecbkoxesText

fix(pf3 multiple checkboxes): allow helperText and description

Author: Hyperkid123

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -12,6 +12,28 @@ const output = {
           description: 'Text boxes and text areas',
           name: '553',
           fields: [
+            {
+              name: 'check_box_1',
+              label: 'Check Box',
+              title: 'Check Box',
+              helperText: 'aaaa',
+              description: 'description',
+              component: components.CHECKBOX,
+              options: [
+                {
+                  label: 'Dog',
+                  value: '1',
+                },
+                {
+                  label: 'Cats',
+                  value: '2',
+                },
+                {
+                  label: 'Hamsters',
+                  value: '3',
+                },
+              ],
+            },
             {
               component: 'select-field',
               name: 'select-field-1',

packages/pf3-component-mapper/src/form-fields/form-fields.js

@@ -70,7 +70,7 @@ const selectComponent = ({
   [componentTypes.DATE_PICKER]: () => <DateTimePicker pristine={ meta.pristine } onChange={ input.onChange } value={ input.value } isDisabled={ isDisabled } { ...rest } />,
 })[componentType];
 
-const renderHelperText = (error, description) => (error // eslint-disable-line no-nested-ternary
+export const renderHelperText = (error, description) => (error // eslint-disable-line no-nested-ternary
   ? <HelpBlock>{ error }</HelpBlock>
   : description ? <HelpBlock>{ description }</HelpBlock> : null);
 

packages/pf3-component-mapper/src/form-fields/multiple-choice-list.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox,  FormGroup, ControlLabel } from 'patternfly-react';
+import { Checkbox,  FormGroup, ControlLabel, FieldLevelHelp } from 'patternfly-react';
 import { composeValidators } from '@data-driven-forms/react-form-renderer';
 
 import RequiredLabel from './required-label';
+import { renderHelperText } from './form-fields';
 
 const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
   <FieldProvider { ...props } validate={ composeValidators(props.validate || []) }>
@@ -15,6 +16,7 @@ const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
       options,
       isDisabled,
       isReadOnly,
+      description,
       ...rest
     }) => {
       const { error, touched } = meta;
@@ -24,6 +26,7 @@ const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
         <FormGroup validationState={ showError ? 'error' : null }>
           <ControlLabel>
             { (isRequired ? <RequiredLabel label={ label } /> : label) }
+            { helperText && <FieldLevelHelp content={ helperText } /> }
           </ControlLabel>
           <div>
             { options.map(option =>
@@ -52,6 +55,7 @@ const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
                 } }
               />)) }
           </div>
+          { renderHelperText(showError && meta.error, description) }
         </FormGroup>
       );
     } }

packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap

@@ -379,6 +379,15 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
               </MockFieldProvider>
             </FieldProvider>
           </div>
+          <HelpBlock
+            bsClass="help-block"
+          >
+            <span
+              className="help-block"
+            >
+              Error message
+            </span>
+          </HelpBlock>
         </div>
       </FormGroup>
     </MockFieldProvider>

packages/pf3-component-mapper/src/tests/multiple-choice-list.test.js

@@ -4,6 +4,7 @@ import toJson from 'enzyme-to-json';
 import MultipleChoiceList from '../form-fields/multiple-choice-list';
 import MockFieldProvider from '../../../../__mocks__/mock-field-provider';
 import RequiredLabel from '../form-fields/required-label';
+import { FieldLevelHelp, HelpBlock } from 'patternfly-react';
 
 describe('<MultipleChoiceList />', () => {
   let initialProps;
@@ -71,4 +72,19 @@ describe('<MultipleChoiceList />', () => {
     const wrapper = mount(<MultipleChoiceList { ...initialProps } isRequired label="Foo" />);
     expect(wrapper.find(RequiredLabel)).toHaveLength(1);
   });
+
+  it('should render helper text variant', () => {
+    const wrapper = mount(<MultipleChoiceList { ...initialProps } isRequired label="Foo" helperText="Helper text"/>);
+    expect(wrapper.find(FieldLevelHelp)).toHaveLength(1);
+
+    expect(wrapper.find(FieldLevelHelp).first().props().content).toEqual('Helper text');
+    expect(wrapper.find(HelpBlock)).toHaveLength(0);
+  });
+
+  it('should render description variant', () => {
+    const wrapper = mount(<MultipleChoiceList { ...initialProps } isRequired label="Foo" description="Description"/>);
+    expect(wrapper.find(FieldLevelHelp)).toHaveLength(0);
+    expect(wrapper.find(HelpBlock)).toHaveLength(1);
+    expect(wrapper.find(HelpBlock).first().text()).toEqual('Description');
+  });
 });