IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

removing Label and going with FormLabel

Browse Source
This commit is contained in:
Peter Holmberg 2019-01-16 18:02:27 +00:00
parent 01251927b3
commit 736db86d6e
9 changed files with 42 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/FormField/FormField.tsx
View File

@ -1,5 +1,5 @@
import React, { InputHTMLAttributes, FunctionComponent } from 'react';
import { Label } from '..';
import { FormLabel } from '..';
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
label: string;
@ -15,7 +15,7 @@ const defaultProps = {
const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, ...inputProps }) => {
return (
<div className="form-field">
<Label width={labelWidth}>{label}</Label>
<FormLabel width={labelWidth}>{label}</FormLabel>
<input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />
</div>
);

27
packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
View File

@ -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<Props> = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => {
const classes = classNames('gf-form-label', className, {
export const FormLabel: FunctionComponent<Props> = ({
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<Props> = ({ children, isFocused, isInvalid, classNam
return (
<label className={classes} {...rest} htmlFor={htmlFor}>
{children}
{tooltip && (
<Tooltip placement="auto" content={tooltip}>
<div className="gf-form-help-icon--right-normal">
<i className="gicon gicon-question gicon--has-hover" />
</div>
</Tooltip>
)}
</label>
);
};

25
packages/grafana-ui/src/components/Label/Label.tsx
View File

@ -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> = 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>
);
};

8
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
View File

@ -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<Props, State> {
value={to}
/>
<div className="gf-form gf-form--grow">
<Label width={4}>Text</Label>
<FormLabel width={4}>Text</FormLabel>
<input
className="gf-form-input"
onBlur={this.updateMapping}
@ -101,7 +101,7 @@ export default class MappingRow extends PureComponent<Props, State> {
inputWidth={8}
/>
<div className="gf-form gf-form--grow">
<Label width={4}>Text</Label>
<FormLabel width={4}>Text</FormLabel>
<input
className="gf-form-input"
onBlur={this.updateMapping}
@ -119,7 +119,7 @@ export default class MappingRow extends PureComponent<Props, State> {
return (
<div className="gf-form-inline">
<div className="gf-form">
<Label width={5}>Type</Label>
<FormLabel width={5}>Type</FormLabel>
<Select
placeholder="Choose type"
isSearchable={false}

1
packages/grafana-ui/src/components/index.ts
View File

@ -12,7 +12,6 @@ export { default as resetSelectStyles } from './Select/resetSelectStyles';
// Forms
export { FormLabel } from './FormLabel/FormLabel';
export { FormField } from './FormField/FormField';
export { Label } from './Label/Label';
export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
export { ColorPicker } from './ColorPicker/ColorPicker';

6
public/app/core/components/SharedPreferences/SharedPreferences.tsx
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import { Label, Select } from '@grafana/ui';
import { FormLabel, Select } from '@grafana/ui';
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
import { DashboardSearchHit } from 'app/types';
@ -99,12 +99,12 @@ export class SharedPreferences extends PureComponent<Props, State> {
/>
</div>
<div className="gf-form">
<Label
<FormLabel
width={11}
tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
>
Home Dashboard
</Label>
</FormLabel>
<Select
value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
getOptionValue={i => i.id}

6
public/app/features/datasources/settings/BasicSettings.tsx
View File

@ -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<Props> = ({ dataSourceName, isDefault, onDefaultChange,
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form max-width-30" style={{ marginRight: '3px' }}>
<Label
<FormLabel
tooltip={
'The name is used when you select the data source in panels. The Default data source is ' +
'preselected in new panels.'
}
>
Name
</Label>
</FormLabel>
<input
className="gf-form-input max-width-23"
type="text"

8
public/app/features/teams/TeamSettings.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { Label } from '@grafana/ui';
import { FormLabel } from '@grafana/ui';
import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
import { updateTeam } from './state/actions';
@ -51,7 +51,7 @@ export class TeamSettings extends React.Component<Props, State> {
<h3 className="page-sub-heading">Team Settings</h3>
<form name="teamDetailsForm" className="gf-form-group" onSubmit={this.onUpdate}>
<div className="gf-form max-width-30">
<Label>Name</Label>
<FormLabel>Name</FormLabel>
<input
type="text"
required
@ -62,9 +62,9 @@ export class TeamSettings extends React.Component<Props, State> {
</div>
<div className="gf-form max-width-30">
<Label tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
<FormLabel tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
Email
</Label>
</FormLabel>
<input
type="email"
className="gf-form-input max-width-22"

6
public/app/plugins/panel/gauge/ValueOptions.tsx
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import { FormField, Label, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
import { FormField, FormLabel, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
import UnitPicker from 'app/core/components/Select/UnitPicker';
import { GaugeOptions } from './types';
@ -40,7 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
return (
<PanelOptionsGroup title="Value">
<div className="gf-form">
<Label width={labelWidth}>Stat</Label>
<FormLabel width={labelWidth}>Stat</FormLabel>
<Select
width={12}
options={statOptions}
@ -49,7 +49,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
/>
</div>
<div className="gf-form">
<Label width={labelWidth}>Unit</Label>
<FormLabel width={labelWidth}>Unit</FormLabel>
<UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
</div>
<FormField