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

まず既存の入力コンポーネントと FormGroup の実装を確認し、それらの現在の責務と公開 API を理解します。ラベル、IDs、ヘルパーテキスト、必須状態、バリデーション、エラーがどのように扱われているかを比較し、そのうえで、明示的な FormGroup なしでラベル付き入力が動作することを確認するために必要なコンポーネントの動作とテストを定義します。