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

Text color not visible in md-raised-button within md-toolbar #4614

Closed
daankets opened this issue May 17, 2017 · 5 comments · Fixed by #9771
Closed

Text color not visible in md-raised-button within md-toolbar #4614

daankets opened this issue May 17, 2017 · 5 comments · Fixed by #9771
Assignees
@devversion
Labels
needs: discussion Further discussion with the team is needed before proceeding P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@daankets
Copy link

Bug, feature request, or proposal:

The .mat-toolbar.mat-primary style (for example) sets the text color to white. When adding an md-raised-button (no color) to the toolbar, the button text is invisible.

What is the expected behavior?

Visible text in the raised buttons.

What is the current behavior?

Invisible text in the raised buttons.

What are the steps to reproduce?

Create a md-toolbar with primary color background (default). Then, add a md-raised-button without [color] into it with containing some text. The text will not show up.

Plunker example

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

The raised buttons should work even if embedded within a toolbar. They do not work unless a specific color (warn, primary, accent) is set.

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

Angular 2, Angular Material 2 beta 5, Typescript (N/A), Browser (N/A)

Is there anything else we should know?
@devversion devversion assigned devversion and unassigned devversion May 19, 2017
@devversion
Copy link
Member

@tinayuangao I looked at this issue and this is because of the currentColor inside of the button styles.

The currentColor makes sense to have on the buttons but for the toolbar's this can cause invisible text.

@jelbourn jelbourn added discussion P4 A relatively minor issue that is not relevant to core functions labels Jun 20, 2017
@donroyco donroyco mentioned this issue Aug 21, 2017
Closed
@tobiaseisenschenk
Copy link

I experienced the same issue, I'll just workaround it, but a fix would be highly appreciated.

@Eragra3
Copy link

Eragra3 commented Nov 14, 2017

Bump, any idea except for custom css?

@PhilDore11
Copy link

you can use md-colors

@devversion devversion self-assigned this Jan 15, 2018
@devversion devversion added the needs investigation A member of the team needs to do further investigation to determine the root cause label Jan 15, 2018
devversion added a commit to devversion/material2 that referenced this issue Jan 23, 2018
@devversion
fix(button): font color specificity too low
89a274b 
Right now, the font-color for buttons with a background color (raised, fab, mini-fab) with the default `color` palette is not set properly. This is because the `currentColor` CSS property overwrites the font color from the theme for those buttons.

To fix the issue, the `currentColor` can be only used on buttons without a background color (normal and icon-buttons). While being at it, using `inherited` as value is more readable and results in the same behavior.

Fixes angular#4614
devversion added a commit to devversion/material2 that referenced this issue Jan 23, 2018
@devversion
fix(button): font color incorrect for buttons with background
153af60 
Right now, the font-color for buttons with a background color (raised, fab, mini-fab) with the default `color` palette is not set properly. This is because the `currentColor` CSS property overwrites the font color from the theme for those buttons.

To fix the issue, the `currentColor` can be only used on buttons without a background color (normal and icon-buttons). While being at it, using `inherited` as value is more readable and results in the same behavior.

Fixes angular#4614
devversion added a commit to devversion/material2 that referenced this issue Jan 23, 2018
@devversion
fix(button): font color incorrect for buttons with background
05ba139 
Right now, the font-color for buttons with a background color (raised, fab, mini-fab) with the default `color` palette is not set properly. This is because the `currentColor` CSS property overwrites the font color from the theme for those buttons.

To fix the issue, the `currentColor` can be only used on buttons without a background color (normal and icon-buttons). While being at it, using `inherited` as value is more readable and results in the same behavior.

Fixes angular#4614.
@devversion devversion mentioned this issue Jan 23, 2018
Closed
@devversion devversion added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr and removed P4 A relatively minor issue that is not relevant to core functions needs investigation A member of the team needs to do further investigation to determine the root cause labels Jan 23, 2018
@devversion devversion mentioned this issue Jan 27, 2018
Closed
devversion added a commit to devversion/material2 that referenced this issue Jan 27, 2018
@devversion
fix(button): no color set for flat and icon buttons
0806b29 
* 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 added a commit to devversion/material2 that referenced this issue Feb 3, 2018
@devversion
fix(button): no color set for flat, stroked and icon buttons
5f96312 
* Currently for normal buttons, stroked 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.
* Normal buttons, stroked 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)
* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)
* Cleans up the button theme while being at it

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
@devversion devversion mentioned this issue Feb 3, 2018
Merged
devversion added a commit to devversion/material2 that referenced this issue Feb 3, 2018
@devversion
fix(button): no color set for normal, stroked and icon buttons
1725324 
* Currently for normal buttons, stroked 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.
* Normal buttons, stroked 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)
* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)
* Cleans up the button theme while being at it

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
devversion added a commit to devversion/material2 that referenced this issue Feb 7, 2018
@devversion
fix(button): no color set for normal, stroked and icon buttons
8beb133 
* Currently for normal buttons, stroked 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.
* Normal buttons, stroked 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)
* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)
* Cleans up the button theme while being at it

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
devversion added a commit to devversion/material2 that referenced this issue Feb 10, 2018
@devversion
fix(button): theme font color being overwritten
f3b930b 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
devversion added a commit to devversion/material2 that referenced this issue Feb 10, 2018
@devversion
fix(button): theme font color being overwritten
32b234e 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
jelbourn pushed a commit that referenced this issue Feb 14, 2018
@devversion @jelbourn
fix(button): theme font color being overwritten
e5afb36 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes #4614. Fixes #9231. Fixes #9634
jelbourn pushed a commit that referenced this issue Mar 16, 2018
@devversion @jelbourn
fix(button): theme font color being overwritten
5f67d24 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes #4614. Fixes #9231. Fixes #9634
andrewseguin pushed a commit that referenced this issue Mar 19, 2018
@devversion @andrewseguin
fix(button): theme font color being overwritten (#9771)
c3a8d0c 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes #4614. Fixes #9231. Fixes #9634
@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
@mmalerba mmalerba added the needs: discussion Further discussion with the team is needed before proceeding label Mar 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
needs: discussion Further discussion with the team is needed before proceeding P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
8 participants
@jelbourn @daankets @PhilDore11 @devversion @Eragra3 @mmalerba @tobiaseisenschenk @tinayuangao