move styling

packages/grafana-ui/src/components/FormGroup/FormField.tsx → packages/grafana-ui/src/components/FormField/FormField.tsx

@@ -16,7 +16,7 @@ const defaultProps = {
 
 const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
   return (
-    <div className="gf-form">
+    <div className="form-field">
       <Label width={labelWidth}>{label}</Label>
       <input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />
     </div>

packages/grafana-ui/src/components/FormField/_FormField.scss

@@ -0,0 +1,12 @@
+.form-field {
+  margin-bottom: $gf-form-margin;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  position: relative;
+
+  &--grow {
+    flex-grow: 1;
+  }
+}

packages/grafana-ui/src/components/index.scss

@@ -6,3 +6,4 @@
 @import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
 @import 'ColorPicker/ColorPicker';
+@import "FormField/FormField";

packages/grafana-ui/src/components/index.ts

@@ -11,7 +11,7 @@ export { default as resetSelectStyles } from './Select/resetSelectStyles';
 
 // Forms
 export { FormLabel } from './FormLabel/FormLabel';
-export { FormField } from './FormGroup/FormField';
+export { FormField } from './FormField/FormField';
 export { Label } from './Label/Label';
 
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';