fix(list): focus styles (#15718)

* fix(list): focus styles

* refactor(list-sample): add panning option

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

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

@@ -425,7 +425,6 @@
         justify-content: center;
         border-radius: var-get($theme, 'item-border-radius');
         color: var-get($theme, 'item-text-color');
-        background: var-get($theme, 'item-background');
 
         @if $bootstrap-theme or $variant == 'fluent' {
             border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
@@ -436,9 +435,6 @@
         }
 
         &:hover {
-            color: var-get($theme, 'item-text-color-hover');
-            background: var-get($theme, 'item-background-hover');
-
             %igx-list__item-lines {
                 color: currentColor;
             }
@@ -544,9 +540,15 @@
         align-items: center;
         position: relative;
         border-radius: var-get($theme, 'item-border-radius');
-        background: inherit;
+        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,

src/app/list/list.sample.html

@@ -2,7 +2,17 @@
     <section class="sample-content" [igSize]="properties.size">
         <article class="sample-column">
             <h5 class="sample-title">Angular List</h5>
-            <igx-list>
+            <igx-list [allowLeftPanning]="properties.enablePanning" [allowRightPanning]="properties.enablePanning">
+                <ng-template igxListItemLeftPanning>
+                    <div class="pan pan--left">
+                        <igx-icon>delete</igx-icon>Delete
+                    </div>
+                </ng-template>
+                <ng-template igxListItemRightPanning>
+                    <div class="pan pan--right">
+                        <igx-icon>call</igx-icon>Dial
+                    </div>
+                </ng-template>
                 <igx-list-item [isHeader]="true" selected>Employees List</igx-list-item>
                 @for (employee of employeeItems; track employee) {
                     <igx-list-item [selected]="employee.selected">

src/app/list/list.sample.scss

@@ -1,3 +1,21 @@
 .sample-title {
     text-align: center;
 }
+
+.pan {
+    display: flex;
+    color: white;
+    width: 100%;
+    padding-left: 10px;
+    align-items: center;
+}
+
+.pan--left {
+    flex-direction: row-reverse;
+    background-color:orange;
+}
+
+.pan--right {
+    flex-direction: row;
+    background-color:limegreen;
+}

src/app/list/list.sample.ts

@@ -30,6 +30,8 @@ import {
     PropertyChangeService,
     PropertyPanelConfig,
 } from '../properties-panel/property-change.service';
+import { HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
+import Hammer from 'hammerjs';
 
 defineComponents(
     IgcListComponent,
@@ -79,15 +81,27 @@ interface Employee {
         IgxAvatarComponent,
         IgxButtonModule,
         IgxButtonDirective,
-        IgSizeDirective
+        IgSizeDirective,
+        HammerModule
+    ],
+    providers: [
+        {
+            provide: HAMMER_GESTURE_CONFIG,
+            useClass: class {
+                public overrides = {
+                    pan: { direction: Hammer.DIRECTION_HORIZONTAL }
+                }
+            }
+        }
     ]
 })
 export class ListSampleComponent {
     public panelConfig: PropertyPanelConfig = {
         size: {
             control: {
                 type: 'button-group',
-                options: ['small', 'medium', 'large']
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
             }
         },
         hideTitle: {
@@ -145,6 +159,13 @@ export class ListSampleComponent {
                 type: 'boolean',
                 defaultValue: false
             }
+        },
+        enablePanning: {
+            label: 'Item Panning',
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
         }
     }