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}
/>

Inizia esaminando i componenti di input esistenti e l’implementazione di FormGroup per comprenderne le responsabilità attuali e le API pubbliche. Confronta il modo in cui vengono gestiti label, IDs, testo di supporto, stato di obbligatorietà, validazione ed errori, quindi definisci il comportamento del componente e i test necessari per confermare che gli input con label funzionino senza un FormGroup esplicito.