diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index 14bec79b57f..593678c7383 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -1,5 +1,5 @@ import React, { InputHTMLAttributes, FunctionComponent } from 'react'; -import { Label } from '..'; +import { FormLabel } from '..'; export interface Props extends InputHTMLAttributes { label: string; @@ -15,7 +15,7 @@ const defaultProps = { const FormField: FunctionComponent = ({ label, labelWidth, inputWidth, ...inputProps }) => { return (
- + {label}
); diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index d6ac3da9394..2bd4fbc153b 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -1,16 +1,28 @@ -import React, { SFC, ReactNode } from 'react'; +import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; +import { Tooltip } from '..'; interface Props { children: ReactNode; - htmlFor?: string; className?: string; + htmlFor?: string; isFocused?: boolean; isInvalid?: boolean; + tooltip?: string; + width?: number; } -export const FormLabel: SFC = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => { - const classes = classNames('gf-form-label', className, { +export const FormLabel: FunctionComponent = ({ + children, + isFocused, + isInvalid, + className, + htmlFor, + tooltip, + width, + ...rest +}) => { + const classes = classNames(`gf-form-label width-${width ? width : '10'}`, className, { 'gf-form-label--is-focused': isFocused, 'gf-form-label--is-invalid': isInvalid, }); @@ -18,6 +30,13 @@ export const FormLabel: SFC = ({ children, isFocused, isInvalid, classNam return ( ); }; diff --git a/packages/grafana-ui/src/components/Label/Label.tsx b/packages/grafana-ui/src/components/Label/Label.tsx deleted file mode 100644 index 270b0161226..00000000000 --- a/packages/grafana-ui/src/components/Label/Label.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { SFC, ReactNode } from 'react'; -import { Tooltip } from '../Tooltip/Tooltip'; - -interface Props { - tooltip?: string; - for?: string; - children: ReactNode; - width?: number; - className?: string; -} - -export const Label: SFC = props => { - return ( - - {props.children} - {props.tooltip && ( - -
- -
-
- )} -
- ); -}; diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx index db970046fc4..deb73460354 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, PureComponent } from 'react'; import { MappingType, ValueMapping } from '../../types'; -import { FormField, Label, Select } from '..'; +import { FormField, FormLabel, Select } from '..'; export interface Props { valueMapping: ValueMapping; @@ -78,7 +78,7 @@ export default class MappingRow extends PureComponent { value={to} />
- + Text { inputWidth={8} />
- + Text { return (
- + Type dashboard.id === homeDashboardId)} getOptionValue={i => i.id} diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx index 21a548a5045..56d4570e3a3 100644 --- a/public/app/features/datasources/settings/BasicSettings.tsx +++ b/public/app/features/datasources/settings/BasicSettings.tsx @@ -1,5 +1,5 @@ import React, { SFC } from 'react'; -import { Label } from '@grafana/ui'; +import { FormLabel } from '@grafana/ui'; import { Switch } from '../../../core/components/Switch/Switch'; export interface Props { @@ -14,14 +14,14 @@ const BasicSettings: SFC = ({ dataSourceName, isDefault, onDefaultChange,
- + {

Team Settings

- + Name {
- +
- + Stat