angular / angular/components

Linear stepper shows edit icons instead of done icons

Open
#8,997 20 comments 18 reactions 0 assignees View on GitHub
area: cdk/stepper G P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug:
Stepper shows edit icons instead of "done" icons

#### What is the expected behavior?
Completed steps should have a "done" icon on a linear stepper.

#### What is the current behavior?
Completed steps show an edit icon

#### What are the steps to reproduce?
https://angular-19juam.stackblitz.io
1. Fill step 1
2. Click Next
3. Notice icon on label

#### What is the use-case or motivation for changing an existing behavior?
The checkmark makes it easier to understand that a step is done. Perhaps the edit icon is still useful for `:hover` and `:focus`. Or perhaps the edit icon would work better on a non-linear stepper.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Current build: 5.0.0-rc.3-05d726d

#### Is there anything else we should know?
On the issue #7260, it was marked as fixed but the stepper doesn't meet the material guidelines yet, and this is one of the reasons why.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and follow the linear stepper after completing step 1. Confirm that completed steps display a "done" icon rather than an edit icon, while considering the issue's note about hover and focus behavior. Done means the completed-step icon matches the expected Material Design behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.