Skip to content

fix(datepicker): incorrect icon color #10458

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.

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

Merged

Conversation

crisbeto
Copy link
Member

  • Fixes the datepicker previous and next icons having the wrong color, because they were being overwritten by the .mat-icon-button which sets it explicitly to currentColor.
  • Sets the inactive datepicker toggle to use the icon color.

@crisbeto crisbeto requested a review from mmalerba as a code owner March 17, 2018 00:09
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Mar 17, 2018
.mat-calendar-next-button,
.mat-calendar-previous-button {
.mat-datepicker-toggle,
.mat-calendar-next-button::after,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have to target ::after explicitly? I would assume it would just inherit if you targeted the parent

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was being overwritten by the .mat-icon-button if I target the parent. I think it depends on the order in which the style tags were added.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would just bump the specificity on the rule then, rather than just targeting the pseudo-element. The button may use the color to determine the color for ripples and things

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to avoid increasing the specificity, but I see your point that there could be other things depending on it. It's changed now.

* Fixes the datepicker previous and next icons having the wrong color, because they were being overwritten by the `.mat-icon-button` which sets it explicitly to `currentColor`.
* Sets the inactive datepicker toggle to use the `icon` color.
@crisbeto crisbeto force-pushed the datepicker-inaccurate-icon-color branch from eb7edc6 to 0eaf817 Compare March 20, 2018 17:44
@mmalerba mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release and removed pr: needs review labels Mar 20, 2018
@josephperrott josephperrott merged commit 4e298a6 into angular:master Mar 27, 2018
@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 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants