refactor(List): Adjusting the correct ripple position of the favorite icon

Author: IvanKitanov17

src/app/lists/list/list-item-selection/list-item-selection.component.html

@@ -21,4 +21,4 @@
                 (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
-</div>
+</div>

src/app/lists/list/list-item-selection/list-item-selection.component.scss

@@ -14,6 +14,7 @@
 
     igx-icon {
       cursor: pointer;
+      position: relative;
     }
 
     .search {

src/app/lists/list/list-sample-4/list-sample-4.component.html

@@ -25,4 +25,4 @@
                 (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
-</div>
+</div>

src/app/lists/list/list-sample-4/list-sample-4.component.scss

@@ -15,6 +15,7 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }
 
 .search {

src/app/lists/list/list-sample-7/list-sample-7.component.html

@@ -20,13 +20,12 @@
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
         <igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink"
             igxRippleTarget=".igx-list__item-content">
-            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
-                [igxRippleCentered]="true" (mousedown)="thumbnailMousedown($event)"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
-                [igxRippleCentered]="true" igxRippleTarget=".igx-list__item-actions"
-                (click)="toggleFavorite(contact, $event)" (mousedown)="mousedown($event)">star</igx-icon>
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
     <igx-toast #toast></igx-toast>

src/app/lists/list/list-sample-7/list-sample-7.component.scss

@@ -11,6 +11,7 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }
 
 .listItemLeftPanningStyle {

src/app/lists/list/list-sample-7/list-sample-7.component.ts

@@ -81,8 +81,4 @@ export class ListSample7Component implements OnInit {
     public mousedown(event: Event) {
         event.stopPropagation();
     }
-
-    public thumbnailMousedown(event: Event) {
-        event.stopPropagation();
-    }
 }

src/app/lists/list/list-sample-8/list-sample-8.component.html

@@ -2,8 +2,7 @@
     <igx-list>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
         <igx-list-item #item *ngFor="let contact of contacts">
-            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
-                [igxRippleCentered]="true"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"

src/app/lists/list/list-sample-8/list-sample-8.component.scss

@@ -19,4 +19,5 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }