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/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';

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 
-import { Label } from 'app/core/components/Label/Label';
+import { Label } from '../../../../../packages/grafana-ui/src/components/Label/Label';
 import { Select } from '@grafana/ui';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 

public/app/features/datasources/settings/BasicSettings.tsx

@@ -1,5 +1,5 @@
 import React, { SFC } from 'react';
-import { Label } from 'app/core/components/Label/Label';
+import { Label } from '../../../../../packages/grafana-ui/src/components/Label/Label';
 import { Switch } from '../../../core/components/Switch/Switch';
 
 export interface Props {

public/app/features/teams/TeamSettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { Label } from 'app/core/components/Label/Label';
+import { Label } from '../../../../packages/grafana-ui/src/components/Label/Label';
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { updateTeam } from './state/actions';
 import { getRouteParamsId } from 'app/core/selectors/location';

public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
-import { Label } from '../../../core/components/Label/Label';
+import { FormGroup } from '@grafana/ui/src';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
@@ -21,14 +21,16 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
 
     return (
       <PanelOptionsGroup title="Gauge">
-        <div className="gf-form">
+        <FormGroup
-          <Label width={8}>Min value</Label>
+          label="Min value"
-          <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
+          labelWidth={8}
-        </div>
+          inputProps={{ onChange: event => this.onMinValueChange(event), value: minValue }}
-        <div className="gf-form">
+        />
-          <Label width={8}>Max value</Label>
+        <FormGroup
-          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
+          label="Max value"
-        </div>
+          labelWidth={8}
+          inputProps={{ onChange: event => this.onMaxValueChange(event), value: maxValue }}
+        />
         <Switch
           label="Show labels"
           labelClass="width-8"

public/app/plugins/panel/gauge/MappingRow.tsx

@@ -1,7 +1,5 @@
 import React, { PureComponent } from 'react';
-import { MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
+import { FormGroup, Label, MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
-
-import { Label } from 'app/core/components/Label/Label';
 
 interface Props {
   mapping: ValueMap | RangeMap;
@@ -63,48 +61,52 @@ export default class MappingRow extends PureComponent<Props, State> {
     if (type === MappingType.RangeToText) {
       return (
         <>
-          <div className="gf-form">
+          <FormGroup
-            <Label width={4}>From</Label>
+            label="From"
-            <input
+            labelWidth={4}
-              className="gf-form-input width-8"
+            inputProps={{
-              value={from}
+              onChange: event => this.onMappingFromChange(event),
-              onBlur={this.updateMapping}
+              onBlur: () => this.updateMapping(),
-              onChange={this.onMappingFromChange}
+              value: from,
-            />
+            }}
-          </div>
+            inputWidth={8}
-          <div className="gf-form">
+          />
-            <Label width={4}>To</Label>
+          <FormGroup
-            <input
+            label="To"
-              className="gf-form-input width-8"
+            labelWidth={4}
-              value={to}
+            inputProps={{
-              onBlur={this.updateMapping}
+              onBlur: () => this.updateMapping,
-              onChange={this.onMappingToChange}
+              onChange: event => this.onMappingToChange(event),
-            />
+              value: to,
-          </div>
+            }}
-          <div className="gf-form">
+            inputWidth={8}
-            <Label width={4}>Text</Label>
+          />
-            <input
+          <FormGroup
-              className="gf-form-input width-10"
+            label="Text"
-              value={text}
+            labelWidth={4}
-              onBlur={this.updateMapping}
+            inputProps={{
-              onChange={this.onMappingTextChange}
+              onBlur: () => this.updateMapping,
-            />
+              onChange: event => this.onMappingTextChange(event),
-          </div>
+              value: text,
+            }}
+            inputWidth={10}
+          />
         </>
       );
     }
 
     return (
       <>
-        <div className="gf-form">
+        <FormGroup
-          <Label width={4}>Value</Label>
+          label="Value"
-          <input
+          labelWidth={4}
-            className="gf-form-input width-8"
+          inputProps={{
-            onBlur={this.updateMapping}
+            onBlur: () => this.updateMapping,
-            onChange={this.onMappingValueChange}
+            onChange: event => this.onMappingValueChange(event),
-            value={value}
+            value: value,
-          />
+          }}
-        </div>
+          inputWidth={8}
+        />
         <div className="gf-form gf-form--grow">
           <Label width={4}>Text</Label>
           <input

public/app/plugins/panel/gauge/ValueOptions.tsx

@@ -1,8 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
+import { FormGroup, Label, GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
-
-import { Label } from 'app/core/components/Label/Label';
-import { Select} from '@grafana/ui';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
 
 const statOptions = [
@@ -54,24 +51,32 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
           <Label width={labelWidth}>Unit</Label>
           <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
         </div>
-        <div className="gf-form">
+        <FormGroup
-          <Label width={labelWidth}>Decimals</Label>
+          label="Decimals"
-          <input
+          labelWidth={labelWidth}
-            className="gf-form-input width-12"
+          inputProps={{
-            type="number"
+            placeholder: 'auto',
-            placeholder="auto"
+            onChange: event => this.onDecimalChange(event),
-            value={decimals || ''}
+            value: decimals || '',
-            onChange={this.onDecimalChange}
+            type: 'number',
-          />
+          }}
-        </div>
+        />
-        <div className="gf-form">
+        <FormGroup
-          <Label width={labelWidth}>Prefix</Label>
+          label="Prefix"
-          <input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
+          labelWidth={labelWidth}
-        </div>
+          inputProps={{
-        <div className="gf-form">
+            onChange: event => this.onPrefixChange(event),
-          <Label width={labelWidth}>Suffix</Label>
+            value: prefix || '',
-          <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
+          }}
-        </div>
+        />
+        <FormGroup
+          label="Suffix"
+          labelWidth={labelWidth}
+          inputProps={{
+            onChange: event => this.onSuffixChange(event),
+            value: suffix || '',
+          }}
+        />
       </PanelOptionsGroup>
     );
   }