Skip to content

fix(button): no color set for flat and icon buttons #9536

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

Conversation

devversion
Copy link
Member

@devversion devversion commented Jan 23, 2018

  • Currently for flat buttons and icon buttons, the font color is not set by the theme. This can cause the text to be invisible on those buttons in a dark theme. From now on, those buttons will also receive a font color by the theme.
  • Flat buttons and icon buttons inside of a <mat-toolbar> will inherit the font color from the toolbar row. This ensures that those buttons are looking as expected in themed toolbars (e.g. primary, accent, warn)

Fixes #4614. Fixes #9231. Fixes #9634

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 23, 2018
Copy link
Contributor

@tinayuangao tinayuangao left a comment

Choose a reason for hiding this comment

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

LGTM

<p>
<mat-toolbar>
<mat-icon class="demo-toolbar-icon">menu</mat-icon>
<span>Default Toolbar</span>
<button mat-icon-button>
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: do we want to keep one mat-icon without button in the demo?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good point. I have such plain <mat-icon> elements in the demo toolbars below.

.mat-button-wrapper > * {
vertical-align: middle;
}
}

// Buttons that don't have a background color can inherit the color from its parent.
.mat-button, .mat-icon-button {
color: inherit;
Copy link
Member

Choose a reason for hiding this comment

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

inherit or currentColor? Is inherit supported on IE11?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, just confirmed that inherited is supported.

@devversion devversion added in progress This issue is currently in progress and removed pr: needs review labels Jan 25, 2018
* Currently for flat buttons and icon buttons, the font color is not set by the theme. This can cause the text to be invisible on those buttons in a dark theme. From now on, those buttons will also receive a font color by the theme.
* Flat buttons and icon buttons inside of a `<mat-toolbar>` will inherit the font color from the toolbar row. This ensures that those buttons are looking as expected in themed toolbars (e.g. primary, accent, warn)

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
@devversion devversion force-pushed the fix/buttons-font-color-overwritten branch from 05ba139 to 0806b29 Compare January 27, 2018 14:48
@devversion devversion added pr: needs review and removed in progress This issue is currently in progress labels Jan 27, 2018
@devversion devversion changed the title fix(button): font color incorrect for buttons with background fix(button): no color set for flat and icon buttons Jan 27, 2018
@devversion
Copy link
Member Author

@crisbeto Updated to what we discussed. Please have a look.

@devversion devversion added the target: patch This PR is targeted for the next patch release label Jan 31, 2018
@devversion devversion closed this Feb 3, 2018
@devversion devversion deleted the fix/buttons-font-color-overwritten branch February 3, 2018 18:14
@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
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
5 participants