Text alignment issues on components with labels, helpertext or validation
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary of the bug
Text does not appear left aligned when a component is placed inside a container with textAlign: center
## 🪜 How to reproduce
With the following code in the React storybook:
```
```
## 📸 Screenshots or code
## 🧐 Expected behaviour
To be confirmed with design, but expectation is all text should align with the left edge of the input
## 📝 Acceptance Criteria
*Given* a component had a label, helper text or validation message
*When* it is placed in a container with textAlign: center
*Then* the text should remain aligned to the left hand side of the input element
## Additional info
Affects at least textfield, select, date input, checkbox, radio
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 in the React Storybook with the provided reproduction and inspect the textfield, select, date input, checkbox, and radio components. Confirm the intended alignment with design, then verify that labels, helper text, and validation messages stay aligned with the input when the container uses textAlign: center.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100