Linear stepper shows edit icons instead of done icons
- 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
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