From a6cbc7c61fb14b3a49ec292915f71cea312ae90c Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 29 Oct 2025 13:05:10 +0200 Subject: [PATCH 1/5] fix(tabs): change icon in WC demo to be igc-icon, instead of igx-icon --- src/app/tabs-showcase/tabs-showcase.sample.html | 2 +- src/app/tabs-showcase/tabs-showcase.sample.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html index f90f445539c..bd9df358a8a 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.html +++ b/src/app/tabs-showcase/tabs-showcase.sample.html @@ -32,7 +32,7 @@ @for (contact of contacts; track contact.id) { @if(!properties.hideIcon) { - folder + } @if(!properties.hideText) { {{ contact.text }} diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts index b271789cfb2..fcf308b106f 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.ts +++ b/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', + '' +); @Component({ selector: 'app-tabs-showcase-sample', From bdd6bb12cef2f4cdca895a080241f833c45a1db7 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 3 Nov 2025 00:44:03 +0200 Subject: [PATCH 2/5] fix(tabs): material border-radius not working + move background from tabs header to tab items --- .../styles/components/tabs/_tabs-theme.scss | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index cf817cbca0c..5bb8af8941c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/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 { From e5867ac6b9c538c14321c53ee1fa8ca7b231d6f9 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 3 Nov 2025 01:19:45 +0200 Subject: [PATCH 3/5] chore(tabs): formatting --- .../styles/components/tabs/_tabs-theme.scss | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 5bb8af8941c..eb84d4000a1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -63,21 +63,21 @@ flex: 0 0 auto; z-index: 1; - @if $bootstrap-theme { - position: relative; - background: var-get($theme, 'item-background'); + @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; - } - } + &::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 { From 77122a3e714051d5ba7a96fb0e9d8d85751064c0 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 10 Nov 2025 19:32:49 +0200 Subject: [PATCH 4/5] feat(tabs): set up the newly added 'active' theme parameters --- .../styles/components/tabs/_tabs-theme.scss | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index eb84d4000a1..59ed7f21179 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -241,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; } @@ -269,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'); } } @@ -285,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; @@ -311,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) + ); + } } } @@ -319,21 +329,17 @@ 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-top-left-radius: var-get($theme, 'border-radius'); + border-top-right-radius: var-get($theme, 'border-radius'); + border-bottom-left-radius: rem(4px); + border-bottom-right-radius: rem(4px); z-index: 1; &::after { From b62b2ed39b28559289decd0885c3348e5443a667 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 11 Nov 2025 23:33:08 +0200 Subject: [PATCH 5/5] chore(tabs): remove unnecessary code --- .../src/lib/core/styles/components/tabs/_tabs-theme.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 59ed7f21179..22f3814dbeb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -336,8 +336,6 @@ @if $bootstrap-theme { border: none; box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color'); - border-top-left-radius: var-get($theme, 'border-radius'); - border-top-right-radius: var-get($theme, 'border-radius'); border-bottom-left-radius: rem(4px); border-bottom-right-radius: rem(4px); z-index: 1;