renaming after pr feedback

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

 import React from 'react';
 import React from 'react';
 import { shallow } from 'enzyme';
 import { shallow } from 'enzyme';
-import { FormGroup, Props } from './FormGroup';
+import { FormField, Props } from './FormField';
 
 
 const setup = (propOverrides?: object) => {
 const setup = (propOverrides?: object) => {
   const props: Props = {
   const props: Props = {
@@ -14,7 +14,7 @@ const setup = (propOverrides?: object) => {
 
 
   Object.assign(props, propOverrides);
   Object.assign(props, propOverrides);
 
 
-  return shallow(<FormGroup {...props} />);
+  return shallow(<FormField {...props} />);
 };
 };
 
 
 describe('Render', () => {
 describe('Render', () => {

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

-import React, { SFC } from 'react';
+import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { Label } from '..';
 import { Label } from '..';
 
 
 export interface Props {
 export interface Props {
   label: string;
   label: string;
-  inputProps: {};
+  inputProps: InputHTMLAttributes<HTMLInputElement>;
   labelWidth?: number;
   labelWidth?: number;
   inputWidth?: number;
   inputWidth?: number;
 }
 }
@@ -14,7 +14,7 @@ const defaultProps = {
   inputWidth: 12,
   inputWidth: 12,
 };
 };
 
 
-const FormGroup: SFC<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
+const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
   return (
   return (
     <div className="gf-form">
     <div className="gf-form">
       <Label width={labelWidth}>{label}</Label>
       <Label width={labelWidth}>{label}</Label>
@@ -23,5 +23,5 @@ const FormGroup: SFC<Props> = ({ label, labelWidth, inputProps, inputWidth }) =>
   );
   );
 };
 };
 
 
-FormGroup.defaultProps = defaultProps;
-export { FormGroup };
+FormField.defaultProps = defaultProps;
+export { FormField };

packages/grafana-ui/src/components/GfFormLabel/GfFormLabel.tsx → packages/grafana-ui/src/components/FormLabel/FormLabel.tsx

@@ -9,7 +9,7 @@ interface Props {
   isInvalid?: boolean;
   isInvalid?: boolean;
 }
 }
 
 
-export const GfFormLabel: SFC<Props> = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => {
+export const FormLabel: SFC<Props> = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => {
   const classes = classNames('gf-form-label', className, {
   const classes = classNames('gf-form-label', className, {
     'gf-form-label--is-focused': isFocused,
     'gf-form-label--is-focused': isFocused,
     'gf-form-label--is-invalid': isInvalid,
     'gf-form-label--is-invalid': isInvalid,

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

@@ -10,8 +10,8 @@ export { NoOptionsMessage } from './Select/NoOptionsMessage';
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 
 
 // Forms
 // Forms
-export { GfFormLabel } from './GfFormLabel/GfFormLabel';
-export { FormGroup } from './FormGroup/FormGroup';
+export { FormLabel } from './FormLabel/FormLabel';
+export { FormField } from './FormGroup/FormField';
 export { Label } from './Label/Label';
 export { Label } from './Label/Label';
 
 
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -10,7 +10,7 @@ import { Input } from 'app/core/components/Form';
 import { EventsWithValidation } from 'app/core/components/Form/Input';
 import { EventsWithValidation } from 'app/core/components/Form/Input';
 import { InputStatus } from 'app/core/components/Form/Input';
 import { InputStatus } from 'app/core/components/Form/Input';
 import DataSourceOption from './DataSourceOption';
 import DataSourceOption from './DataSourceOption';
-import { GfFormLabel } from '@grafana/ui';
+import { FormLabel } from '@grafana/ui';
 
 
 // Types
 // Types
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
@@ -164,7 +164,7 @@ export class QueryOptions extends PureComponent<Props, State> {
         {this.renderOptions()}
         {this.renderOptions()}
 
 
         <div className="gf-form">
         <div className="gf-form">
-          <GfFormLabel>Relative time</GfFormLabel>
+          <FormLabel>Relative time</FormLabel>
           <Input
           <Input
             type="text"
             type="text"
             className="width-6"
             className="width-6"

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

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

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import { FormGroup, Label, MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
+import { FormField, Label, MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
 
 
 interface Props {
 interface Props {
   mapping: ValueMap | RangeMap;
   mapping: ValueMap | RangeMap;
@@ -61,7 +61,7 @@ export default class MappingRow extends PureComponent<Props, State> {
     if (type === MappingType.RangeToText) {
     if (type === MappingType.RangeToText) {
       return (
       return (
         <>
         <>
-          <FormGroup
+          <FormField
             label="From"
             label="From"
             labelWidth={4}
             labelWidth={4}
             inputProps={{
             inputProps={{
@@ -71,7 +71,7 @@ export default class MappingRow extends PureComponent<Props, State> {
             }}
             }}
             inputWidth={8}
             inputWidth={8}
           />
           />
-          <FormGroup
+          <FormField
             label="To"
             label="To"
             labelWidth={4}
             labelWidth={4}
             inputProps={{
             inputProps={{
@@ -96,7 +96,7 @@ export default class MappingRow extends PureComponent<Props, State> {
 
 
     return (
     return (
       <>
       <>
-        <FormGroup
+        <FormField
           label="Value"
           label="Value"
           labelWidth={4}
           labelWidth={4}
           inputProps={{
           inputProps={{

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import { FormGroup, Label, GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
+import { FormField, Label, GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
 
 
 const statOptions = [
 const statOptions = [
@@ -51,7 +51,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
           <Label width={labelWidth}>Unit</Label>
           <Label width={labelWidth}>Unit</Label>
           <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
           <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
         </div>
         </div>
-        <FormGroup
+        <FormField
           label="Decimals"
           label="Decimals"
           labelWidth={labelWidth}
           labelWidth={labelWidth}
           inputProps={{
           inputProps={{
@@ -61,7 +61,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
             type: 'number',
             type: 'number',
           }}
           }}
         />
         />
-        <FormGroup
+        <FormField
           label="Prefix"
           label="Prefix"
           labelWidth={labelWidth}
           labelWidth={labelWidth}
           inputProps={{
           inputProps={{
@@ -69,7 +69,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
             value: prefix || '',
             value: prefix || '',
           }}
           }}
         />
         />
-        <FormGroup
+        <FormField
           label="Suffix"
           label="Suffix"
           labelWidth={labelWidth}
           labelWidth={labelWidth}
           inputProps={{
           inputProps={{