redoing input props

packages/grafana-ui/src/components/FormField/FormField.test.tsx

@@ -6,10 +6,8 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     label: 'Test',
     labelWidth: 11,
-    inputProps: {
-      value: 10,
-      onChange: jest.fn(),
-    },
+    value: 10,
+    onChange: jest.fn(),
   };
 
   Object.assign(props, propOverrides);

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

@@ -1,20 +1,18 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { Label } from '..';
 
-export interface Props {
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
-  inputProps: InputHTMLAttributes<HTMLInputElement>;
   labelWidth?: number;
   inputWidth?: number;
 }
 
 const defaultProps = {
   labelWidth: 6,
-  inputProps: {},
   inputWidth: 12,
 };
 
-const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
+const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, ...inputProps }) => {
   return (
     <div className="form-field">
       <Label width={labelWidth}>{label}</Label>

packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx

@@ -64,22 +64,18 @@ export default class MappingRow extends PureComponent<Props, State> {
           <FormField
             label="From"
             labelWidth={4}
-            inputProps={{
-              onChange: (event: ChangeEvent<HTMLInputElement>) => this.onMappingFromChange(event),
-              onBlur: () => this.updateMapping(),
-              value: from,
-            }}
             inputWidth={8}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => this.onMappingFromChange(event)}
+            onBlur={() => this.updateMapping()}
+            value={from}
           />
           <FormField
             label="To"
             labelWidth={4}
-            inputProps={{
-              onBlur: () => this.updateMapping,
-              onChange: (event: ChangeEvent<HTMLInputElement>) => this.onMappingToChange(event),
-              value: to,
-            }}
             inputWidth={8}
+            onBlur={() => this.updateMapping}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => this.onMappingToChange(event)}
+            value={to}
           />
           <div className="gf-form gf-form--grow">
             <Label width={4}>Text</Label>
@@ -99,11 +95,9 @@ export default class MappingRow extends PureComponent<Props, State> {
         <FormField
           label="Value"
           labelWidth={4}
-          inputProps={{
-            onBlur: () => this.updateMapping,
-            onChange: (event: ChangeEvent<HTMLInputElement>) => this.onMappingValueChange(event),
-            value: value,
-          }}
+          onBlur={() => this.updateMapping}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => this.onMappingValueChange(event)}
+          value={value}
           inputWidth={8}
         />
         <div className="gf-form gf-form--grow">

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

@@ -21,16 +21,8 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
 
     return (
       <PanelOptionsGroup title="Gauge">
-        <FormField
-          label="Min value"
-          labelWidth={8}
-          inputProps={{ onChange: event => this.onMinValueChange(event), value: minValue }}
-        />
-        <FormField
-          label="Max value"
-          labelWidth={8}
-          inputProps={{ onChange: event => this.onMaxValueChange(event), value: maxValue }}
-        />
+        <FormField label="Min value" labelWidth={8} onChange={event => this.onMinValueChange(event)} value={minValue} />
+        <FormField label="Max value" labelWidth={8} onChange={event => this.onMaxValueChange(event)} value={maxValue} />
         <Switch
           label="Show labels"
           labelClass="width-8"

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { FormField, Label,  PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
+import { FormField, Label, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
 import { GaugeOptions } from './types';
 
@@ -55,28 +55,22 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
         <FormField
           label="Decimals"
           labelWidth={labelWidth}
-          inputProps={{
-            placeholder: 'auto',
-            onChange: event => this.onDecimalChange(event),
-            value: decimals || '',
-            type: 'number',
-          }}
+          placeholder="auto"
+          onChange={event => this.onDecimalChange(event)}
+          value={decimals || ''}
+          type="number"
         />
         <FormField
           label="Prefix"
           labelWidth={labelWidth}
-          inputProps={{
-            onChange: event => this.onPrefixChange(event),
-            value: prefix || '',
-          }}
+          onChange={event => this.onPrefixChange(event)}
+          value={prefix || ''}
         />
         <FormField
           label="Suffix"
           labelWidth={labelWidth}
-          inputProps={{
-            onChange: event => this.onSuffixChange(event),
-            value: suffix || '',
-          }}
+          onChange={event => this.onSuffixChange(event)}
+          value={suffix || ''}
         />
       </PanelOptionsGroup>
     );