Merge pull request #266 from rvsia/add-helpertext-to-single-checkbox

fix(pf3): add helpertext to single checkbox

Author: Hyperkid123

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

@@ -29,13 +29,17 @@ const selectComponent = ({
   initialValue,
   loadOptions,
   meta,
+  helperText,
   ...rest
 }) => ({
   [componentTypes.TEXT_FIELD]: () =>
     <FormControl { ...input } placeholder={ placeholder } disabled={ isDisabled } readOnly={ isReadOnly } { ...rest } />,
   [componentTypes.TEXTAREA_FIELD]: () =>
     <FormControl { ...input } disabled={ isDisabled } readOnly={ isReadOnly } { ...rest } componentClass="textarea" placeholder={ placeholder }/>,
-  [componentTypes.CHECKBOX]: () => <Checkbox { ...input } disabled={ isDisabled || isReadOnly }>{ label }</Checkbox>,
+  [componentTypes.CHECKBOX]: () =>(<Checkbox { ...input } disabled={ isDisabled || isReadOnly }>
+    { label }
+    { helperText && <FieldLevelHelp content={ helperText } /> }
+  </Checkbox>),
   [componentTypes.RADIO]: () => (
     <RagioGroup
       options={ options }
@@ -93,7 +97,7 @@ const FinalFormField = ({
             { rest.isRequired ? <RequiredLabel label={ label } /> : label }
             { helperText && <FieldLevelHelp content={ helperText } /> }
           </ControlLabel> }
-      { selectComponent({ ...rest, invalid, label, meta })() }
+      { selectComponent({ ...rest, invalid, label, meta, helperText })() }
       { renderHelperText(invalid && meta.error, description) }
     </FormGroup>
   );

packages/pf3-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap

@@ -69,6 +69,136 @@ exports[`FormFields <CheckboxGroup /> should render single checkbox variant 1`]
 </CheckboxGroup>
 `;
 
+exports[`FormFields <CheckboxGroup /> should render single checkbox variant with a helper text 1`] = `
+<CheckboxGroup
+  FieldProvider={[Function]}
+  helperText="Helper text"
+  input={
+    Object {
+      "name": "single-check-box",
+    }
+  }
+  meta={Object {}}
+>
+  <FieldInterface
+    FieldProvider={[Function]}
+    componentType="checkbox"
+    helperText="Helper text"
+    input={
+      Object {
+        "name": "single-check-box",
+      }
+    }
+    meta={Object {}}
+    name="single-check-box"
+  >
+    <FinalFormField
+      FieldProvider={[Function]}
+      componentType="checkbox"
+      helperText="Helper text"
+      id="single-check-box"
+      input={
+        Object {
+          "name": "single-check-box",
+        }
+      }
+      meta={Object {}}
+      name="single-check-box"
+      noCheckboxLabel={true}
+    >
+      <FormGroup
+        bsClass="form-group"
+        validationState={null}
+      >
+        <div
+          className="form-group"
+        >
+          <Checkbox
+            bsClass="checkbox"
+            disabled={false}
+            inline={false}
+            name="single-check-box"
+            title=""
+          >
+            <div
+              className="checkbox"
+            >
+              <label
+                title=""
+              >
+                <input
+                  disabled={false}
+                  name="single-check-box"
+                  type="checkbox"
+                />
+                <FieldLevelHelp
+                  buttonClass=""
+                  content="Helper text"
+                  placement="top"
+                  rootClose={true}
+                >
+                  <OverlayTrigger
+                    defaultOverlayShown={false}
+                    overlay={
+                      <Popover
+                        bsClass="popover"
+                        id="popover"
+                        placement="right"
+                      >
+                        Helper text
+                      </Popover>
+                    }
+                    placement="top"
+                    rootClose={true}
+                    trigger={
+                      Array [
+                        "click",
+                      ]
+                    }
+                  >
+                    <Button
+                      active={false}
+                      block={false}
+                      bsClass="btn"
+                      bsStyle="link"
+                      className="popover-pf-info"
+                      disabled={false}
+                      onClick={[Function]}
+                    >
+                      <button
+                        className="popover-pf-info btn btn-link"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <Icon
+                          name="info"
+                          type="pf"
+                        >
+                          <PatternflyIcon
+                            className=""
+                            name="info"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="pficon pficon-info"
+                            />
+                          </PatternflyIcon>
+                        </Icon>
+                      </button>
+                    </Button>
+                  </OverlayTrigger>
+                </FieldLevelHelp>
+              </label>
+            </div>
+          </Checkbox>
+        </div>
+      </FormGroup>
+    </FinalFormField>
+  </FieldInterface>
+</CheckboxGroup>
+`;
+
 exports[`FormFields <Radio /> should render correctly 1`] = `
 <Radio
   FieldProvider={[Function]}

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

@@ -4,6 +4,7 @@ import { SwitchField, CheckboxGroup, Radio, TextareaField, TextField } from '../
 import { mount } from 'enzyme';
 import MockFieldProvider from '../../../../__mocks__/mock-field-provider';
 import MultipleChoiceList from '../form-fields/multiple-choice-list';
+import { FieldLevelHelp } from 'patternfly-react';
 
 describe('FormFields', () => {
   describe('<SwitchField />', () => {
@@ -111,6 +112,13 @@ describe('FormFields', () => {
     it('should render single checkbox variant', () => {
       const wrapper = mount(<CheckboxGroup { ...initialProps } />);
       expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.find(FieldLevelHelp)).toHaveLength(0);
+    });
+
+    it('should render single checkbox variant with a helper text', () => {
+      const wrapper = mount(<CheckboxGroup { ...initialProps } helperText="Helper text"/>);
+      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.find(FieldLevelHelp)).toHaveLength(1);
     });
 
     it('should render multiple choice variant', () => {