Inconsistent checkbox styles

[tinybigideas]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Consistent checkbox style

What is the current behavior?

mat-checkbox

mat-tree

mat-selection-list

mat-selection-list checkbox styles are slightly inconsistent. Only obvious when side by side with another source.

What are the steps to reproduce?

See:
https://material.angular.io/components/checkbox/overview
vs
https://material.angular.io/components/list/overview#selection-lists

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

Consistency

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

Angular 7, Material 7, Linux, Chrome/Firefox

Is there anything else we should know?

Nope. Super low priority, but worth mentioning.

[crisbeto]

The reason is that we have two checkboxes: mat-checkbox that comes with all the behavior, animations, accessibility etc. and mat-pseudo-checkbox which is CSS-only and intended only for presentation. After we reduced the sizes of checkbox, they ended up rendering slightly differently, because one uses SVG and the other one is pure CSS.

[thomas-parrish]

But both checkboxes are used in forms, and when they are used within the same form, it's extremely noticeable. Also, pseudo-checkboxes do not support the necessary features that would allow us to replace actual checkboxes with them (such as indeterminate state.) In our case, we have a multi-select with a select all feature, and it looks ridiculous now because of this change.

[Angelinsky7]

i've got the same effect as @thomas-parrish but in a simple mat-selection-list without doing nothing special

[stot3]

Yea, it's looking worse and worse, not the checkboxes are virtually impossible to look at, there has to be a better way, then completely separate components, that look the same but doing completely different things

[wagnermaciel]

@stot3 Some context on the mat-pseudo-checkbox and why it exists as a separate component from the mat-checkbox:

The mat-pseudo-checkbox component shows a simplified checkbox without including any kind of "real" checkbox. It is used when the checkbox is purely decorative or when a large number of them will be included (such as for the options in a multi-select) for better performance. Because it is purely decorative, it is also completely invisible to screen-readers

@tinybigideas These differences seem to have been mostly resolved and the mat-pseudo-checkbox now very closely matches the mat-checkbox aside from a couple of pixels. Even when they are directly side-by-side it is hard to notice a difference. For this reason I'll be closing this issue. If the differences are still too egregious feel free to reopen as a new issue

[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.}