--ion-item-background-activated is not being applied

[wiggitamoo]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/Users/andre/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.11.1
   @angular-devkit/schematics    : 7.1.1
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : 1.2.0

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.8
   @capacitor/core           : 1.0.0-beta.8

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/andre/Library/Android/sdk)
   NodeJS            : v8.11.3 (/Users/andre/.nvm/versions/node/v8.11.3/bin/node)
   npm               : 6.3.0
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug
The theme variable --ion-item-background-activated is not being applied.

Steps to Reproduce
Steps to reproduce the behavior:

1. Click on an ion-item in and ion-list
2. Apply an "activated" class to the ion-item element
3. See error

Related Code

<ion-list>
    <ion-item (click)="openItem(asset)" *ngFor="let item of items" [class.activated]="item && item.id == selectedItem.id">
        <ion-label>
            <h2>{{item.name}}</h2>
            <p>{{item.type}}</p>
        </ion-label>
    </ion-item>
</ion-list>

openItem(item) {
    this.selectedItem = item;
}

light: '#333333',
    --ion-color-light: '#333333';
    --ion-color-light-shade: ${Color('#333333').darken(shadeRatio)};
    
    --ion-item-background: var(--ion-color-light);
    --ion-item-background-activated: var(--ion-color-light-shade);

Expected Behavior
the activated class should use the background color defined by the --ion-item-background-activated css variable.

[wiggitamoo]

I temporarily got around the issue by adding this css

.activated {
  --ion-item-background: var(--ion-color-light-shade);
}

[brandyscarney]

Thank you for the issue! I submitted a PR to fix that here: #16752

Just need to investigate updating the ripple color.

[microwin168]

I have same issue.

[brandyscarney]

I updated the PR to fix this so that this variable will update the --ripple-color of an item, but Material Design items do not use the .activated class for styling, and if they did it would interfere with the ripple effect. For example, if I set the --background-activated and the --ripple-color variable to use --ion-item-background-activated it would look like this on press:

But if we only updated the --ripple-color to use the global theme variable, it looks like the following:

For this reason I will only be updating the --ripple-color to be based on the global theme variable. If you'd like to use the .activated class in your application please continue setting it by class or by updating the variable for --background-activated. You may also want to update --ripple-color to be transparent in this case though as it will look like a "flash" or a solid color depending on if you try it before or after my PR: https://codepen.io/brandyscarney/pen/axRgpK

[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.