From ac62e4a99201de9070dd736759ee12f0fb8fc491 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Mon, 14 Jan 2019 22:09:06 +0000 Subject: [PATCH 1/8] FormGroup component and implements --- .../src/components/FormGroup/FormGroup.tsx | 27 +++++++ .../src}/components/Label/Label.tsx | 0 packages/grafana-ui/src/components/index.ts | 6 +- .../SharedPreferences/SharedPreferences.tsx | 2 +- .../datasources/settings/BasicSettings.tsx | 2 +- public/app/features/teams/TeamSettings.tsx | 2 +- .../panel/gauge/GaugeOptionsEditor.tsx | 20 ++--- public/app/plugins/panel/gauge/MappingRow.tsx | 80 ++++++++++--------- .../app/plugins/panel/gauge/ValueOptions.tsx | 49 +++++++----- 9 files changed, 114 insertions(+), 74 deletions(-) create mode 100644 packages/grafana-ui/src/components/FormGroup/FormGroup.tsx rename {public/app/core => packages/grafana-ui/src}/components/Label/Label.tsx (100%) diff --git a/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx b/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx new file mode 100644 index 00000000000..ac761fa5d2c --- /dev/null +++ b/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 = ({ label, labelWidth, inputProps, inputWidth }) => { + return ( +
+ + +
+ ); +}; + +FormGroup.defaultProps = defaultProps; +export { FormGroup }; diff --git a/public/app/core/components/Label/Label.tsx b/packages/grafana-ui/src/components/Label/Label.tsx similarity index 100% rename from public/app/core/components/Label/Label.tsx rename to packages/grafana-ui/src/components/Label/Label.tsx diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 5420fcf14b7..ab0edf45ed0 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/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'; diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx index b13393ab2e1..ca933332db9 100644 --- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx +++ b/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'; diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx index 120e002ac68..55dc9b54211 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 '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 { diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx index 5e058289bf0..3424f39d22c 100644 --- a/public/app/features/teams/TeamSettings.tsx +++ b/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'; diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx index f1f78ab1172..c7758642080 100644 --- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx +++ b/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> { onToggleThresholdLabels = () => @@ -21,14 +21,16 @@ export default class GaugeOptionsEditor extends PureComponent -
- - -
-
- - -
+ this.onMinValueChange(event), value: minValue }} + /> + this.onMaxValueChange(event), value: maxValue }} + /> { if (type === MappingType.RangeToText) { return ( <> -
- - -
-
- - -
-
- - -
+ this.onMappingFromChange(event), + onBlur: () => this.updateMapping(), + value: from, + }} + inputWidth={8} + /> + this.updateMapping, + onChange: event => this.onMappingToChange(event), + value: to, + }} + inputWidth={8} + /> + this.updateMapping, + onChange: event => this.onMappingTextChange(event), + value: text, + }} + inputWidth={10} + /> ); } return ( <> -
- - -
+ this.updateMapping, + onChange: event => this.onMappingValueChange(event), + value: value, + }} + inputWidth={8} + />
Unit
-
- - -
-
- - -
-
- - -
+ this.onDecimalChange(event), + value: decimals || '', + type: 'number', + }} + /> + this.onPrefixChange(event), + value: prefix || '', + }} + /> + this.onSuffixChange(event), + value: suffix || '', + }} + /> ); } From 58094faa12f8440083ea8a4c0aee0761470ee45b Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 15 Jan 2019 17:31:42 +0000 Subject: [PATCH 2/8] test and minor fix on mapping row --- .../components/FormGroup/FormGroup.test.tsx | 26 +++++++++++++++++++ .../__snapshots__/FormGroup.test.tsx.snap | 19 ++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx create mode 100644 packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap diff --git a/packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx b/packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx new file mode 100644 index 00000000000..4f8b4be9540 --- /dev/null +++ b/packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { FormGroup, Props } from './FormGroup'; + +const setup = (propOverrides?: object) => { + const props: Props = { + label: 'Test', + labelWidth: 11, + inputProps: { + value: 10, + onChange: jest.fn(), + }, + }; + + Object.assign(props, propOverrides); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap b/packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap new file mode 100644 index 00000000000..e88ff774981 --- /dev/null +++ b/packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
+ + Test + + +
+`; From 83fbf52aac51fa6cc0c16eed9b48529b26fb489c Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 15 Jan 2019 17:33:42 +0000 Subject: [PATCH 3/8] fixing imports, minor fix on mapping row --- .../src/components/FormGroup/FormGroup.tsx | 2 +- .../grafana-ui/src/components/Label/Label.tsx | 2 +- .../SharedPreferences/SharedPreferences.tsx | 3 +-- .../datasources/settings/BasicSettings.tsx | 2 +- public/app/features/teams/TeamSettings.tsx | 2 +- public/app/plugins/panel/gauge/MappingRow.tsx | 19 +++++++++---------- 6 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx b/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx index ac761fa5d2c..a0088032079 100644 --- a/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx +++ b/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx @@ -1,7 +1,7 @@ import React, { SFC } from 'react'; import { Label } from '..'; -interface Props { +export interface Props { label: string; inputProps: {}; labelWidth?: number; diff --git a/packages/grafana-ui/src/components/Label/Label.tsx b/packages/grafana-ui/src/components/Label/Label.tsx index 5d60efa056a..b31ed45e32a 100644 --- a/packages/grafana-ui/src/components/Label/Label.tsx +++ b/packages/grafana-ui/src/components/Label/Label.tsx @@ -1,5 +1,5 @@ import React, { SFC, ReactNode } from 'react'; -import { Tooltip } from '@grafana/ui'; +import { Tooltip } from '..'; interface Props { tooltip?: string; diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx index ca933332db9..0b11d32b668 100644 --- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx +++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx @@ -1,7 +1,6 @@ import React, { PureComponent } from 'react'; -import { Label } from '../../../../../packages/grafana-ui/src/components/Label/Label'; -import { Select } from '@grafana/ui'; +import { Label, Select } from '@grafana/ui'; import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv'; import { DashboardSearchHit } from 'app/types'; diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx index 55dc9b54211..21a548a5045 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 '../../../../../packages/grafana-ui/src/components/Label/Label'; +import { Label } from '@grafana/ui'; import { Switch } from '../../../core/components/Switch/Switch'; export interface Props { diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx index 3424f39d22c..22815dbb7ec 100644 --- a/public/app/features/teams/TeamSettings.tsx +++ b/public/app/features/teams/TeamSettings.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import { Label } from '../../../../packages/grafana-ui/src/components/Label/Label'; +import { Label } from '@grafana/ui'; import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences'; import { updateTeam } from './state/actions'; import { getRouteParamsId } from 'app/core/selectors/location'; diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx index b05da5514aa..91dff549677 100644 --- a/public/app/plugins/panel/gauge/MappingRow.tsx +++ b/public/app/plugins/panel/gauge/MappingRow.tsx @@ -81,16 +81,15 @@ export default class MappingRow extends PureComponent { }} inputWidth={8} /> - this.updateMapping, - onChange: event => this.onMappingTextChange(event), - value: text, - }} - inputWidth={10} - /> +
+ + +
); } From 4c40274313f38cf57a525c3fd780213e9ee0e0a2 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 16 Jan 2019 13:46:57 +0000 Subject: [PATCH 4/8] renaming after pr feedback --- .../{FormGroup.test.tsx => FormField.test.tsx} | 4 ++-- .../FormGroup/{FormGroup.tsx => FormField.tsx} | 10 +++++----- .../GfFormLabel.tsx => FormLabel/FormLabel.tsx} | 2 +- packages/grafana-ui/src/components/index.ts | 4 ++-- .../features/dashboard/panel_editor/QueryOptions.tsx | 4 ++-- public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx | 6 +++--- public/app/plugins/panel/gauge/MappingRow.tsx | 8 ++++---- public/app/plugins/panel/gauge/ValueOptions.tsx | 8 ++++---- 8 files changed, 23 insertions(+), 23 deletions(-) rename packages/grafana-ui/src/components/FormGroup/{FormGroup.test.tsx => FormField.test.tsx} (82%) rename packages/grafana-ui/src/components/FormGroup/{FormGroup.tsx => FormField.tsx} (58%) rename packages/grafana-ui/src/components/{GfFormLabel/GfFormLabel.tsx => FormLabel/FormLabel.tsx} (81%) diff --git a/packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx b/packages/grafana-ui/src/components/FormGroup/FormField.test.tsx similarity index 82% rename from packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx rename to packages/grafana-ui/src/components/FormGroup/FormField.test.tsx index 4f8b4be9540..4474b0680c5 100644 --- a/packages/grafana-ui/src/components/FormGroup/FormGroup.test.tsx +++ b/packages/grafana-ui/src/components/FormGroup/FormField.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { FormGroup, Props } from './FormGroup'; +import { FormField, Props } from './FormField'; const setup = (propOverrides?: object) => { const props: Props = { @@ -14,7 +14,7 @@ const setup = (propOverrides?: object) => { Object.assign(props, propOverrides); - return shallow(); + return shallow(); }; describe('Render', () => { diff --git a/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx b/packages/grafana-ui/src/components/FormGroup/FormField.tsx similarity index 58% rename from packages/grafana-ui/src/components/FormGroup/FormGroup.tsx rename to packages/grafana-ui/src/components/FormGroup/FormField.tsx index a0088032079..ae86d4115b0 100644 --- a/packages/grafana-ui/src/components/FormGroup/FormGroup.tsx +++ b/packages/grafana-ui/src/components/FormGroup/FormField.tsx @@ -1,9 +1,9 @@ -import React, { SFC } from 'react'; +import React, { InputHTMLAttributes, FunctionComponent } from 'react'; import { Label } from '..'; export interface Props { label: string; - inputProps: {}; + inputProps: InputHTMLAttributes; labelWidth?: number; inputWidth?: number; } @@ -14,7 +14,7 @@ const defaultProps = { inputWidth: 12, }; -const FormGroup: SFC = ({ label, labelWidth, inputProps, inputWidth }) => { +const FormField: FunctionComponent = ({ label, labelWidth, inputProps, inputWidth }) => { return (
@@ -23,5 +23,5 @@ const FormGroup: SFC = ({ label, labelWidth, inputProps, inputWidth }) => ); }; -FormGroup.defaultProps = defaultProps; -export { FormGroup }; +FormField.defaultProps = defaultProps; +export { FormField }; diff --git a/packages/grafana-ui/src/components/GfFormLabel/GfFormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx similarity index 81% rename from packages/grafana-ui/src/components/GfFormLabel/GfFormLabel.tsx rename to packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index 8b80de64696..d6ac3da9394 100644 --- a/packages/grafana-ui/src/components/GfFormLabel/GfFormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -9,7 +9,7 @@ interface Props { isInvalid?: boolean; } -export const GfFormLabel: SFC = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => { +export const FormLabel: SFC = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => { const classes = classNames('gf-form-label', className, { 'gf-form-label--is-focused': isFocused, 'gf-form-label--is-invalid': isInvalid, diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index ab0edf45ed0..3a29623838a 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -10,8 +10,8 @@ export { NoOptionsMessage } from './Select/NoOptionsMessage'; export { default as resetSelectStyles } from './Select/resetSelectStyles'; // 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 { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder'; diff --git a/public/app/features/dashboard/panel_editor/QueryOptions.tsx b/public/app/features/dashboard/panel_editor/QueryOptions.tsx index fad70d92990..d6187a89b7b 100644 --- a/public/app/features/dashboard/panel_editor/QueryOptions.tsx +++ b/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 { InputStatus } from 'app/core/components/Form/Input'; import DataSourceOption from './DataSourceOption'; -import { GfFormLabel } from '@grafana/ui'; +import { FormLabel } from '@grafana/ui'; // Types import { PanelModel } from '../panel_model'; @@ -164,7 +164,7 @@ export class QueryOptions extends PureComponent { {this.renderOptions()}
- Relative time + Relative time > { onToggleThresholdLabels = () => @@ -21,12 +21,12 @@ export default class GaugeOptionsEditor extends PureComponent - this.onMinValueChange(event), value: minValue }} /> - this.onMaxValueChange(event), value: maxValue }} diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx index 91dff549677..47647b1b9ae 100644 --- a/public/app/plugins/panel/gauge/MappingRow.tsx +++ b/public/app/plugins/panel/gauge/MappingRow.tsx @@ -1,5 +1,5 @@ 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 { mapping: ValueMap | RangeMap; @@ -61,7 +61,7 @@ export default class MappingRow extends PureComponent { if (type === MappingType.RangeToText) { return ( <> - { }} inputWidth={8} /> - { return ( <> - Unit
- - - Date: Wed, 16 Jan 2019 13:52:38 +0000 Subject: [PATCH 5/8] move styling --- .../{FormGroup => FormField}/FormField.test.tsx | 0 .../{FormGroup => FormField}/FormField.tsx | 2 +- .../src/components/FormField/_FormField.scss | 12 ++++++++++++ .../__snapshots__/FormField.test.tsx.snap} | 0 packages/grafana-ui/src/components/index.scss | 1 + packages/grafana-ui/src/components/index.ts | 2 +- 6 files changed, 15 insertions(+), 2 deletions(-) rename packages/grafana-ui/src/components/{FormGroup => FormField}/FormField.test.tsx (100%) rename packages/grafana-ui/src/components/{FormGroup => FormField}/FormField.tsx (95%) create mode 100644 packages/grafana-ui/src/components/FormField/_FormField.scss rename packages/grafana-ui/src/components/{FormGroup/__snapshots__/FormGroup.test.tsx.snap => FormField/__snapshots__/FormField.test.tsx.snap} (100%) diff --git a/packages/grafana-ui/src/components/FormGroup/FormField.test.tsx b/packages/grafana-ui/src/components/FormField/FormField.test.tsx similarity index 100% rename from packages/grafana-ui/src/components/FormGroup/FormField.test.tsx rename to packages/grafana-ui/src/components/FormField/FormField.test.tsx diff --git a/packages/grafana-ui/src/components/FormGroup/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx similarity index 95% rename from packages/grafana-ui/src/components/FormGroup/FormField.tsx rename to packages/grafana-ui/src/components/FormField/FormField.tsx index ae86d4115b0..aa026a74197 100644 --- a/packages/grafana-ui/src/components/FormGroup/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -16,7 +16,7 @@ const defaultProps = { const FormField: FunctionComponent = ({ label, labelWidth, inputProps, inputWidth }) => { return ( -
+
diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss new file mode 100644 index 00000000000..36955e2fca6 --- /dev/null +++ b/packages/grafana-ui/src/components/FormField/_FormField.scss @@ -0,0 +1,12 @@ +.form-field { + margin-bottom: $gf-form-margin; + display: flex; + flex-direction: row; + align-items: center; + text-align: left; + position: relative; + + &--grow { + flex-grow: 1; + } +} diff --git a/packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap b/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap similarity index 100% rename from packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap rename to packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index b894cf73c1a..eaf64561ae8 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -6,3 +6,4 @@ @import 'PanelOptionsGroup/PanelOptionsGroup'; @import 'PanelOptionsGrid/PanelOptionsGrid'; @import 'ColorPicker/ColorPicker'; +@import "FormField/FormField"; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 3a29623838a..ac06c07951b 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -11,7 +11,7 @@ export { default as resetSelectStyles } from './Select/resetSelectStyles'; // Forms export { FormLabel } from './FormLabel/FormLabel'; -export { FormField } from './FormGroup/FormField'; +export { FormField } from './FormField/FormField'; export { Label } from './Label/Label'; export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder'; From 01251927b3c085aee6df85c4bf1bc54b5a61355f Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 16 Jan 2019 14:43:22 +0000 Subject: [PATCH 6/8] redoing input props --- .../components/FormField/FormField.test.tsx | 6 ++--- .../src/components/FormField/FormField.tsx | 6 ++--- .../ValueMappingsEditor/MappingRow.tsx | 24 +++++++------------ .../panel/gauge/GaugeOptionsEditor.tsx | 12 ++-------- .../app/plugins/panel/gauge/ValueOptions.tsx | 24 +++++++------------ 5 files changed, 24 insertions(+), 48 deletions(-) diff --git a/packages/grafana-ui/src/components/FormField/FormField.test.tsx b/packages/grafana-ui/src/components/FormField/FormField.test.tsx index 4474b0680c5..3c89a347e86 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.test.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index aa026a74197..14bec79b57f 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/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 { label: string; - inputProps: InputHTMLAttributes; labelWidth?: number; inputWidth?: number; } const defaultProps = { labelWidth: 6, - inputProps: {}, inputWidth: 12, }; -const FormField: FunctionComponent = ({ label, labelWidth, inputProps, inputWidth }) => { +const FormField: FunctionComponent = ({ label, labelWidth, inputWidth, ...inputProps }) => { return (
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx index 3da2cfc2d98..db970046fc4 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx @@ -64,22 +64,18 @@ export default class MappingRow extends PureComponent { ) => this.onMappingFromChange(event), - onBlur: () => this.updateMapping(), - value: from, - }} inputWidth={8} + onChange={(event: ChangeEvent) => this.onMappingFromChange(event)} + onBlur={() => this.updateMapping()} + value={from} /> this.updateMapping, - onChange: (event: ChangeEvent) => this.onMappingToChange(event), - value: to, - }} inputWidth={8} + onBlur={() => this.updateMapping} + onChange={(event: ChangeEvent) => this.onMappingToChange(event)} + value={to} />
@@ -99,11 +95,9 @@ export default class MappingRow extends PureComponent { this.updateMapping, - onChange: (event: ChangeEvent) => this.onMappingValueChange(event), - value: value, - }} + onBlur={() => this.updateMapping} + onChange={(event: ChangeEvent) => this.onMappingValueChange(event)} + value={value} inputWidth={8} />
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx index b971e67939c..6b8c92e3fe7 100644 --- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx +++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx @@ -21,16 +21,8 @@ export default class GaugeOptionsEditor extends PureComponent - this.onMinValueChange(event), value: minValue }} - /> - this.onMaxValueChange(event), value: maxValue }} - /> + this.onMinValueChange(event)} value={minValue} /> + this.onMaxValueChange(event)} value={maxValue} /> this.onDecimalChange(event), - value: decimals || '', - type: 'number', - }} + placeholder="auto" + onChange={event => this.onDecimalChange(event)} + value={decimals || ''} + type="number" /> this.onPrefixChange(event), - value: prefix || '', - }} + onChange={event => this.onPrefixChange(event)} + value={prefix || ''} /> this.onSuffixChange(event), - value: suffix || '', - }} + onChange={event => this.onSuffixChange(event)} + value={suffix || ''} /> ); From 736db86d6e7cf963a297b70ac3a57e57714c6a45 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 16 Jan 2019 18:02:27 +0000 Subject: [PATCH 7/8] removing Label and going with FormLabel --- .../src/components/FormField/FormField.tsx | 4 +-- .../src/components/FormLabel/FormLabel.tsx | 27 ++++++++++++++++--- .../grafana-ui/src/components/Label/Label.tsx | 25 ----------------- .../ValueMappingsEditor/MappingRow.tsx | 8 +++--- packages/grafana-ui/src/components/index.ts | 1 - .../SharedPreferences/SharedPreferences.tsx | 6 ++--- .../datasources/settings/BasicSettings.tsx | 6 ++--- public/app/features/teams/TeamSettings.tsx | 8 +++--- .../app/plugins/panel/gauge/ValueOptions.tsx | 6 ++--- 9 files changed, 42 insertions(+), 49 deletions(-) delete mode 100644 packages/grafana-ui/src/components/Label/Label.tsx 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