Stepper does not follow the material guidelines.

[Ploppy3]

Bug, feature request, or proposal:

Request

What is the expected behavior?

Stepper should follow the material guidelines.

What is the current behavior?

Stepper does not follow the material guidelines.

What is the use-case or motivation for changing an existing behavior?

Stepper should follow the material guidelines.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

2.0.0-beta.11

Is there anything else we should know?

https://material.io/guidelines/components/steppers.html

• Grey background is on hover only (currently active steps have grey backgroud?)
• Grey ripple on click (currently there is no ripple)
• Steps' labels default color is 87% black (currently unfocused labels are 38% black which means 'disabled text' according to material guidelines)
• Focused steps' labels should be bold according to images (which helps differentiate active steps from focused steps)
• Cursor on active steps' labels should be set to 'pointer' when hovering (currently it's set to default 'grab' on label)

[willshowell]

Can you be more specific? Which guidelines in particular does it fail to address?

[Ploppy3]

Current implementation just seems wrong due to its many errors, that's why I checked the material guidelines.
Edited with 5 issues so far for horizontal linear stepper & horizontal non-linear stepper.
I did not check for vertical stepper and did not check for mobile stepper.

[willshowell]

Thanks. It's hard to "complete" an issue like this without explicit goals to measure against.

[Ploppy3]

@crisbeto I see that the issue will be closed but I can't find where your fixed the text color [Steps' labels default color is 87% black (currently unfocused labels are 38% black which means 'disabled text' according to material guidelines)]. Did you fixed it? Thank you.

[crisbeto]

@Ploppy3 I didn't change it, because the spec seems to indicate that the inactive steps are supposed to be 38% black:

Inactive steps

14sp Roboto Regular
38% black

Also note steps two and three here:

[Ploppy3]

38% black means 'disabled text' but you can click on those right? Unless it is a linear stepper.

[crisbeto]

The way I interpret it is that disabled text is 38%, but that color isn't reserved only for disabled text. Also AFAIK aside from the orientation, the styling of vertical and horizontal steppers is exactly the same.

[Ploppy3]

See images bellow:

I'm not talking about horizontal or vertica but linear vs non-linear where the steps must be done in a left-to right order.

(I do admit that the guidelines are quite complex and probably incorrect at some points)

Linear:
Some steps are disabled so their labels are 38% black.

Non Linear:
All steps are enabled therefore the labels are 87% black.

[Ploppy3]

@crisbeto updated my latest comment with a lot more info so I think I should give you another notification :)

[Ploppy3]

@crisbeto Did you fix the last thing we talked about?

[crisbeto]

I didn't have time to get around to it, before it got merged @Ploppy3.

[Ploppy3]

Should I reopen or open a new issue?

[crisbeto]

Let's reopen it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}