Altinn / Altinn/app-frontend-react

Visual Differentiation (Row Colors) for Completed vs. Incomplete Rows

Open
#3,710 0 comments 0 reactions 0 assignees View on GitHub
kind/feature-request status/triage
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)
Image

### Additional Information

_No response_

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.