From 5b40953aa40ba5ea0d7d08184e54974de4ff628f Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Fri, 7 Aug 2026 17:50:24 +0300 Subject: [PATCH] feat(): add chip outlined sample + other chip samples improvements --- live-editing/configs/ChipConfigGenerator.ts | 6 ++++ .../chip-area-sample.component.scss | 2 +- .../chip-outlined.component.html | 13 ++++++++ .../chip-outlined.component.scss | 7 +++++ .../chip-outlined/chip-outlined.component.ts | 30 +++++++++++++++++++ .../chip-simple/chip-simple.component.scss | 2 +- .../chip/chip-tailwind-styling/layout.scss | 6 ++-- .../chip-variants.component.scss | 3 +- .../data-display/data-display-routes-data.ts | 1 + src/app/data-display/data-display.routes.ts | 6 ++++ 10 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 src/app/data-display/chip/chip-outlined/chip-outlined.component.html create mode 100644 src/app/data-display/chip/chip-outlined/chip-outlined.component.scss create mode 100644 src/app/data-display/chip/chip-outlined/chip-outlined.component.ts diff --git a/live-editing/configs/ChipConfigGenerator.ts b/live-editing/configs/ChipConfigGenerator.ts index 459d526857..4628a00205 100644 --- a/live-editing/configs/ChipConfigGenerator.ts +++ b/live-editing/configs/ChipConfigGenerator.ts @@ -15,6 +15,12 @@ export class ChipConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/data-display/" })); + configs.push(new Config({ + component: 'ChipOutlinedComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + configs.push(new Config({ component: 'ChipVariantsComponent', appConfig: BaseAppConfig, diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss index 3693122d01..8c1bf8489e 100644 --- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss +++ b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss @@ -9,5 +9,5 @@ igx-chip { } .sample-container { - padding-top: 30px; + padding: 1rem 0 0 1rem; } diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.html b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html new file mode 100644 index 0000000000..c9d6b7529c --- /dev/null +++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html @@ -0,0 +1,13 @@ +
+ @for (item of variants; track item.label) { + + {{ item.label }} + + } +
diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss b/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss new file mode 100644 index 0000000000..a17f5cbe51 --- /dev/null +++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss @@ -0,0 +1,7 @@ +.sample-container { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 5px; + padding: 1rem 0 0 1rem; +} diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts b/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts new file mode 100644 index 0000000000..3cbf555bd6 --- /dev/null +++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts @@ -0,0 +1,30 @@ +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { IBaseChipEventArgs, IgxChipComponent, IgxChipTypeVariant } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; + + +@Component({ + selector: 'app-chip-outlined', + styleUrls: ['./chip-outlined.component.scss'], + templateUrl: './chip-outlined.component.html', + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] +}) + +export class ChipOutlinedComponent { + private cdr = inject(ChangeDetectorRef); + + public variants: { variant: IgxChipTypeVariant | undefined; label: string }[] = [ + { variant: undefined, label: 'Default' }, + { variant: IgxChipTypeVariant.PRIMARY, label: 'Primary' }, + { variant: IgxChipTypeVariant.INFO, label: 'Info' }, + { variant: IgxChipTypeVariant.SUCCESS, label: 'Success' }, + { variant: IgxChipTypeVariant.WARNING, label: 'Warning' }, + { variant: IgxChipTypeVariant.DANGER, label: 'Danger' } + ]; + + public chipRemoved(event: IBaseChipEventArgs) { + this.variants = this.variants.filter(v => v.label !== event.owner.id); + this.cdr.detectChanges(); + } +} diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.scss b/src/app/data-display/chip/chip-simple/chip-simple.component.scss index e175fb08cd..5e88f1179e 100644 --- a/src/app/data-display/chip/chip-simple/chip-simple.component.scss +++ b/src/app/data-display/chip/chip-simple/chip-simple.component.scss @@ -3,5 +3,5 @@ igx-chip { } .sample-container { - padding-top: 30px; + padding: 1rem 0 0 1rem; } diff --git a/src/app/data-display/chip/chip-tailwind-styling/layout.scss b/src/app/data-display/chip/chip-tailwind-styling/layout.scss index 619dc177ee..a201d613a7 100644 --- a/src/app/data-display/chip/chip-tailwind-styling/layout.scss +++ b/src/app/data-display/chip/chip-tailwind-styling/layout.scss @@ -1,4 +1,4 @@ -igx-chip { - margin-right: 5px; - margin-top: 20px; +igx-chips-area { + gap: 0.5rem; + padding: 1rem 0 0 1rem; } \ No newline at end of file diff --git a/src/app/data-display/chip/chip-variants/chip-variants.component.scss b/src/app/data-display/chip/chip-variants/chip-variants.component.scss index fce0b6a0db..a17f5cbe51 100644 --- a/src/app/data-display/chip/chip-variants/chip-variants.component.scss +++ b/src/app/data-display/chip/chip-variants/chip-variants.component.scss @@ -3,6 +3,5 @@ flex-wrap: wrap; align-items: center; gap: 5px; - padding-top: 15px; - padding-left: 10px; + padding: 1rem 0 0 1rem; } diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index b5d24e6205..39ceef1ea1 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -12,6 +12,7 @@ export const dataDisplayRoutesData = { "badge-styling": { displayName: "Badge Styling", parentName: "Badge" }, "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" }, "chip-simple": { displayName: "Chip Simple", parentName: "Chip" }, + "chip-outlined": { displayName: "Chip Outlined", parentName: "Chip" }, "chip-variants": { displayName: "Chip Variants", parentName: "Chip" }, "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" }, "chip-styling": { displayName: "Chip Styling", parentName: "Chip" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 514fb69438..de1538d481 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -10,6 +10,7 @@ import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.compo import { BadgeTailwindStylingComponent } from './badge/badge-tailwind-styling/badge-tailwind-styling.component'; import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component'; import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component'; +import { ChipOutlinedComponent } from './chip/chip-outlined/chip-outlined.component'; import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component'; import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component'; import { ChipTailwindStylingSampleComponent } from './chip/chip-tailwind-styling/chip-tailwind-styling.component'; @@ -112,6 +113,11 @@ export const DataDisplayRoutes: Routes = [ data: dataDisplayRoutesData['chip-simple'], path: 'chip-simple' }, + { + component: ChipOutlinedComponent, + data: dataDisplayRoutesData['chip-outlined'], + path: 'chip-outlined' + }, { component: ChipVariantsComponent, data: dataDisplayRoutesData['chip-variants'],