ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-simple-form

Simple form implementations should be used when extended features or complex implementations are not necessary.

Examples

This rule marks code as a violation when it finds Design System form components that don’t use render props or only use the formProps render prop.

Incorrect

import { Field, Form } from '@atlaskit/form';

<Form
    onSubmit={() => {
        /* ... */
    }}
>
    {({ formProps }) => (
        <form {...formProps}>
            <Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>
        </form>
        )}
</Form>;

import { Field, Form } from '@atlaskit/form';

<Form
    onSubmit={() => {
        /* ... */
    }}
>
    {({ formProps }) => (
        <form {...formProps} name="form" data-testid="testId" data-foo="bar">
            <Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>
        </form>
        )}
</Form>;

Correct

import { Field, Form } from '@atlaskit/form';

<Form
    onSubmit={() => {
        /* ... */
    }}
>
    <Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>
</Form>;

import { Field, Form } from '@atlaskit/form';

<Form
    onSubmit={() => {
        /* ... */
    }}
    name="form"
    testId="testId"
    formProps={{
        'data-foo': "bar"
    }}
>
    <Field name="username" component={({fieldProps}) => <input {...fieldProps} />}>
</Form>;

Was this page helpful?

We use this feedback to improve our documentation.