ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-field-message-wrapper

Messaging components in the field from the form package must be wrapped using the message wrapper component.

Examples

This rule marks code as violations when it finds form messaging components inside the field component that are not wrapped by a message wrapper component.

Incorrect

import Form, { ErrorMessage, Field, HelperMessage, ValidMessage } from '@atlaskit/form';
import TextField from '@atlaskit/textfield';

<Field
    name="password"
    label="Password"
    defaultValue=""
    isRequired
    validate={(value) => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}
>
    {({ fieldProps, error, valid, meta }) => (
        <Fragment>
            <TextField type="password" {...fieldProps} />
            {error && !valid && (
                <HelperMessage>
                    Use 8 or more characters with a mix of letters, numbers & symbols.
                </HelperMessage>
            )}
            {error && <ErrorMessage>Enter a password that's longer than 8 characters.</ErrorMessage>}
            {valid && meta.dirty ? <ValidMessage>Awesome password!</ValidMessage> : null}
        </Fragment>
    )}
</Field>;

Correct

import Form, {
    ErrorMessage,
    Field,
    HelperMessage,
    MessageWrapper,
    ValidMessage,
} from '@atlaskit/form';
import TextField from '@atlaskit/textfield';

<Field
    name="password"
    label="Password"
    defaultValue=""
    isRequired
    validate={(value) => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}
>
    {({ fieldProps, error, valid, meta }) => (
        <Fragment>
            <TextField type="password" {...fieldProps} />
            <MessageWrapper>
                {error && !valid && (
                    <HelperMessage>
                        Use 8 or more characters with a mix of letters, numbers & symbols.
                    </HelperMessage>
                )}
                {error && <ErrorMessage>Enter a password that's longer than 8 characters.</ErrorMessage>}
                {valid && meta.dirty ? <ValidMessage>Awesome password!</ValidMessage> : null}
            </MessageWrapper>
        </Fragment>
    )}
</Field>;

Was this page helpful?

We use this feedback to improve our documentation.