From 05cb42417877533464057b2e1a31f4aaf039514c Mon Sep 17 00:00:00 2001
From: Jonathan Berney <jberney@pivotal.io>
Date: Thu, 7 Dec 2017 10:38:56 -0800
Subject: [PATCH] Fix vertical alignment of inline form units in IE
 [#153417045]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
---
 spec/pivotal-ui-react/form/form-unit_spec.js | 4 ++++
 src/css/forms/forms.scss                     | 6 ++++++
 src/react/forms/form-unit.js                 | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/spec/pivotal-ui-react/form/form-unit_spec.js b/spec/pivotal-ui-react/form/form-unit_spec.js
index c7f4413b6..af86f33ed 100644
--- a/spec/pivotal-ui-react/form/form-unit_spec.js
+++ b/spec/pivotal-ui-react/form/form-unit_spec.js
@@ -40,6 +40,10 @@ describe('FormUnit', () => {
       expect('.form-unit .grid:eq(0) > .col:eq(0)').toHaveText('Instance Name');
       expect('.form-unit .grid:eq(0) > .col:eq(1)').toHaveText('hello');
     });
+
+    it('applies the "inline-form-unit" class to the form unit', () => {
+      expect('.form-unit').toHaveClass('inline-form-unit');
+    });
   });
 
   describe('hideHelpRow', () => {
diff --git a/src/css/forms/forms.scss b/src/css/forms/forms.scss
index b94238116..579dd8ec0 100644
--- a/src/css/forms/forms.scss
+++ b/src/css/forms/forms.scss
@@ -492,6 +492,12 @@ textarea.valid {
     }
   }
 
+  &.inline-form-unit {
+    .field-row {
+      height: 32px;
+    }
+  }
+
   &.has-error {
     .help-row {
       color: $input-invalid-text;
diff --git a/src/react/forms/form-unit.js b/src/react/forms/form-unit.js
index 73ac5f34c..c384d1c9b 100644
--- a/src/react/forms/form-unit.js
+++ b/src/react/forms/form-unit.js
@@ -89,7 +89,7 @@ export class FormUnit extends React.Component {
     ) : sections;
 
     return (
-      <div className={classnames('form-unit', className, {'has-error': hasError})}>
+      <div className={classnames('form-unit', className, {'has-error': hasError, 'inline-form-unit': inline})}>
         {content}
         {helpRow}
       </div>