From dfa493d2ab132e9fd4e3d42cca26158fee979b79 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 23 Jul 2026 12:28:34 +0300 Subject: [PATCH 1/4] feat(chip): add chip outlined --- .../chips/src/chips/chip.component.ts | 13 + .../chips/src/chips/chip.spec.ts | 12 + .../components/chip/_chip-component.scss | 4 + .../styles/components/chip/_chip-theme.scss | 401 ++++++++++++++++-- 4 files changed, 383 insertions(+), 47 deletions(-) diff --git a/projects/igniteui-angular/chips/src/chips/chip.component.ts b/projects/igniteui-angular/chips/src/chips/chip.component.ts index fe5f2996585..6d24b1524fb 100644 --- a/projects/igniteui-angular/chips/src/chips/chip.component.ts +++ b/projects/igniteui-angular/chips/src/chips/chip.component.ts @@ -224,6 +224,19 @@ export class IgxChipComponent implements OnInit, OnDestroy { @Input() public removeIcon: TemplateRef; + /** + * Sets/gets whether the badge is outlined. + * Default value is `false`. + * + * @example + * ```html + * + * ``` + */ + @Input({transform: booleanAttribute}) + @HostBinding('class.igx-chip--outlined') + public outlined = false; + /** * Defines if the chip can be selected on click or through navigation, * By default it is set to false. diff --git a/projects/igniteui-angular/chips/src/chips/chip.spec.ts b/projects/igniteui-angular/chips/src/chips/chip.spec.ts index 9ca449c35ca..1bb4c280925 100644 --- a/projects/igniteui-angular/chips/src/chips/chip.spec.ts +++ b/projects/igniteui-angular/chips/src/chips/chip.spec.ts @@ -153,6 +153,18 @@ describe('IgxChip', () => { expect(igxChip.nativeElement).toHaveClass('igx-chip--danger'); }); + it('should apply igx-chip--outlined class when outlined is set to true', () => { + const fixture = TestBed.createComponent(IgxChipComponent); + const igxChip = fixture.componentInstance; + igxChip.id = 'root-outlined'; + + igxChip.outlined = true; + fixture.detectChanges(); + + expect(igxChip.outlined).toBeTrue(); + expect(igxChip.nativeElement).toHaveClass('igx-chip--outlined'); + }); + it('should set text in chips correctly', () => { const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent)); const firstChipTextElement = chipElements[0].queryAllNodes(By.css(`.${CHIP_TEXT_CLASS}`)); diff --git a/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-component.scss b/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-component.scss index 1d918fa999f..99aedef02fa 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-component.scss @@ -35,6 +35,10 @@ @extend %igx-chip__item--selected !optional; } + @include m(outlined) { + @extend %igx-chip--outlined !optional; + } + @include m(primary) { @extend %igx-chip--primary !optional; diff --git a/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss index 9c6e29cbaf3..1e34db952d9 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss @@ -22,15 +22,15 @@ $box-shadow-focus: map.get(( 'material': null, 'fluent': null, - 'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'), - 'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color') + 'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-shadow-color'), + 'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-shadow-color') ), $variant); $box-shadow-focus-selected: map.get(( 'material': null, 'fluent': null, - 'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color'), - 'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color') + 'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-shadow-color'), + 'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-shadow-color') ), $variant); $border-size: rem(1px); @@ -73,14 +73,12 @@ outline-style: none; color: var-get($theme, 'focus-text-color'); background: var-get($theme, 'focus-background'); - border-color: var-get($theme, 'focus-border-color'); box-shadow: $box-shadow-focus; } %igx-chip__item--selected { color: var-get($theme, 'focus-selected-text-color'); background: var-get($theme, 'focus-selected-background'); - border-color: var-get($theme, 'focus-selected-border-color'); box-shadow: $box-shadow-focus-selected; } } @@ -89,13 +87,11 @@ %igx-chip__item { color: var-get($theme, 'hover-text-color'); background: var-get($theme, 'hover-background'); - border-color: var-get($theme, 'hover-border-color'); } %igx-chip__item--selected { color: var-get($theme, 'hover-selected-text-color'); background: var-get($theme, 'hover-selected-background'); - border-color: var-get($theme, 'hover-selected-border-color'); } } } @@ -118,7 +114,6 @@ color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); - border: $border-size solid var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); user-select: none; overflow: hidden; @@ -165,10 +160,51 @@ } } + %igx-chip--outlined { + %igx-chip__item { + background: var-get($theme, 'outlined-background'); + color: var-get($theme, 'outlined-text-color'); + border: $border-size solid var-get($theme, 'border-color'); + } + + %igx-chip__item--selected { + background: var-get($theme, 'selected-outlined-background'); + color: var-get($theme, 'selected-outlined-text-color'); + border: $border-size solid var-get($theme, 'selected-border-color'); + } + + &:focus { + %igx-chip__item { + color: var-get($theme, 'focus-outlined-text-color'); + background: var-get($theme, 'focus-outlined-background'); + border: $border-size solid var-get($theme, 'focus-border-color'); + } + + %igx-chip__item--selected { + color: var-get($theme, 'focus-selected-outlined-text-color'); + background: var-get($theme, 'focus-selected-outlined-background'); + border: $border-size solid var-get($theme, 'focus-selected-border-color'); + } + } + + &:hover { + %igx-chip__item { + color: var-get($theme, 'hover-outlined-text-color'); + background: var-get($theme, 'hover-outlined-background'); + border: $border-size solid var-get($theme, 'hover-border-color'); + } + + %igx-chip__item--selected { + color: var-get($theme, 'hover-selected-outlined-text-color'); + background: var-get($theme, 'hover-selected-outlined-background'); + border: $border-size solid var-get($theme, 'hover-selected-border-color'); + } + } + } + %igx-chip__item--selected { color: var-get($theme, 'selected-text-color'); background: var-get($theme, 'selected-background'); - border-color: var-get($theme, 'selected-border-color'); } %igx-chip__item--primary { @@ -178,7 +214,6 @@ color: contrast-color($color: 'primary', $variant: 500); } background: color($color: 'primary', $variant: 500); - border-color: color($color: 'primary', $variant: 500); } %igx-chip%igx-chip--primary { @@ -187,19 +222,16 @@ @if $variant != 'bootstrap' and $variant != 'indigo' { color: contrast-color($color: 'primary', $variant: 800); background: color($color: 'primary', $variant: 800); - border-color: color($color: 'primary', $variant: 800); } @if $variant == "bootstrap" { color: contrast-color($color: 'primary', $variant: 500); background: color($color: 'primary', $variant: 500); - border-color: color($color: 'primary', $variant: 500); } @if $variant == 'indigo' { color: contrast-color($color: 'primary', $variant: 900); background: color($color: 'primary', $variant: 500); - border-color: color($color: 'primary', $variant: 500); box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 400, $opacity: .5); } @@ -214,11 +246,60 @@ @if $variant == 'indigo' { color: contrast-color($color: 'primary', $variant: 900); background: color($color: 'primary', $variant: 400); - border-color: color($color: 'primary', $variant: 400); } @else { color: contrast-color($color: 'primary', $variant: 600); background: color($color: 'primary', $variant: 600); - border-color: color($color: 'primary', $variant: 600); + } + } + } + + &%igx-chip--outlined { + %igx-chip__item { + background: transparent; + color: contrast-color($color: 'primary', $variant: if($theme-variant == 'light', 100, 600)); + + @if $variant == 'indigo' { + color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'primary', $variant: 900)); + border-color: color($color: 'primary', $variant: 400); + } @else if $variant == 'bootstrap' { + border-color: color($color: 'primary', $variant: if($theme-variant == 'light', 600, 300)); + } @else if $variant == 'fluent' { + border-color: color($color: 'primary', $variant: if($theme-variant == 'light', 600, 200)); + } @else if $variant == 'material' { + border-color: color($color: 'primary', $variant: if($theme-variant == 'light', 800, 200)); + color: contrast-color($color: 'primary', $variant: if($theme-variant == 'light', 100, 900)); + } + } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + background: color($color: 'primary', $variant: 400, $opacity: .30); + } @else if $variant == 'bootstrap' { + background: color($color: 'primary', $variant: 600, $opacity: .30); + } @else if $variant == 'fluent' { + background: color($color: 'primary', $variant: 600, $opacity: if($theme-variant == 'light', .16, .20)); + } @else if $variant == 'material' { + background: color($color: 'primary', $variant: 600, $opacity: .16); + } + } + } + + &:focus { + %igx-chip__item { + @if $variant == 'fluent' { + background: color($color: 'primary', $variant: 800, $opacity: if($theme-variant == 'light', .30, .50)); + } @else if $variant == 'material' { + background: color($color: 'primary', $variant: 800, $opacity: .30); + } + } + } + + &%igx-chip--disabled { + %igx-chip__item { + @if $variant == 'indigo' { + border-color: color($color: 'primary', $variant: 400); + } } } } @@ -227,7 +308,6 @@ %igx-chip__item--info { color: contrast-color($color: 'info', $variant: 500); background: color($color: 'info', $variant: 500); - border-color: color($color: 'info', $variant: 500); } %igx-chip%igx-chip--info { @@ -235,12 +315,10 @@ %igx-chip__item { color: contrast-color($color: 'info', $variant: 800); background: color($color: 'info', $variant: 800); - border-color: color($color: 'info', $variant: 800); @if $variant == 'indigo' or $variant == 'bootstrap' { color: contrast-color($color: 'info', $variant: 500); background: color($color: 'info', $variant: 500); - border-color: color($color: 'info', $variant: 500); } @if $variant == 'indigo' { @@ -258,11 +336,61 @@ @if $variant == 'indigo' { color: contrast-color($color: 'info', $variant: 400); background: color($color: 'info', $variant: 400); - border-color: color($color: 'info', $variant: 400); } @else { color: contrast-color($color: 'info', $variant: 600); background: color($color: 'info', $variant: 600); - border-color: color($color: 'info', $variant: 600); + } + } + } + + &%igx-chip--outlined { + %igx-chip__item { + background: transparent; + + @if $variant == 'indigo' { + color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'info', $variant: 900)); + border-color: color($color: 'info', $variant: if($theme-variant == 'light', 500, 300)); + } @else if $variant == 'bootstrap' { + border-color: color($color: 'info', $variant: if($theme-variant == 'light', 900, 600)); + color: if($theme-variant == 'light', contrast-color($color: 'info', $variant: 900), contrast-color($color: 'gray', $variant: 100)); + } @else if $variant == 'fluent' { + border-color: color($color: 'info', $variant: if($theme-variant == 'light', 600, 200)); + color: contrast-color($color: 'info', $variant: if($theme-variant == 'light', 100, 500)); + } @else if $variant == 'material' { + border-color: color($color: 'info', $variant: if($theme-variant == 'light', 800, 200)); + color: contrast-color($color: 'info', $variant: if($theme-variant == 'light', 100, 500)); + } + } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + background: color($color: 'info', $variant: 400, $opacity: .30); + } @else if $variant == 'bootstrap' { + background: color($color: 'info', $variant: 600, $opacity: .30); + } @else if $variant == 'fluent' { + background: color($color: 'info', $variant: 600, $opacity: if($theme-variant == 'light', .16, .20)); + } @else if $variant == 'material' { + background: color($color: 'info', $variant: 600, $opacity: .16); + } + } + } + + &:focus { + %igx-chip__item { + @if $variant == 'fluent' { + background: color($color: 'info', $variant: 800, $opacity: if($theme-variant == 'light', .30, .50)); + } @else if $variant == 'material' { + background: color($color: 'info', $variant: 800, $opacity: .30); + } + } + } + + &%igx-chip--disabled { + %igx-chip__item { + @if $variant == 'indigo' { + border-color: color($color: 'info', $variant: if($theme-variant == 'light', 500, 300)); + } } } } @@ -275,7 +403,6 @@ color: contrast-color($color: 'success', $variant: if($variant == 'indigo', 900, 500)); } background: color($color: 'success', $variant: if($variant == 'indigo', 800, 500)); - border-color: color($color: 'success', $variant: if($variant == 'indigo', 800, 500)); } %igx-chip%igx-chip--success { @@ -283,14 +410,12 @@ %igx-chip__item { color: contrast-color($color: 'success', $variant: 800); background: color($color: 'success', $variant: 800); - border-color: color($color: 'success', $variant: 800); @if $variant == 'indigo' { box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 900)); } @if $variant == 'bootstrap' { - border-color: color($color: 'success', $variant: 500); background: color($color: 'success', $variant: 500); color: contrast-color($color: 'success', $variant: 600); box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38); @@ -303,11 +428,60 @@ @if $variant == 'indigo' { color: contrast-color($color: 'success', $variant: 900); background: color($color: 'success', $variant: 700); - border-color: color($color: 'success', $variant: 700); } @else { color: contrast-color($color: 'success', $variant: 600); background: color($color: 'success', $variant: 600); - border-color: color($color: 'success', $variant: 600); + } + } + } + + &%igx-chip--outlined { + %igx-chip__item { + background: transparent; + color: contrast-color($color: 'success', $variant: if($theme-variant == 'light', 100, 600)); + + @if $variant == 'indigo' { + color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'success', $variant: 900)); + border-color: color($color: 'success', $variant: if($theme-variant == 'light', 700, 500)); + } @else if $variant == 'bootstrap' { + border-color: color($color: 'success', $variant: if($theme-variant == 'light', 600, 200)); + } @else if $variant == 'fluent' { + border-color: color($color: 'success', $variant: if($theme-variant == 'light', 600, 100)); + } @else if $variant == 'material' { + border-color: color($color: 'success', $variant: if($theme-variant == 'light', 800, 300)); + color: contrast-color($color: 'success', $variant: if($theme-variant == 'light', 100, 900)); + } + } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + background: color($color: 'success', $variant: 700, $opacity: .30); + } @else if $variant == 'bootstrap' { + background: color($color: 'success', $variant: 600, $opacity: .30); + } @else if $variant == 'fluent' { + background: color($color: 'success', $variant: 600, $opacity: if($theme-variant == 'light', .16, .20)); + } @else if $variant == 'material' { + background: color($color: 'success', $variant: 600, $opacity: .16); + } + } + } + + &:focus { + %igx-chip__item { + @if $variant == 'fluent' { + background: color($color: 'success', $variant: 800, $opacity: if($theme-variant == 'light', .30, .50)); + } @else if $variant == 'material' { + background: color($color: 'success', $variant: 800, $opacity: .30); + } + } + } + + &%igx-chip--disabled { + %igx-chip__item { + @if $variant == 'indigo' { + border-color: color($color: 'success', $variant: if($theme-variant == 'light', 700, 500)); + } } } } @@ -320,7 +494,6 @@ color: contrast-color($color: 'warn', $variant: 900); } background: color($color: 'warn', $variant: 500); - border-color: color($color: 'warn', $variant: 500); } %igx-chip%igx-chip--warning { @@ -328,11 +501,9 @@ %igx-chip__item { color: contrast-color($color: 'warn', $variant: 800); background: color($color: 'warn', $variant: 800); - border-color: color($color: 'warn', $variant: 800); @if $variant == 'indigo' or $variant == 'bootstrap' { background: color($color: 'warn', $variant: 500); - border-color: color($color: 'warn', $variant: 500); } @if $variant == 'indigo' { @@ -351,11 +522,60 @@ @if $variant == 'indigo' { color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50)); background: color($color: 'warn', $variant: 400); - border-color: color($color: 'warn', $variant: 400); } @else { color: contrast-color($color: 'warn', $variant: 600); background: color($color: 'warn', $variant: 600); - border-color: color($color: 'warn', $variant: 600); + } + } + } + + &%igx-chip--outlined { + %igx-chip__item { + background: transparent; + color: if($theme-variant == 'light', contrast-color($color: 'warn', $variant: 900), contrast-color($color: 'gray', $variant: 100)); + + @if $variant == 'indigo' { + color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'warn', $variant: 900)); + border-color: color($color: 'warn', $variant: if($theme-variant == 'light', 600, 300)); + } @else if $variant == 'bootstrap' { + border-color: color($color: 'warn', $variant: if($theme-variant == 'light', 900, 500)); + } @else if $variant == 'fluent' { + border-color: color($color: 'warn', $variant: if($theme-variant == 'light', 600, 200)); + color: contrast-color($color: 'warn', $variant: if($theme-variant == 'light', 100, 500)); + } @else if $variant == 'material' { + border-color: color($color: 'warn', $variant: if($theme-variant == 'light', 800, 300)); + } + } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + background: color($color: 'warn', $variant: 400, $opacity: .30); + } @else if $variant == 'bootstrap' { + background: color($color: 'warn', $variant: 600, $opacity: .30); + } @else if $variant == 'fluent' { + background: color($color: 'warn', $variant: 600, $opacity: if($theme-variant == 'light', .16, .20)); + } @else if $variant == 'material' { + background: color($color: 'warn', $variant: 600, $opacity: .16); + } + } + } + + &:focus { + %igx-chip__item { + @if $variant == 'fluent' { + background: color($color: 'warn', $variant: 800, $opacity: if($theme-variant == 'light', .30, .50)); + } @else if $variant == 'material' { + background: color($color: 'warn', $variant: 800, $opacity: .30); + } + } + } + + &%igx-chip--disabled { + %igx-chip__item { + @if $variant == 'indigo' { + border-color: color($color: 'warn', $variant: if($theme-variant == 'light', 600, 300)); + } } } } @@ -368,7 +588,6 @@ color: contrast-color($color: 'error', $variant: if($variant == 'indigo', 900, 500)); } background: color($color: 'error', $variant: if($variant == 'indigo', 600, 500)); - border-color: color($color: 'error', $variant: if($variant == 'indigo', 600, 500)); } %igx-chip%igx-chip--danger { @@ -376,17 +595,14 @@ %igx-chip__item { color: contrast-color($color: 'error', $variant: 800); background: color($color: 'error', $variant: 800); - border-color: color($color: 'error', $variant: 800); @if $variant == 'indigo' { - border-color: color($color: 'error', $variant: 600); background: color($color: 'error', $variant: 600); color: contrast-color($color: 'error', $variant: 900); box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900)); } @if $variant == 'bootstrap' { - border-color: color($color: 'error', $variant: 500); background: color($color: 'error', $variant: 500); color: contrast-color($color: 'error', $variant: 600); box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38); @@ -399,11 +615,61 @@ @if $variant == 'indigo' { color: contrast-color($color: 'error', $variant: 900); background: color($color: 'error', $variant: 500); - border-color: color($color: 'error', $variant: 500); } @else { color: contrast-color($color: 'error', $variant: 600); background: color($color: 'error', $variant: 600); - border-color: color($color: 'error', $variant: 600); + } + } + } + + &%igx-chip--outlined { + %igx-chip__item { + background: transparent; + color: contrast-color($color: 'error', $variant: if($theme-variant == 'light', 100, 600)); + + @if $variant == 'indigo' { + color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'error', $variant: 900)); + background: transparent; + border-color: color($color: 'error', $variant: if($theme-variant == 'light', 500, 400)); + } @else if $variant == 'bootstrap' { + border-color: color($color: 'error', $variant: if($theme-variant == 'light', 600, 400)); + } @else if $variant == 'fluent' { + border-color: color($color: 'error', $variant: if($theme-variant == 'light', 600, 50)); + } @else if $variant == 'material' { + border-color: color($color: 'error', $variant: if($theme-variant == 'light', 800, 300)); + color: contrast-color($color: 'error', $variant: if($theme-variant == 'light', 100, 900)); + } + } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + background: color($color: 'error', $variant: 500, $opacity: .30); + } @else if $variant == 'bootstrap' { + background: color($color: 'error', $variant: 600, $opacity: .30); + } @else if $variant == 'fluent' { + background: color($color: 'error', $variant: 600, $opacity: if($theme-variant == 'light', .16, .20)); + } @else if $variant == 'material' { + background: color($color: 'error', $variant: 600, $opacity: .16); + } + } + } + + &:focus { + %igx-chip__item { + @if $variant == 'fluent' { + background: color($color: 'error', $variant: 800, $opacity: if($theme-variant == 'light', .30, .50)); + } @else if $variant == 'material' { + background: color($color: 'error', $variant: 800, $opacity: .30); + } + } + } + + &%igx-chip--disabled { + %igx-chip__item { + @if $variant == 'indigo' { + border-color: color($color: 'error', $variant: if($theme-variant == 'light', 500, 400)); + } } } } @@ -567,20 +833,35 @@ %igx-chip__item--disabled { color: var-get($theme, 'disabled-text-color'); background: var-get($theme, 'disabled-background'); - border-color: var-get($theme, 'disabled-border-color'); } %igx-chip--disabled { cursor: default; pointer-events: none; - @if $variant == 'indigo' { + %igx-chip__item--selected { + background: var-get($theme, 'disabled-selected-background'); + color: var-get($theme, 'disabled-selected-text-color'); + @if $variant == 'indigo' { + opacity: .4; + } + } + + &%igx-chip--outlined { + %igx-chip__item { + background: var-get($theme, 'disabled-outlined-background'); + color: var-get($theme, 'disabled-outlined-text-color'); + border: $border-size solid var-get($theme, 'disabled-border-color'); + } + %igx-chip__item--selected { - background: color($color: 'primary', $variant: 400, $opacity: .5); - border-color: transparent; - color: contrast-color($color: 'primary', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); + background: var-get($theme, 'disabled-selected-outlined-background'); + color: var-get($theme, 'disabled-selected-outlined-text-color'); + border: $border-size solid var-get($theme, 'disabled-selected-border-color'); } + } + @if $variant == 'indigo' { &%igx-chip--primary { %igx-chip__item { @if $theme-variant == 'light' { @@ -590,7 +871,6 @@ } background: color($color: 'primary', $variant: 400, $opacity: .5); - border-color: transparent; /* stylelint-enable max-nesting-depth */ } } @@ -599,7 +879,6 @@ %igx-chip__item { color: contrast-color($color: 'info', $variant: 900); background: color($color: 'info', $variant: 500); - border-color: color($color: 'info', $variant: 500); } } @@ -607,7 +886,6 @@ %igx-chip__item { color: contrast-color($color: 'success', $variant: 900); background: color($color: 'success', $variant: 800); - border-color: color($color: 'success', $variant: 800); } } @@ -615,7 +893,6 @@ %igx-chip__item { color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50)); background: color($color: 'warn', $variant: 500); - border-color: color($color: 'warn', $variant: 500); } } @@ -623,7 +900,6 @@ %igx-chip__item { color: contrast-color($color: 'error', $variant: 900); background: color($color: 'error', $variant: 600); - border-color: color($color: 'error', $variant: 600); } } @@ -635,6 +911,37 @@ opacity: .4; } } + } @else { + &%igx-chip--primary, + &%igx-chip--info, + &%igx-chip--success, + &%igx-chip--warning, + &%igx-chip--danger { + %igx-chip__item { + background: color($color: 'gray', $variant: 200); + color: color($color: 'gray', $variant: 500); + } + } + } + + &%igx-chip--outlined { + &%igx-chip--primary, + &%igx-chip--info, + &%igx-chip--success, + &%igx-chip--warning, + &%igx-chip--danger { + %igx-chip__item { + background: color($color: 'gray', $variant: 200, $opacity: .30); + color: color($color: 'gray', $variant: 500); + border-color: color($color: 'gray', $variant: 500, $opacity: .30); + + @if $variant == 'indigo' { + color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'error', $variant: 900)); + background: transparent; + opacity: .4; + } + } + } } %igx-chip__end { From d4a0fab6143711ca22c0961c9c9fd8701d3669c0 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 23 Jul 2026 12:57:23 +0300 Subject: [PATCH 2/4] chore(chip): small improvements --- .../igniteui-angular/chips/src/chips/chip.component.ts | 2 +- .../src/core/styles/components/chip/_chip-theme.scss | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/chips/src/chips/chip.component.ts b/projects/igniteui-angular/chips/src/chips/chip.component.ts index 6d24b1524fb..2e3f042e422 100644 --- a/projects/igniteui-angular/chips/src/chips/chip.component.ts +++ b/projects/igniteui-angular/chips/src/chips/chip.component.ts @@ -225,7 +225,7 @@ export class IgxChipComponent implements OnInit, OnDestroy { public removeIcon: TemplateRef; /** - * Sets/gets whether the badge is outlined. + * Sets/gets whether the chip is outlined. * Default value is `false`. * * @example diff --git a/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss index 1e34db952d9..7f829a6a679 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss @@ -166,7 +166,7 @@ color: var-get($theme, 'outlined-text-color'); border: $border-size solid var-get($theme, 'border-color'); } - + %igx-chip__item--selected { background: var-get($theme, 'selected-outlined-background'); color: var-get($theme, 'selected-outlined-text-color'); @@ -270,7 +270,7 @@ color: contrast-color($color: 'primary', $variant: if($theme-variant == 'light', 100, 900)); } } - + &:hover { %igx-chip__item { @if $variant == 'indigo' { @@ -294,7 +294,7 @@ } } } - + &%igx-chip--disabled { %igx-chip__item { @if $variant == 'indigo' { @@ -346,7 +346,7 @@ &%igx-chip--outlined { %igx-chip__item { background: transparent; - + @if $variant == 'indigo' { color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'info', $variant: 900)); border-color: color($color: 'info', $variant: if($theme-variant == 'light', 500, 300)); @@ -853,7 +853,7 @@ color: var-get($theme, 'disabled-outlined-text-color'); border: $border-size solid var-get($theme, 'disabled-border-color'); } - + %igx-chip__item--selected { background: var-get($theme, 'disabled-selected-outlined-background'); color: var-get($theme, 'disabled-selected-outlined-text-color'); From d9480ac068763c10040559aeae29c2e362e6a575 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 23 Jul 2026 15:54:40 +0300 Subject: [PATCH 3/4] feat(chip): add new ourlined chip to the sample so its easy for testing --- src/app/chips/chips.sample.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/app/chips/chips.sample.html b/src/app/chips/chips.sample.html index d5ed36f4293..27d84c01ecd 100644 --- a/src/app/chips/chips.sample.html +++ b/src/app/chips/chips.sample.html @@ -33,6 +33,38 @@
Angular Chip
> } Chip component + + @if (hasAvatar) { + + } @if (hasPrefix) { + face + } @if (hasSuffix) { + face + } @if (hasProgressbar) { + + } Chip component +
WC Chip
Date: Fri, 24 Jul 2026 09:35:36 +0300 Subject: [PATCH 4/4] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/app/chips/chips.sample.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app/chips/chips.sample.html b/src/app/chips/chips.sample.html index 27d84c01ecd..ac27131a891 100644 --- a/src/app/chips/chips.sample.html +++ b/src/app/chips/chips.sample.html @@ -34,18 +34,18 @@
Angular Chip
} Chip component + #outlinedChip + [variant]="properties.variant" + [igSize]="properties.size" + [disabled]="properties.disabled" + [selectable]="properties.selectable" + [removable]="properties.removable" + [selected]="properties.selected" + [removeIcon]="customIcons ? myRemoveIcon : null" + [selectIcon]="customIcons ? mySelectIcon : null" + (remove)="removeChip(outlinedChip)" + outlined + > @if (hasAvatar) {