[ic-text-field] Validation issues: Inline validation on error/warning and not providing validationText
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
Two issues identified with ic-text-field validation:
- Inline validation only works for Success (seemingly regression of [#612](https://github.com/mi6/ic-ui-kit/issues/612)) and not Warning / Error EDIT: This isn't a bug, this is intended behaviour [explained in the guidance](https://design.sis.gov.uk/components/inputs/text-field#validation-error-handling), but not enforced in code
- If validationStatus is set, but no message is provided, the icon appears below the field with no text next to it. Looks bad.
### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Both issues can be replicated in [React Storybook Playground](https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/react-components-text-field--playground)
2. Set inlineValidation to true and switch between different validationStatus options and see that only Success displays properly
3. Set validationStatus to anything, inlineValidation to false and leave validationText blank and you'll see that the icon appears below the feel with a blank space next to it, which seems incorrect.
### 🧐 Expected behaviour
- throw an error/warning in the console when trying to using inlineValidation with error/warning validationStatus?
For the second issue, suggested solution:
- Have the component error if validationSatus is true, inlineValidation is false and validationText is empty.
or
- Have a default error/warning/success text that populates the space next to the icon if validationText is blank
### 📝 Acceptance Criteria
### 🚨 Urgency (low, medium or high)
Medium
### Additional info
This was raised by a user who noticed the regression from v2 to v3
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 with the ic-text-field component and reproduce both cases in the React Storybook Playground. Read the linked validation guidance and compare it with the current behavior, then clarify whether the error/warning case is intended and which blank validationText behavior should be accepted. Done should include a decided behavior and coverage for the selected validation cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100