bug: --background-hover being overridden on ion-button fill="clear" and color

[reed-lawrence]

Ionic version:
"@ionic/core": "^5.6.9"
"@ionic/angular": "^5.6.9"
"@angular/core": "~10.0.0"

Current behavior:
<ion-button fill="clear" style="--background-hover: transparent; --background-hover-opacity: 0;">

Hovered ion-buttons still show a background.

Chrome inspector shows:

Which digging through the node_modules:
node_modules/@ionic/core/dist/collection/components/button/button.md.css

Line 417:

@media (any-hover: hover) {
  :host(.button-solid.ion-color:hover) .button-native::after {
    background: var(--ion-color-contrast);
    opacity: 0.08;
  }

  :host(.button-clear.ion-color:hover) .button-native::after,
:host(.button-outline.ion-color:hover) .button-native::after {
    background: var(--ion-color-base);
    opacity: 0.04;
  }
}

Which looks to be a compiled output from here: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/button/button.md.scss

Expected behavior:
On a desktop application (untested on mobile):

The above styles would expect the button to not have a background when hovered.

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@5.7.0-dev.202106101429.1720014

[reed-lawrence]

Yep, looks like it did the trick! Confirmed in inspector too:

[liamdebeasi]

Thanks for the issue. This has been resolved via #23442, and a fix will be available in an upcoming release of Ionic Framework.

One change I made to the PR is that you should not be able to override the background color with variables when using the color prop, since that would defeat the purpose of using the color prop. For your use case, that should not make a difference since you can still change the opacity using variables like --background-hover-opacity.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.