fixed the height issues due to empty content [#153268701]

Signed-off-by: Stephane Jolicoeur <sjolicoeur@pivotal.io>
pivotal-cf · Nov 30, 2017 · e9a067b · e9a067b
1 parent a58c1b8
commit e9a067b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/spec/pivotal-ui-react/form/form-unit_spec.js b/spec/pivotal-ui-react/form/form-unit_spec.js
@@ -17,6 +17,20 @@ describe('FormUnit', () => {
     expect('.form-unit .label-row').not.toExist();
   });
 
+  describe('when no field is provided', () => {
+    beforeEach(() => {
+      subject = ReactDOM.render(<FormUnit {...{
+        className: 'my-class',
+        label: 'some label'
+      }} />, root);
+    });
+
+    it('does not render a field row', () => {
+      expect('.form-unit .field-row').not.toExist();
+    });
+  });
+
+
   describe('inline', () => {
     beforeEach(() => {
       subject::setProps({inline: true, label: 'Instance Name'});

diff --git a/src/css/forms/forms.scss b/src/css/forms/forms.scss
@@ -459,14 +459,20 @@ textarea.valid {
 
   .label-row {
     display: block;
-    line-height: 4 * $base-unit - 4;
+    line-height: 4 * $base-unit;
     min-height: 4 * $base-unit;
     font-weight: 600;
     font-size: 14px;
   }
 
+  .field-row {
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+  }
+
   .help-row {
-    line-height: 2 * $base-unit - 4;
+    line-height: 2 * $base-unit;
     min-height: 2 * $base-unit;
     font-weight: 400;
     font-size: 12px;

diff --git a/src/react/forms/form-unit.js b/src/react/forms/form-unit.js
@@ -50,7 +50,7 @@ export class FormUnit extends React.Component {
       </label>
     );
 
-    const fieldRow = <div className="field-row" key="field-row">{field}</div>;
+    const fieldRow = field && <div className="field-row" key="field-row">{field}</div>;
     const helpRow = hideHelpRow || <div className={classnames('help-row', {'type-dark-5': !hasError})}>{help}</div>;
 
     const sections = labelPosition === 'after' ? [fieldRow, labelRow] : [labelRow, fieldRow];