mi6 / mi6/ic-ui-kit

[ic-text-field] Validation issues: Inline validation on error/warning and not providing validationText

Open
#4,215 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.