fix(tabs): replace igx-icon with igc-icon in WC demo + fix theme parameters (#16395)

Author: adrianptrv

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -61,23 +61,23 @@
     %tabs-header {
         overflow: hidden;
         flex: 0 0 auto;
-        background: var-get($theme, 'item-background');
         z-index: 1;
 
-	    @if $bootstrap-theme {
-		    position: relative;
-
-		    &::after {
-			    content: '';
-			    position: absolute;
-			    bottom: 0;
-			    inset-inline-start: 0;
-			    width: 100%;
-			    height: rem(1px);
-			    background: var-get($theme, 'border-color');
-			    z-index: 0;
-		    }
-	    }
+        @if $bootstrap-theme {
+            position: relative;
+            background: var-get($theme, 'item-background');
+
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                inset-inline-start: 0;
+                width: 100%;
+                height: rem(1px);
+                background: var-get($theme, 'border-color');
+                z-index: 0;
+            }
+        }
     }
 
     %tabs-header-content {
@@ -204,6 +204,7 @@
         @if $not-bootstrap-theme {
             transition: all .3s $tabs-animation-function;
             border: rem(1px) solid var-get($theme, 'border-color');
+            border-radius: var-get($theme, 'border-radius');
 
             &:hover,
             &:focus {
@@ -240,7 +241,7 @@
         }
 
         &:focus {
-            background: var-get($theme, 'item-active-background');
+            background: var-get($theme, 'item-hover-background');
             color: var-get($theme, 'item-hover-color');
             border-bottom-color: transparent;
         }
@@ -268,14 +269,15 @@
     %tabs-header-item--selected {
         outline: 0;
         color: var-get($theme, 'item-active-color');
+        background: var-get($theme, 'item-active-background');
 
         &:hover,
         &:focus {
-            background: var-get($theme, 'item-active-background');
-            color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color'));
+            background: var-get($theme, 'item-active-hover-background');
+            color: var-get($theme, 'item-active-hover-color');
 
             igx-icon {
-                color: var-get($theme, 'item-active-icon-color');
+                color: var-get($theme, 'item-active-hover-icon-color');
             }
         }
 
@@ -284,7 +286,6 @@
         }
 
         @if $bootstrap-theme {
-            background: var-get($theme, 'item-active-background');
             position: relative;
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
             z-index: 1;
@@ -310,6 +311,16 @@
 
             &:hover {
                 box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+
+                &::before {
+                    background: linear-gradient(
+                            to right,
+                            var-get($theme, 'border-color') 1px,
+                            var-get($theme, 'item-active-hover-background') 1px,
+                            var-get($theme, 'item-active-hover-background') calc(100% - 1px),
+                            var-get($theme, 'border-color') calc(100% - 1px)
+                    );								
+                }
             }
         }
 
@@ -318,21 +329,15 @@
                 font-weight: 600;
             }
         }
-
-        @if $indigo-theme {
-            &:hover,
-            &:focus-within {
-                background: var-get($theme, 'item-hover-background');
-            }
-        }
     }
 
     %tabs-header-item:focus,
     %tabs-header-item--selected:focus {
         @if $bootstrap-theme {
             border: none;
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
-            border-radius: rem(4px);
+            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color');
+            border-bottom-left-radius: rem(4px);
+            border-bottom-right-radius: rem(4px);
             z-index: 1;
 
             &::after {

src/app/tabs-showcase/tabs-showcase.sample.html

@@ -32,7 +32,7 @@
             @for (contact of contacts; track contact.id) {
                 <igc-tab [selected]="contact.id === selectedTabId">
                     @if(!properties.hideIcon) {
-                        <igx-icon slot="label">folder</igx-icon>
+                        <igc-icon name="folder" slot="label"></igc-icon>
                     }
                     @if(!properties.hideText) {
                     <span slot="label">{{ contact.text }}</span>

src/app/tabs-showcase/tabs-showcase.sample.ts

@@ -20,13 +20,20 @@ import {
     defineComponents,
     IgcTabsComponent,
     IgcTabComponent,
+    IgcIconComponent,
+    registerIconFromText
 } from 'igniteui-webcomponents';
 import {
     PropertyChangeService,
     Properties,
 } from '../properties-panel/property-change.service';
 
-defineComponents(IgcTabsComponent, IgcTabComponent);
+defineComponents(IgcTabsComponent, IgcTabComponent, IgcIconComponent);
+
+registerIconFromText(
+    'folder',
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z"/></svg>'
+);
 
 @Component({
     selector: 'app-tabs-showcase-sample',