patternfly / patternfly/patternfly-react
Input Components - Simplify Interface by handling FormGroup internally
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 9
Description
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}
/>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing input components and FormGroup implementation to understand their current responsibilities and public APIs. Compare how labels, IDs, helper text, required state, validation, and errors are handled, then define the component behavior and tests needed to confirm that labeled inputs work without an explicit FormGroup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100