feat(forms): include form help

Author: assisrafael

demo/FormExamples.jsx

@@ -105,7 +105,7 @@ export function FormExamples() {
     >
       <div className="row">
         <div className="col">
-          <FormGroupInput name="textField" label="Text field" disabled />
+          <FormGroupInput name="textField" label="Text field" disabled help="Text field help" />
         </div>
         <div className="col">
           <FormGroupInput name="textField2" label="Text field 2" required placeholder="Fill some value" />
@@ -131,13 +131,14 @@ export function FormExamples() {
             options={['1234', '2345', '3456']}
             placeholder="Type some numbers"
             disabled
+            help="Autocomplete help"
           />
         </div>
         <div className="col">
           <FormGroupAutocomplete
             name="autocompleteField2"
             label="Autocomplete that opens on focus"
-            options={(formData, searchValue) => {
+            options={(_, searchValue) => {
               if (searchValue.length < 2) {
                 return ['Abcde', 'Fghij', 'klmno'];
               }
@@ -171,7 +172,13 @@ export function FormExamples() {
 
       <div className="row">
         <div className="col-4">
-          <FormGroupSelect name="selectField" label="Select field (list)" options={['A', 'B', 'C']} disabled />
+          <FormGroupSelect
+            name="selectField"
+            label="Select field (list)"
+            options={['A', 'B', 'C']}
+            disabled
+            help="Select help"
+          />
         </div>
         <div className="col-4">
           <FormGroupSelect name="selectNumberField" label="Select field (number list)" options={[1, 2, 3, 4]} />
@@ -228,7 +235,14 @@ export function FormExamples() {
 
       <div className="row">
         <div className="col">
-          <FormGroupSwitch id="switchFieldId" name="switchField" label="Switch field" trueLabel="ON" falseLabel="OFF" />
+          <FormGroupSwitch
+            id="switchFieldId"
+            name="switchField"
+            label="Switch field"
+            trueLabel="ON"
+            falseLabel="OFF"
+            help="Switch help"
+          />
         </div>
         <div className="col">
           <FormGroupSwitch id="switchFieldId2" name="switchField2" label="Switch field 2" disabled />
@@ -239,6 +253,7 @@ export function FormExamples() {
             name="checkboxField"
             label="Checkbox field"
             valueLabel="Checkbox description"
+            help="Checkbox help"
           />
         </div>
         <div className="col">
@@ -263,6 +278,7 @@ export function FormExamples() {
                 label: 'C',
               },
             ]}
+            help="Radio help"
           />
         </div>
         <div className="col">
@@ -285,7 +301,7 @@ export function FormExamples() {
         </div>
       </div>
 
-      <FormGroupTextarea name="textareaField" label="Textarea field" />
+      <FormGroupTextarea name="textareaField" label="Textarea field" help="Textarea help" />
       <FormGroupTextarea name="textareaField2" label="Textarea field 2" disabled rows="1" />
 
       {[0, 1].map((index) => (

src/forms/FormGroup.jsx

@@ -9,13 +9,15 @@ import { FormSelect } from './FormSelect';
 import { FormSwitch } from './FormSwitch';
 import { FormTextarea } from './FormTextarea';
 import { FormValidationFeedback } from './FormValidationFeedback';
+import { FormHelp } from './FormHelp';
 
-export function FormGroup({ children, name, feedback, mockInvalidSibling, ...props }) {
+export function FormGroup({ children, name, feedback, mockInvalidSibling, help, ...props }) {
   return (
     <div className="form-group">
       <FormLabel {...props} />
       {children}
       {feedback && <FormValidationFeedback mockInvalidSibling={mockInvalidSibling} name={name} />}
+      {help && <FormHelp message={help} />}
     </div>
   );
 }
@@ -28,6 +30,7 @@ FormGroup.defaultProps = {
 FormGroup.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   feedback: PropTypes.bool,
+  help: PropTypes.node,
   label: PropTypes.node.isRequired,
   mockInvalidSibling: PropTypes.bool,
   name: PropTypes.string.isRequired,
@@ -44,6 +47,7 @@ export function FormGroupAutocomplete(props) {
 FormGroupAutocomplete.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   filter: PropTypes.func,
+  help: PropTypes.node,
   id: PropTypes.string,
   label: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
@@ -70,6 +74,7 @@ export function FormGroupCheckbox(props) {
 FormGroupCheckbox.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   falseLabel: PropTypes.node,
+  help: PropTypes.node,
   id: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
@@ -87,6 +92,7 @@ export function FormGroupInput(props) {
 
 FormGroupInput.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  help: PropTypes.node,
   id: PropTypes.string,
   label: PropTypes.node.isRequired,
   max: PropTypes.string,
@@ -126,6 +132,7 @@ FormGroupRadio.defaultProps = {
 
 FormGroupRadio.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  help: PropTypes.node,
   id: PropTypes.string,
   inline: PropTypes.bool,
   label: PropTypes.node.isRequired,
@@ -149,6 +156,7 @@ export function FormGroupSelect(props) {
 
 FormGroupSelect.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  help: PropTypes.node,
   id: PropTypes.string,
   label: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
@@ -181,6 +189,7 @@ export function FormGroupSwitch(props) {
 FormGroupSwitch.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   falseLabel: PropTypes.node,
+  help: PropTypes.node,
   id: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
@@ -198,6 +207,7 @@ export function FormGroupTextarea(props) {
 
 FormGroupTextarea.propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  help: PropTypes.node,
   id: PropTypes.string,
   label: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,

src/forms/FormHelp.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { formatClasses } from '../utils/attributes';
+
+export function FormHelp({ id, inline, message }) {
+  return (
+    <small id={`${id}-help`} className={formatClasses(['text-muted', inline ? 'ml-2' : 'form-text'])}>
+      {message}
+    </small>
+  );
+}
+
+FormHelp.defaultProps = {
+  inline: false,
+};
+
+FormHelp.propTypes = {
+  id: PropTypes.string,
+  message: PropTypes.node.isRequired,
+  inline: PropTypes.bool,
+};