FormGroup component and implements

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

@@ -0,0 +1,27 @@
+import React, { SFC } from 'react';
+import { Label } from '..';
+
+interface Props {
+  label: string;
+  inputProps: {};
+  labelWidth?: number;
+  inputWidth?: number;
+}
+
+const defaultProps = {
+  labelWidth: 6,
+  inputProps: {},
+  inputWidth: 12,
+};
+
+const FormGroup: SFC<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
+  return (
+    <div className="gf-form">
+      <Label width={labelWidth}>{label}</Label>
+      <input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />
+    </div>
+  );
+};
+
+FormGroup.defaultProps = defaultProps;
+export { FormGroup };

packages/grafana-ui/src/components/Label/Label.tsx

@@ -0,0 +1,25 @@
+import React, { SFC, ReactNode } from 'react';
+import { Tooltip } from '@grafana/ui';
+
+interface Props {
+  tooltip?: string;
+  for?: string;
+  children: ReactNode;
+  width?: number;
+  className?: string;
+}
+
+export const Label: SFC<Props> = props => {
+  return (
+    <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
+      <span>{props.children}</span>
+      {props.tooltip && (
+        <Tooltip placement="auto" content={props.tooltip}>
+          <div className="gf-form-help-icon--right-normal">
+            <i className="gicon gicon-question gicon--has-hover" />
+          </div>
+        </Tooltip>
+      )}
+    </span>
+  );
+};

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

@@ -9,12 +9,16 @@ export { IndicatorsContainer } from './Select/IndicatorsContainer';
 export { NoOptionsMessage } from './Select/NoOptionsMessage';
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 
+// Forms
+export { GfFormLabel } from './GfFormLabel/GfFormLabel';
+export { FormGroup } from './FormGroup/FormGroup';
+export { Label } from './Label/Label';
+
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
-export { GfFormLabel } from './GfFormLabel/GfFormLabel';
 export { Graph } from './Graph/Graph';
 export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
 export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';