Merge pull request #16566 from IgniteUI/sivanova/list-styling

fix(list): styling discrepancies

Author: ChronosSF

projects/igniteui-angular/core/src/core/styles/components/list/_list-theme.scss

@@ -69,7 +69,7 @@
         border-radius: var-get($theme, 'border-radius');
 
         @if $variant == 'bootstrap' {
-            border: rem(1px) solid var-get($theme, 'border-color');
+            border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
         }
 
         &:focus-visible {
@@ -137,43 +137,48 @@
         justify-content: center;
         border-radius: var-get($theme, 'item-border-radius');
         color: var-get($theme, 'item-text-color');
+        border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 
-        @if $bootstrap-theme or $variant == 'fluent' {
-            border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
-
-            &:last-of-type {
-                border-bottom: none;
-            }
+        &:last-of-type {
+            border-bottom: none;
         }
+    }
 
-        &:hover {
+    %igx-list-item-base:not(%igx-list-item-base--selected) {
+        &:hover,
+        &:focus-within {
             %igx-list__item-lines {
                 color: currentColor;
             }
 
-            %igx-list__item-line-title {
-                color: var-get($theme, 'item-title-color-hover');
-            }
+            %igx-list-item-content:not(%igx-list-item-content--active) {
+                color: var-get($theme, 'item-text-color-hover');
+                background: var-get($theme, 'item-background-hover');
 
-            %igx-list__item-line-subtitle {
-                color: var-get($theme, 'item-subtitle-color-hover');
-            }
+                %igx-list__item-line-title {
+                    color: var-get($theme, 'item-title-color-hover');
+                }
 
-            %igx-list__item-actions {
-                color: var-get($theme, 'item-action-color-hover');
+                %igx-list__item-line-subtitle {
+                    color: var-get($theme, 'item-subtitle-color-hover');
+                }
 
-                igx-icon,
-                igc-icon {
-                    color: var-get($theme, 'item-action-color-hover')
+                %igx-list__item-actions {
+                    color: var-get($theme, 'item-action-color-hover');
+
+                    igx-icon,
+                    igc-icon {
+                        color: var-get($theme, 'item-action-color-hover')
+                    }
                 }
-            }
 
-            %igx-list__item-thumbnail {
-                color: var-get($theme, 'item-thumbnail-color-hover');
+                %igx-list__item-thumbnail {
+                    color: var-get($theme, 'item-thumbnail-color-hover');
 
-                igx-icon,
-                igc-icon {
-                    color: var-get($theme, 'item-thumbnail-color-hover')
+                    igx-icon,
+                    igc-icon {
+                        color: var-get($theme, 'item-thumbnail-color-hover')
+                    }
                 }
             }
         }
@@ -256,12 +261,6 @@
         background: var-get($theme, 'item-background');
         z-index: 2;
         gap: if($variant == 'indigo', rem(8px), rem(16px));
-
-        &:hover,
-        &:focus-within {
-            color: var-get($theme, 'item-text-color-hover');
-            background: var-get($theme, 'item-background-hover');
-        }
     }
 
     %igx-list-header,
@@ -285,6 +284,11 @@
             --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
         }
 
+        igx-icon,
+        igc-icon {
+            color: var-get($theme, 'item-thumbnail-color');
+        }
+
         &:empty {
             display: none;
         }

src/app/list/list.sample.html

@@ -55,7 +55,7 @@ <h5 class="sample-title">WC List</h5>
                     <span>Employees List</span>
                 </igc-list-header>
                 @for(employee of employeeItems; track employee){
-                    <igc-list-item>
+                    <igc-list-item [selected]="employee.selected">
                         @if(properties.addAvatarThumbnail) {
                             <igc-avatar slot="start" [src]="employee.imageURL"></igc-avatar>
                         }
@@ -69,7 +69,7 @@ <h5 class="sample-title">WC List</h5>
                             <span slot="subtitle">{{employee.position}}</span>
                         }
                         @if(properties.addCheckboxAction) {
-                            <igc-checkbox slot="end"></igc-checkbox>
+                            <igc-checkbox slot="end" [checked]="employee.selected"></igc-checkbox>
                         }
                         @if(properties.addIconAction) {
                             <igc-icon slot="end" name="info"></igc-icon>