Altinn / Altinn/app-frontend-react
Visual Differentiation (Row Colors) for Completed vs. Incomplete Rows
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
I propose an enhancement to improve user clarity when working with repeating groups or table-like components.
**Current Behavior**
Rows do not visually indicate whether they are completed or still incomplete. Users must manually check the contents of each row to understand which rows still require input.
**Proposed Change**
Implement different background colors (or other visual indicators) for:
- Completed rows (all required fields filled)
- Incomplete rows (one or more required fields missing)
This would give users a clear, immediate overview of their progress.
**Benefits**
- Improves usability by making it visually obvious what is finished and what still needs attention.
- Reduces risk of overlooking incomplete rows.
- Aligns with common UX best practices for status indicators.
Illustration of color indicators (with random colors)
### Additional Information
_No response_
Contributor guide
Research direction
No files, tests, or entry points are identified. Start by locating the repeating-group or table-like row components, then trace how required-field completion is determined; done means completed and incomplete rows have distinct, clear visual indicators without obscuring required input.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100