-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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
bug(button): mat-icon-button vs mat-button hover inconsistency #29456
Comments
Should be resolved by #29433. |
Just updated to 18.1.1 and the inconsistency remains exactly the same. |
What does your markup look like? You might also have to add the same |
I am not using the color attribute. I'm using the m3 theme without the color-variants-backwards-compatibility.
And my styles.scss
|
I'd have to look into it more, but I suspect that you'll have to use the color backwards compatibility, because by default icon buttons don't have a color in M3 while regular buttons take the primary color. |
Thanks for the response. Is that behaviour by design or just something that will be fixed? Cause our aim is to use the native m3 theme and not use a compatibility layer and avoid having to set the color atribute everywhere. |
It's by design in that Material design doesn't support the |
In that case shouldn't mat-button also not use by default the primary color if there is no color property? And if you see in my examples I don't use and don't expect to use de color attribute. But if I use the these buttons as-is (without color) at least shouldn't they look the same? Including ripple, active, hover, etc? |
Is this a regression?
The previous version in which this bug was not present was
No response
Description
I have a Tool Bar with 3 icons, 2 mat-icon-button and one mat-button:
![image](https://private-user-images.githubusercontent.com/5615323/350137103-9ad39310-acd6-4f84-a5ef-557cb164d97a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NzkyMTQsIm5iZiI6MTcyNTU3ODkxNCwicGF0aCI6Ii81NjE1MzIzLzM1MDEzNzEwMy05YWQzOTMxMC1hY2Q2LTRmODQtYTVlZi01NTdjYjE2NGQ5N2EucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMjMyODM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWY1ZmNjNjQwZTAxODg4ODUwMTc5MjNhMDRlZWRiMGQ1OWNiNjBjNmZjN2E5Y2YwNzQxZGU1NzViNGM0NWUwMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.9Ipe0silPm6YQGfo70H3O6_F1ne2tPEJagC8j3mhndc)
When Hovering, the background color is different and inconsistent.
mat-button hover has a hint of the theme color:
![image](https://private-user-images.githubusercontent.com/5615323/350137341-2a6cd3fc-8b56-40fa-a8bd-f9655b96888f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NzkyMTQsIm5iZiI6MTcyNTU3ODkxNCwicGF0aCI6Ii81NjE1MzIzLzM1MDEzNzM0MS0yYTZjZDNmYy04YjU2LTQwZmEtYThiZC1mOTY1NWI5Njg4OGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMjMyODM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjQyYmJhMTJmMTZlZmQxZjI5OWIyMmQxMDlkMDI1NmYzMThkZDNmYWI5NmEyYWQ5ODdmZmYwZjk4ZTYzMWVlZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.HjsG4merD4kIMTkGBxIjjAcBiyWhBt9aQyT0DJOC3Yk)
![image](https://private-user-images.githubusercontent.com/5615323/350138229-d1adc870-2199-4c39-abd2-932dd7b1c56d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NzkyMTQsIm5iZiI6MTcyNTU3ODkxNCwicGF0aCI6Ii81NjE1MzIzLzM1MDEzODIyOS1kMWFkYzg3MC0yMTk5LTRjMzktYWJkMi05MzJkZDdiMWM1NmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMjMyODM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2I4ZGM4NDAxMDcwM2MxN2E4MjM2ZGNiYWQ2ZWFjMDVjMTJmODEwMmExM2VhZDAwY2VkZjczZTUzNzMxMzYxNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.C4vuy-WrUPE4xwEmXouHceLH9iamEJaRBPKhRQBfwII)
![image](https://private-user-images.githubusercontent.com/5615323/350138661-18e900c1-63e3-4190-b0ee-591b0fc6b2b4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NzkyMTQsIm5iZiI6MTcyNTU3ODkxNCwicGF0aCI6Ii81NjE1MzIzLzM1MDEzODY2MS0xOGU5MDBjMS02M2UzLTQxOTAtYjBlZS01OTFiMGZjNmIyYjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMjMyODM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDFjZmRlNjM2Zjk2Mzk5Y2YyMDgyYmQ2ODdmMzA5NjBjODUyN2NlNTY2MjJhYjg2NGFlMDcwODQ2OThhYjY0YiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ThN_1pqnZ4s-BHiy78VEmlRUsExMGX97jSEGTkH_fyc)
mat-icon-button only has some opacity with a state layer color that ignores the theme.
![image](https://private-user-images.githubusercontent.com/5615323/350137408-92249066-d892-491b-a2c5-927738dc6ff6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NzkyMTQsIm5iZiI6MTcyNTU3ODkxNCwicGF0aCI6Ii81NjE1MzIzLzM1MDEzNzQwOC05MjI0OTA2Ni1kODkyLTQ5MWItYTJjNS05Mjc3MzhkYzZmZjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMjMyODM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NThlN2RiYWI0M2UzNDQ4ZTZmNWZkNTQ5MjQxNzM1YTU4MmU4YTFjN2NkMzQ0Y2FkYjljZDZlNTZjZTE0YjUzOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.1Q5s66PlhRbFtNglIQFbbuBsT8fLTW4c5nFGaFCXgZM)
![image](https://private-user-images.githubusercontent.com/5615323/350138054-2143d93f-8e19-4ad1-8f2d-56d4bd01b29b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NzkyMTQsIm5iZiI6MTcyNTU3ODkxNCwicGF0aCI6Ii81NjE1MzIzLzM1MDEzODA1NC0yMTQzZDkzZi04ZTE5LTRhZDEtOGYyZC01NmQ0YmQwMWIyOWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMjMyODM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTgzY2MxZDEyYWZlZTJkZjQyZmM1ZjMyNDI3MjMxNzAzYWE3NzJkNWY0M2ZmZWVkNThiNmE1ODdhY2UxNzlkZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.SRJryrcubzDtCDmG4XGGfg7eMgIMzWCzsFPPDj3XLw8)
Why this inconsistency?
Reproduction
StackBlitz link: Could not make one
Steps to reproduce:
Expected Behavior
I expect the same behaviour for both buttons.
Actual Behavior
They have different hover background colors.
Environment
The text was updated successfully, but these errors were encountered: