From f01baefaa959386b5d98eab0f4d6cc1c387db678 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 20 Apr 2026 12:33:27 +0300 Subject: [PATCH 1/2] feat(chips-area): add separate theme + grid sample and chips-area changes --- .../igniteui-angular/chips/src/chips/chip.spec.ts | 2 +- .../{ => chips-area}/chips-area.component.html | 0 .../chips/chips-area/chips-area.component.scss | 2 ++ .../{ => chips-area}/chips-area.component.ts | 8 +++++--- .../src/chips/{ => chips-area}/chips-area.spec.ts | 2 +- .../chips/src/chips/chips-area/themes/_base.scss | 15 +++++++++++++++ .../chips/chips-area/themes/shared/_index.scss | 1 + .../chips/chips-area/themes/shared/_indigo.scss | 7 +++++++ .../chips/src/chips/public_api.ts | 4 ++-- .../chips/src/chips/themes/_base.scss | 12 ------------ .../chips/src/chips/themes/shared/_indigo.scss | 5 ----- projects/igniteui-angular/grids/themes/_base.scss | 10 +++------- src/app/grid-auto-size/grid-auto-size.sample.scss | 5 +++++ 13 files changed, 42 insertions(+), 31 deletions(-) rename projects/igniteui-angular/chips/src/chips/{ => chips-area}/chips-area.component.html (100%) create mode 100644 projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.scss rename projects/igniteui-angular/chips/src/chips/{ => chips-area}/chips-area.component.ts (98%) rename projects/igniteui-angular/chips/src/chips/{ => chips-area}/chips-area.spec.ts (99%) create mode 100644 projects/igniteui-angular/chips/src/chips/chips-area/themes/_base.scss create mode 100644 projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/chips/src/chips/chip.spec.ts b/projects/igniteui-angular/chips/src/chips/chip.spec.ts index b7c54bf7951..de959e2025f 100644 --- a/projects/igniteui-angular/chips/src/chips/chip.spec.ts +++ b/projects/igniteui-angular/chips/src/chips/chip.spec.ts @@ -2,7 +2,7 @@ import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, injec import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxChipComponent } from './chip.component'; -import { IgxChipsAreaComponent } from './chips-area.component'; +import { IgxChipsAreaComponent } from './chips-area/chips-area.component'; import { IgxPrefixDirective } from '../../../input-group/src/public_api'; import { IgxLabelDirective } from '../../../input-group/src/public_api'; import { IgxSuffixDirective } from '../../../input-group/src/public_api'; diff --git a/projects/igniteui-angular/chips/src/chips/chips-area.component.html b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.html similarity index 100% rename from projects/igniteui-angular/chips/src/chips/chips-area.component.html rename to projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.html diff --git a/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.scss b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.scss new file mode 100644 index 00000000000..90f3e918416 --- /dev/null +++ b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.scss @@ -0,0 +1,2 @@ +@use 'themes/base'; +@use 'themes/shared'; \ No newline at end of file diff --git a/projects/igniteui-angular/chips/src/chips/chips-area.component.ts b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts similarity index 98% rename from projects/igniteui-angular/chips/src/chips/chips-area.component.ts rename to projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts index 1146c073d6c..fb6733b71ab 100644 --- a/projects/igniteui-angular/chips/src/chips/chips-area.component.ts +++ b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts @@ -1,11 +1,11 @@ -import { Component, ContentChildren, ChangeDetectorRef, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, Output, QueryList, DoCheck, AfterViewInit, OnDestroy, ElementRef, inject } from '@angular/core'; +import { Component, ContentChildren, ChangeDetectorRef, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, Output, QueryList, DoCheck, AfterViewInit, OnDestroy, ElementRef, inject, ViewEncapsulation } from '@angular/core'; import { IgxChipComponent, IChipSelectEventArgs, IChipKeyDownEventArgs, IChipEnterDragAreaEventArgs, IBaseChipEventArgs -} from './chip.component'; +} from '../chip.component'; import { IDropBaseEventArgs, IDragBaseEventArgs } from 'igniteui-angular/directives'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -48,7 +48,9 @@ export interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs { @Component({ selector: 'igx-chips-area', templateUrl: 'chips-area.component.html', - standalone: true + styleUrl: 'chips-area.component.css', + encapsulation: ViewEncapsulation.None, + standalone: true, }) export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy { public cdr = inject(ChangeDetectorRef); diff --git a/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.spec.ts similarity index 99% rename from projects/igniteui-angular/chips/src/chips/chips-area.spec.ts rename to projects/igniteui-angular/chips/src/chips/chips-area/chips-area.spec.ts index 75cd1090f56..c951cbd5231 100644 --- a/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts +++ b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.spec.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, inject } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { IgxChipComponent } from './chip.component'; +import { IgxChipComponent } from '../chip.component'; import { IgxChipsAreaComponent } from './chips-area.component'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; diff --git a/projects/igniteui-angular/chips/src/chips/chips-area/themes/_base.scss b/projects/igniteui-angular/chips/src/chips/chips-area/themes/_base.scss new file mode 100644 index 00000000000..1d5142eaf2c --- /dev/null +++ b/projects/igniteui-angular/chips/src/chips/chips-area/themes/_base.scss @@ -0,0 +1,15 @@ +@use 'styles/themes/standalone' as *; + +@include layer(base) { + @include b(igx-chip-area) { + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + width: 100%; + + &:empty { + display: none; + } + } +} diff --git a/projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_index.scss b/projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_index.scss new file mode 100644 index 00000000000..5d1e365b697 --- /dev/null +++ b/projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; \ No newline at end of file diff --git a/projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_indigo.scss b/projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_indigo.scss new file mode 100644 index 00000000000..89a6921f25b --- /dev/null +++ b/projects/igniteui-angular/chips/src/chips/chips-area/themes/shared/_indigo.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-chip-area, indigo) { + padding: rem(4px); + gap: rem(8px) +} \ No newline at end of file diff --git a/projects/igniteui-angular/chips/src/chips/public_api.ts b/projects/igniteui-angular/chips/src/chips/public_api.ts index c09118da6ae..80f3fa5405b 100644 --- a/projects/igniteui-angular/chips/src/chips/public_api.ts +++ b/projects/igniteui-angular/chips/src/chips/public_api.ts @@ -1,9 +1,9 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxChipComponent } from './chip.component'; -import { IgxChipsAreaComponent } from './chips-area.component'; +import { IgxChipsAreaComponent } from './chips-area/chips-area.component'; export * from './chip.component'; -export * from './chips-area.component'; +export * from './chips-area/chips-area.component'; /* NOTE: Chips directives collection for ease-of-use import in standalone components scenario */ export const IGX_CHIPS_DIRECTIVES = [ diff --git a/projects/igniteui-angular/chips/src/chips/themes/_base.scss b/projects/igniteui-angular/chips/src/chips/themes/_base.scss index 5ebe65b9460..76ad711bce8 100644 --- a/projects/igniteui-angular/chips/src/chips/themes/_base.scss +++ b/projects/igniteui-angular/chips/src/chips/themes/_base.scss @@ -20,18 +20,6 @@ $_theme: $material; } } - @include b(igx-chip-area) { - display: flex; - align-items: center; - justify-content: flex-start; - flex-wrap: wrap; - width: 100%; - - &:empty { - display: none; - } - } - @include b(igx-chip) { @include sizable(); diff --git a/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss b/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss index 8667dbb0432..48f1851a3e5 100644 --- a/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss @@ -175,8 +175,3 @@ $_theme: $indigo; } } } - -@include themed-block(igx-chip-area, indigo) { - padding: rem(4px); - gap: rem(8px) -} diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss index b75e407a7e8..141fb0e12c9 100644 --- a/projects/igniteui-angular/grids/themes/_base.scss +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -2061,9 +2061,9 @@ $z-grid-loading: 10003; outline-style: none; } - //%igx-chip { - // margin-block: pad-block(rem(4px), rem(8px), rem(8px)); - //} + .igx-chip { + margin-block: pad-block(rem(4px), rem(8px), rem(8px)); + } @include e(connector) { display: inline-flex; @@ -2081,10 +2081,6 @@ $z-grid-loading: 10003; transform: scaleX(-1); } } - - .igx-chip-area { - flex-grow: 1; - } } @include b(igx-grid-th) { diff --git a/src/app/grid-auto-size/grid-auto-size.sample.scss b/src/app/grid-auto-size/grid-auto-size.sample.scss index 83d9c69047e..0794b5d1d41 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.scss +++ b/src/app/grid-auto-size/grid-auto-size.sample.scss @@ -5,3 +5,8 @@ height: 100%; align-items: start; } + +button { + margin-inline-end: 0.5rem; + margin-block-end: 0.5rem; +} \ No newline at end of file From e5e0463d08391c272c446d786e845583cb2548e4 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 20 Apr 2026 12:38:03 +0300 Subject: [PATCH 2/2] chore(): fix spacings --- .../chips/src/chips/chips-area/chips-area.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts index fb6733b71ab..c4186cbac39 100644 --- a/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts +++ b/projects/igniteui-angular/chips/src/chips/chips-area/chips-area.component.ts @@ -48,8 +48,8 @@ export interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs { @Component({ selector: 'igx-chips-area', templateUrl: 'chips-area.component.html', - styleUrl: 'chips-area.component.css', - encapsulation: ViewEncapsulation.None, + styleUrl: 'chips-area.component.css', + encapsulation: ViewEncapsulation.None, standalone: true, }) export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy {