Restore functionality of hideHelpRow in inline FormUnits [#153690309]

Signed-off-by: Jonathan Berney <jberney@pivotal.io>
pivotal-cf · Dec 15, 2017 · 93ea7ab · 93ea7ab
1 parent 284478f
commit 93ea7ab
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/spec/pivotal-ui-react/form/form-unit_spec.js b/spec/pivotal-ui-react/form/form-unit_spec.js
@@ -60,6 +60,16 @@ describe('FormUnit', () => {
     });
   });
 
+  describe('inline and hideHelpRow', () => {
+    beforeEach(() => {
+      subject::setProps({inline: true, hideHelpRow: true});
+    });
+
+    it('does not render the help row', () => {
+      expect('.form-unit .help-row').not.toExist();
+    });
+  });
+
   describe('label', () => {
     beforeEach(() => {
       subject::setProps({

diff --git a/src/react/forms/form-unit.js b/src/react/forms/form-unit.js
@@ -72,8 +72,7 @@ export class FormUnit extends React.Component {
 
     const fieldRow = field && (inline ? field : <div className="field-row" key="field-row">{field}</div>);
     const helpRowClassName = classnames('help-row', {'type-dark-5': !hasError});
-    const helpRow = hideHelpRow || (inline ? help :
-        <div className={helpRowClassName} key="help-row">{help}</div>);
+    const helpRow = inline ? help : <div className={helpRowClassName} key="help-row">{help}</div>;
 
     const sections = labelPosition === 'after' ? [fieldRow, labelRow] : [labelRow, fieldRow];
 
@@ -87,13 +86,22 @@ export class FormUnit extends React.Component {
               'field-row': key === 0 && labelPosition === 'after' || key === 1 && labelPosition !== 'after'
             })
           }}>{col}</FlexCol>)}
-        </Grid>,
-        <Grid key="bottom">
-          <FlexCol className={helpRowClassName}>
-            {helpRow}
-          </FlexCol>
         </Grid>]
-    ) : sections.concat(helpRow);
+    ) : sections;
+
+    if (!hideHelpRow) {
+      if (inline) {
+        content.push((
+          <Grid key="bottom">
+            <FlexCol className={helpRowClassName}>
+              {helpRow}
+            </FlexCol>
+          </Grid>
+        ));
+      } else {
+        content.push(helpRow);
+      }
+    }
 
     return (
       <div className={classnames('form-unit', className, {'has-error': hasError, 'inline-form-unit': inline})}>