diff --git a/src/components/Form/__stories__/Playground.stories.tsx b/src/components/Form/__stories__/Playground.stories.tsx index bd142088..2cc61087 100644 --- a/src/components/Form/__stories__/Playground.stories.tsx +++ b/src/components/Form/__stories__/Playground.stories.tsx @@ -4,10 +4,13 @@ import type { ChangeEvent } from 'react' import { useState } from 'react' import { CheckboxField, + DateField, Form, + RadioField, RichSelectField, Submit, SubmitErrorAlert, + TagsField, TextBoxField, } from '../..' import { emailRegex, mockErrors } from '../../../mocks/mockErrors' @@ -17,7 +20,7 @@ export const Playground: ComponentStory = args => { return (
- + ) => @@ -42,6 +45,20 @@ export const Playground: ComponentStory = args => { required regex={[emailRegex]} /> + + + 1 + + + 2 + + + 3 + + + + + = args => { { label: 'Devops', value: 'devops' }, ]} /> + + + I'd like to receive news updates @@ -67,5 +87,12 @@ export const Playground: ComponentStory = args => { Playground.args = { errors: mockErrors, - initialValues: { receiveEmailUpdates: true }, + initialValues: { + receiveEmailUpdates: true, + choice: '2', + tags: ['cloud', 'of', 'choice'], + }, + onRawSubmit: values => { + console.log('Submit', values) + }, } diff --git a/src/components/TagsField/index.tsx b/src/components/TagsField/index.tsx index f99b7695..ae3512d5 100644 --- a/src/components/TagsField/index.tsx +++ b/src/components/TagsField/index.tsx @@ -3,15 +3,22 @@ import type { ComponentProps } from 'react' import { useFormField } from '../../hooks' import type { BaseFieldProps } from '../../types' -export type TagsFieldProps = BaseFieldProps & +type TagsProp = ComponentProps['tags'] + +export type TagsFieldProps = BaseFieldProps & Partial< - Pick, 'tags' | 'variant' | 'onChange'> + Pick< + ComponentProps, + | 'tags' + | 'variant' + | 'onChange' + | 'placeholder' + | 'disabled' + | 'className' + | 'id' + > > & { - className?: string - disabled?: boolean - id?: string name: string - placeholder: string required?: boolean } @@ -27,11 +34,12 @@ export const TagsField = ({ validate, variant, }: TagsFieldProps): JSX.Element => { - const { input } = useFormField(name, { + const { input } = useFormField(name, { disabled, required, type: 'text', validate, + value: tags, }) return ( @@ -46,7 +54,7 @@ export const TagsField = ({ }} placeholder={placeholder} variant={variant} - tags={tags} + tags={input.value} /> ) }