Input Components - Simplify Interface by handling FormGroup internally

Labels and inputs in html are hooked together by ID.

<label for="username">Enter your username:</label>
<input id="username" />

In PF4 to get a label on an input requires a FormGroup.

<FormGroup
    id="user-form-group"
    fieldId="user"
    label="User"
    helperText="User help text"
    isRequired
    validated={error ? 'error' : undefined}
    helperTextInvalid={error}
>
    <TextInput
        id="user"
        type="text"
        aria-describedby="user-form-group"
        isRequired
        validated={error ? 'error' : undefined}
        placeholder="Enter user"
        value={user}
        onChange={onChange}
    />
</FormGroup>

It make for a streamlined developer experience if that logic could be hidden from the developer. On a input component, if a label is provided, then the component could handle all the logic internally.

<TextInput
    id="user"
    label="User"
    helper="User help text"
    type="text"
    required
    placeholder="Enter user"
    value={user}
    onChange={onChange}
    error={error}
/>

Commencez par examiner les composants d’entrée existants et l’implémentation de FormGroup afin de comprendre leurs responsabilités actuelles et leurs API publiques. Comparez la manière dont sont gérés les labels, les IDs, le texte d’aide, l’état obligatoire, la validation et les erreurs, puis définissez le comportement du composant et les tests nécessaires pour confirmer que les champs d’entrée avec label fonctionnent sans FormGroup explicite.