Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mat-selection-list defaults to accent color and cannot be set to primary #15234

Closed
Admiralfeb opened this issue Feb 19, 2019 · 3 comments · Fixed by #15237
Closed

mat-selection-list defaults to accent color and cannot be set to primary #15234

Admiralfeb opened this issue Feb 19, 2019 · 3 comments · Fixed by #15237
Assignees
@devversion
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix

Comments

@Admiralfeb
Copy link

What is the expected behavior?

I should be able to control the color of the checkboxes of the mat-selection-list

What is the current behavior?

The color is set to accent only and does not permit me to change it via a color property. The documentation does not state that the color is set to accent

What are the steps to reproduce?

Provided stackblitz shows the issue.
https://stackblitz.com/edit/angular-material2-issue-fvzopz

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

Angular CLI: 7.3.2
Node: 11.9.0
OS: win32 x64
Angular: 7.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.13.2
@angular-devkit/build-angular 0.13.0
@angular-devkit/build-optimizer 0.13.0
@angular-devkit/build-webpack 0.13.0
@angular-devkit/core 7.3.2
@angular-devkit/schematics 7.3.2
@angular/cdk 7.3.2
@angular/cli 7.3.2
@angular/material 7.3.2
@ngtools/webpack 7.3.0
@schematics/angular 7.3.2
@schematics/update 0.13.2
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0

Is there anything else we should know?
@devversion devversion self-assigned this Feb 19, 2019
devversion added a commit to devversion/material2 that referenced this issue Feb 19, 2019
@devversion
feat(selection-list): support specifying theme color
a44ecd3 
Currently the selection list always uses the `accent` color for the underlying
pseudo checkbox of list options. In order to make this configurable by the
user, we add a `color` input that matches our other usages of the `color`
input in order to be consistent.

Since we want to allow that a color can be specified for the `<mat-selection-list>` and
that it's possible to overwrite the color for an individual list option, we don't use the
color mixin as it brings in a lot of overhead and also doesn't make it easy to provide
the desired precedence for individual options. Also we **can't** set the color class
on the `<mat-selection-list>` as the pseudo checkbox will then ignore the color class
set for the individual list option.

Closes angular#15234
@devversion devversion mentioned this issue Feb 19, 2019
Merged
devversion added a commit to devversion/material2 that referenced this issue Feb 19, 2019
@devversion
feat(selection-list): support specifying theme color
d57e6ac 
Currently the selection list always uses the `accent` color for the underlying
pseudo checkbox of list options. In order to make this configurable by the
user, we add a `color` input that matches our other usages of the `color`
input in order to be consistent.

Since we want to allow that a color can be specified for the `<mat-selection-list>` and
that it's possible to overwrite the color for an individual list option, we don't use the
color mixin as it brings in a lot of overhead and also doesn't make it easy to provide
the desired precedence for individual options. Also we **can't** set the color class
on the `<mat-selection-list>` as the pseudo checkbox will then ignore the color class
set for the individual list option.

Closes angular#15234
devversion added a commit to devversion/material2 that referenced this issue Feb 19, 2019
@devversion
feat(selection-list): support specifying theme color
50fa883 
Currently the selection list always uses the `accent` color for the underlying
pseudo checkbox of list options. In order to make this configurable by the
user, we add a `color` input that matches our other usages of the `color`
input in order to be consistent.

Since we want to allow that a color can be specified for the `<mat-selection-list>` and
that it's possible to overwrite the color for an individual list option, we don't use the
color mixin as it brings in a lot of overhead and also doesn't make it easy to provide
the desired precedence for individual options. Also we **can't** set the color class
on the `<mat-selection-list>` as the pseudo checkbox will then ignore the color class
set for the individual list option.

Closes angular#15234
@devversion devversion added feature This issue represents a new feature or feature request rather than a bug or bug fix has pr labels Feb 19, 2019
jelbourn pushed a commit that referenced this issue Feb 22, 2019
@devversion @jelbourn
feat(selection-list): support specifying theme color (#15237)
66d38fc 
Currently the selection list always uses the `accent` color for the underlying
pseudo checkbox of list options. In order to make this configurable by the
user, we add a `color` input that matches our other usages of the `color`
input in order to be consistent.

Since we want to allow that a color can be specified for the `<mat-selection-list>` and
that it's possible to overwrite the color for an individual list option, we don't use the
color mixin as it brings in a lot of overhead and also doesn't make it easy to provide
the desired precedence for individual options. Also we **can't** set the color class
on the `<mat-selection-list>` as the pseudo checkbox will then ignore the color class
set for the individual list option.

Closes #15234
@mkurcius
Copy link

mkurcius commented Apr 1, 2019 •
edited
Loading

When this will be released?
There were 3 releases since 22 Feb (merge date) :)

BTW
this option is metioned in doc: https://material.angular.io/components/list/api#MatListOption
but there is nothing in the code in branch: 7.3.x (I asume this is release branch :) )

@mmoussikhine
Copy link

There is still a problem here. If the parent component has mat-primary class set (like mat-tab-group does by default), then changing color to accent on mat-selection-list or mat-list-option has no effect, since mat-accent is never explicitly set as only primary and warn values are checked:

    ...
    '[class.mat-primary]': 'color === "primary"',
    '[class.mat-warn]': 'color === "warn"',
    ...

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(selection-list): support specifying theme color devversion/material2
4 participants
@mkurcius @devversion @mmoussikhine @Admiralfeb