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

Bắt đầu bằng cách xem xét các component input hiện có và phần triển khai FormGroup để hiểu trách nhiệm hiện tại và các API công khai của chúng. So sánh cách nhãn, IDs, văn bản hỗ trợ, trạng thái bắt buộc, việc kiểm tra hợp lệ và lỗi được xử lý, sau đó xác định hành vi của component và các bài kiểm thử cần thiết để xác nhận rằng các input có nhãn hoạt động mà không cần FormGroup tường minh.