Show the selected option when md-button-toggle is disabled #3007
Description
Bug, feature request, or proposal:
feature request
What is the expected behavior?
Change the style from the disabled "md-button-toggle" when it's checked. This way we can show a disabled group and still let the user know which option was selected before
What is the current behavior?
When disabled, the framework applies the class "mat-button-toggle-disabled" that changes the background of the button to: $md-grey, 200.
What are the steps to reproduce?
Just disable a md-button-toggle-group with one of the options selected. You can't see which one was selected.
Providing a Plunker (or similar) is the best way to get the team to see your issue.
What is the use-case or motivation for changing an existing behavior?
I have a page when the user select an option on a md-button-toggle-group and, on the next page, I need to show the selected option but do not let the user change it.
Which versions of Angular, Material, OS, browsers are affected?
@angular/material: 2.0.0-beta.1
Is there anything else we should know?
The simples solution will be to add a different background-color when the button is disabled and checked (not tested):
File: _button-toggle-theme.scss
.mat-button-toggle-disabled {
background-color: map_get($mat-grey, 200);
color: mat-color($foreground, disabled-button);
&.mat-button-toggle-checked {
background-color: map_get($mat-grey, 400);
}
}