diff --git a/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx b/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx index d299d32adeb..6d038c5ad8e 100644 --- a/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx +++ b/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { GrafanaTheme } from '@grafana/data'; import { css } from 'emotion'; import { selectThemeVariant, stylesFactory, useTheme } from '../../themes'; -import Forms from '../Forms'; +import { Label } from '../Forms/Label'; import { Icon } from '../Icon/Icon'; interface FieldConfigItemHeaderTitleProps { @@ -24,7 +24,7 @@ export const FieldConfigItemHeaderTitle: React.FC
- {title} +
onRemove()} aria-label="FieldConfigItemHeaderTitle remove button">
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.mdx b/packages/grafana-ui/src/components/Forms/Checkbox.mdx index c74326611d4..0c0a051c76b 100644 --- a/packages/grafana-ui/src/components/Forms/Checkbox.mdx +++ b/packages/grafana-ui/src/components/Forms/Checkbox.mdx @@ -1,5 +1,5 @@ -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; -import { Checkbox } from './Checkbox'; +import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Checkbox } from "./Checkbox"; @@ -10,9 +10,9 @@ import { Checkbox } from './Checkbox'; ```jsx import { Forms } from '@grafana/ui'; - + ``` ### Props - + diff --git a/packages/grafana-ui/src/components/Forms/Field.mdx b/packages/grafana-ui/src/components/Forms/Field.mdx index c34113368b7..844ac0f0392 100644 --- a/packages/grafana-ui/src/components/Forms/Field.mdx +++ b/packages/grafana-ui/src/components/Forms/Field.mdx @@ -1,5 +1,5 @@ -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; -import { Field } from './Field'; +import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Field } from "./Field"; @@ -12,11 +12,11 @@ import { Field } from './Field'; ```jsx import { Forms } from '@grafana/ui'; - - - + + + ``` ### Props - + diff --git a/packages/grafana-ui/src/components/Forms/Form.mdx b/packages/grafana-ui/src/components/Forms/Form.mdx index 81b5638ee44..827a8daa04d 100644 --- a/packages/grafana-ui/src/components/Forms/Form.mdx +++ b/packages/grafana-ui/src/components/Forms/Form.mdx @@ -23,18 +23,18 @@ const defaultUser: Partial = { // ... } - await createUser(user)} >{({register, errors}) => { return ( - + - + ) -}} +}} ``` ### Form API @@ -66,28 +66,28 @@ See [Validation](#validation) for examples on validation and validation rules. #### `errors` -`errors` is an object that contains validation errors of the form. To show error message and invalid input indication in your form, wrap input element with `` component and pass `invalid` and `error` props to it: +`errors` is an object that contains validation errors of the form. To show error message and invalid input indication in your form, wrap input element with `` component and pass `invalid` and `error` props to it: ```jsx - + - + ``` #### `control` By default `Form` component assumes form elements are uncontrolled (https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components). There are some components like `RadioButton` or `Select` that are controlled-only and require some extra work. To make -them work with the form, you need to render those using `Forms.InputControl` component: +them work with the form, you need to render those using `InputControl` component: ```jsx -import { Forms } from '@grafana/ui'; +import { Form, Field, InputControl } from '@grafana/ui'; // render function -{({register, errors, control}) => ( +
{({register, errors, control}) => ( <> - - )} - + ``` -Note that when using `Forms.InputControl`, it expects the name of the prop that handles input change to be called `onChange`. +Note that when using `InputControl`, it expects the name of the prop that handles input change to be called `onChange`. If the property is named differently for any specific component, additional `onChangeName` prop has to be provided, specifying the name. Additionally, the `onChange` arguments passed as an array. Check [react-hook-form docs](https://react-hook-form.com/api/#Controller) for more prop options. @@ -128,7 +128,7 @@ const onSelectChange = ([value]) => { } - {...}
 +
{...}
``` ```jsx @@ -176,13 +176,13 @@ const defaultValues: FormDto { isAdmin: false, } -{ +
{ ({register}) => ( <> )} - + ``` ### Validation @@ -192,10 +192,10 @@ Validation can be performed either synchronously or asynchronously. What's impor #### Basic required example ```jsx -{ +
{ ({register, errors}) => ( <> - )} - + ``` #### Required with synchronous custom validation @@ -211,10 +211,10 @@ Validation can be performed either synchronously or asynchronously. What's impor One important thing to note is that if you want to provide different error messages for different kind of validation errors you'll need to return a `string` instead of a `boolean`. ```jsx -{ +
{ ({register, errors}) => ( <> - )} - + ``` #### Asynchronous validation @@ -252,10 +252,10 @@ validateAsync = (newValue: string) => { ``` ```jsx -{ +
{ ({register, errors}) => ( <> - { /> )} - + ``` ### Props diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx index b6d8749e875..0148d5e5f08 100644 --- a/packages/grafana-ui/src/components/Forms/Form.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx @@ -12,7 +12,7 @@ import { Checkbox } from './Checkbox'; import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup'; import { Select } from '../Select/Select'; -import Forms from './index'; +import { InputControl } from '../InputControl'; import mdx from './Form.mdx'; import { ValidateResult } from 'react-hook-form'; import { boolean } from '@storybook/addon-knobs'; @@ -103,11 +103,11 @@ const renderForm = (defaultValues?: Partial) => ( - + - @@ -12,9 +12,9 @@ Use `RadioButtonGroup` if there are up to four options available. Otherwise use ### Usage ```jsx -import { Forms } from '@grafana/ui'; +import { RadioButtonGroup } from '@grafana/ui'; - + ``` #### Disabling options @@ -33,7 +33,7 @@ const options = [ const disabledOptions = ['prometheus', 'elastic']; - = props => { return ( <> - + event.stopPropagation()} onFocus={onFocus} @@ -74,8 +74,8 @@ export const TimeRangeForm: React.FC = props => { addonAfter={icon} value={from.value} /> - - + + event.stopPropagation()} onFocus={onFocus} @@ -83,7 +83,7 @@ export const TimeRangeForm: React.FC = props => { addonAfter={icon} value={to.value} /> -
+ = ({ valueMapping, updateValueMapping, return ( <> - + - - + + - + - + - + ); } return ( <> - + - + - + - + ); }; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index e7b7636984b..46b334b8a63 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -124,9 +124,16 @@ export { FieldConfigItemHeaderTitle } from './FieldConfigs/FieldConfigItemHeader // Next-gen forms export { default as Forms } from './Forms'; +export { Form } from './Forms/Form'; +export { InputControl } from './InputControl'; export * from './Button'; export { ValuePicker } from './ValuePicker/ValuePicker'; export { fieldMatchersUI } from './MatchersUI/fieldMatchersUI'; +export { getFormStyles } from './Forms/getFormStyles'; + +export { Label } from './Forms/Label'; +export { Field } from './Forms/Field'; +export { Legend } from './Forms/Legend'; export { default as resetSelectStyles } from './Select/resetSelectStyles'; export * from './Select/Select'; @@ -137,6 +144,7 @@ export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup'; export { Input } from './Input/Input'; export { Switch } from './Forms/Switch'; +export { Checkbox } from './Forms/Checkbox'; export { TextArea } from './TextArea/TextArea'; // Legacy forms diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/packages/grafana-ui/src/utils/standardEditors.tsx index df0d5d5f8a7..470ba283ea0 100644 --- a/packages/grafana-ui/src/utils/standardEditors.tsx +++ b/packages/grafana-ui/src/utils/standardEditors.tsx @@ -19,7 +19,7 @@ import { valueMappingsOverrideProcessor, ThresholdsMode, } from '@grafana/data'; -import { NumberValueEditor, Forms, StringValueEditor, Select } from '../components'; +import { NumberValueEditor, RadioButtonGroup, StringValueEditor, Select } from '../components'; import { Switch } from '../components/Forms/Switch'; import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings'; import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds'; @@ -248,7 +248,7 @@ export const getStandardOptionEditors = () => { id: 'radio', name: 'Radio', description: 'Allows option selection', - editor: props => , + editor: props => , }; const unit: StandardEditorsRegistryItem = { diff --git a/public/app/features/admin/UserCreatePage.tsx b/public/app/features/admin/UserCreatePage.tsx index 58cf9cfe6cf..61990f06747 100644 --- a/public/app/features/admin/UserCreatePage.tsx +++ b/public/app/features/admin/UserCreatePage.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import { Forms, Button, Input } from '@grafana/ui'; +import { Form, Button, Input, Field } from '@grafana/ui'; import { NavModel } from '@grafana/data'; import { getBackendSrv } from '@grafana/runtime'; import { StoreState } from '../../types'; @@ -32,22 +32,22 @@ const UserCreatePage: React.FC = ({ navModel, updateLocatio

Add new user

- +
{({ register, errors }) => { return ( <> - + - + - + - + - + - - + = ({ navModel, updateLocatio validate: value => value.trim() !== '' && value.length >= 4, })} /> - + ); }} - +
); diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx index dace1b3ee19..8534c46b14d 100644 --- a/public/app/features/admin/UserOrgs.tsx +++ b/public/app/features/admin/UserOrgs.tsx @@ -7,9 +7,9 @@ import { withTheme, ConfirmButton, Button, - Forms, HorizontalGroup, Container, + Field, } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; import { UserOrg, Organization, OrgRole } from 'app/types'; @@ -225,12 +225,12 @@ export class AddToOrgModal extends PureComponent - + - - + + - +