feat(core/presentation): Put margin between StandardFieldLayout's inp…

…ut and validation (#7476)
spinnaker · Oct 2, 2019 · dc2a74b · dc2a74b
1 parent 6cd7e9d
commit dc2a74b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/app/scripts/modules/core/src/presentation/flex-layout.less b/app/scripts/modules/core/src/presentation/flex-layout.less
@@ -81,6 +81,24 @@
   &.space-between {
     justify-content: space-between;
   }
+
+  &.margin-between-sm {
+    > * + * {
+      margin-top: 4px;
+    }
+  }
+
+  &.margin-between-md {
+    > * + * {
+      margin-top: 8px;
+    }
+  }
+
+  &.margin-between-lg {
+    > * + * {
+      margin-top: 12px;
+    }
+  }
 }
 
 // TODO(archana): Fix !important by removing the nowrap from the flex-container-h and v and testing to

diff --git a/app/scripts/modules/core/src/presentation/forms/layouts/StandardFieldLayout.tsx b/app/scripts/modules/core/src/presentation/forms/layouts/StandardFieldLayout.tsx
@@ -28,12 +28,12 @@ export class StandardFieldLayout extends React.Component<IFieldLayoutProps> {
         )}
 
         <div className="flex-grow">
-          <div className="flex-container-v">
+          <div className="flex-container-v margin-between-md">
             <div className="flex-container-h baseline margin-between-lg StandardFieldLayout_Contents">
               {input} {actions}
             </div>
 
-            <div className="StandardFieldLayout_Validation">{validation}</div>
+            {validation && <div className="StandardFieldLayout_Validation">{validation}</div>}
           </div>
         </div>
       </div>