From 0358ea367eec1a5297d971a7dea19b3cb57ecc1b Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 20 Jul 2026 18:46:57 +0300 Subject: [PATCH 1/3] feat(badge): update the samples --- live-editing/configs/BadgeConfigGenerator.ts | 34 +++++++---- .../badge-dot.component.html} | 0 .../badge-dot.component.scss} | 0 .../badge-dot.component.ts} | 8 +-- .../badge-list.component.html} | 0 .../badge-list.component.scss} | 0 .../badge-list.component.ts} | 8 +-- .../badge-overview.component.html | 4 ++ .../badge-overview.component.scss | 18 ++++++ .../badge-overview.component.ts | 12 ++++ .../badge-shape/badge-shape.component.html | 3 + .../badge-shape/badge-shape.component.scss | 3 + .../badge-shape/badge-shape.component.ts | 11 ++++ .../badge-styling.component.html} | 0 .../badge-styling.component.scss} | 0 .../badge-styling.component.ts} | 8 +-- .../layout.scss | 0 .../badge-tailwind-styling.component.html} | 0 .../badge-tailwind-styling.component.scss} | 0 .../badge-tailwind-styling.component.ts} | 8 +-- .../layout.scss | 0 .../badge-variants.component.html} | 0 .../badge-variants.component.scss} | 0 .../badge-variants.component.ts} | 8 +-- .../data-display/data-display-routes-data.ts | 14 +++-- src/app/data-display/data-display.routes.ts | 56 +++++++++++-------- 26 files changed, 137 insertions(+), 58 deletions(-) rename src/app/data-display/badge/{badge-dot-sample/badge-dot-sample.component.html => badge-dot/badge-dot.component.html} (100%) rename src/app/data-display/badge/{badge-dot-sample/badge-dot-sample.component.scss => badge-dot/badge-dot.component.scss} (100%) rename src/app/data-display/badge/{badge-sample-2/badge-sample-2.component.ts => badge-dot/badge-dot.component.ts} (63%) rename src/app/data-display/badge/{badge-sample-3/badge-sample-3.component.html => badge-list/badge-list.component.html} (100%) rename src/app/data-display/badge/{badge-sample-3/badge-sample-3.component.scss => badge-list/badge-list.component.scss} (100%) rename src/app/data-display/badge/{badge-sample-3/badge-sample-3.component.ts => badge-list/badge-list.component.ts} (79%) create mode 100644 src/app/data-display/badge/badge-overview/badge-overview.component.html create mode 100644 src/app/data-display/badge/badge-overview/badge-overview.component.scss create mode 100644 src/app/data-display/badge/badge-overview/badge-overview.component.ts create mode 100644 src/app/data-display/badge/badge-shape/badge-shape.component.html create mode 100644 src/app/data-display/badge/badge-shape/badge-shape.component.scss create mode 100644 src/app/data-display/badge/badge-shape/badge-shape.component.ts rename src/app/data-display/badge/{badge-styling-sample/badge-styling-sample.component.html => badge-styling/badge-styling.component.html} (100%) rename src/app/data-display/badge/{badge-styling-sample/badge-styling-sample.component.scss => badge-styling/badge-styling.component.scss} (100%) rename src/app/data-display/badge/{badge-styling-sample/badge-styling-sample.component.ts => badge-styling/badge-styling.component.ts} (77%) rename src/app/data-display/badge/{badge-styling-sample => badge-styling}/layout.scss (100%) rename src/app/data-display/badge/{badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html => badge-tailwind-styling/badge-tailwind-styling.component.html} (100%) rename src/app/data-display/badge/{badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss => badge-tailwind-styling/badge-tailwind-styling.component.scss} (100%) rename src/app/data-display/badge/{badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts => badge-tailwind-styling/badge-tailwind-styling.component.ts} (74%) rename src/app/data-display/badge/{badge-tailwind-styling-sample => badge-tailwind-styling}/layout.scss (100%) rename src/app/data-display/badge/{badge-sample-2/badge-sample-2.component.html => badge-variants/badge-variants.component.html} (100%) rename src/app/data-display/badge/{badge-sample-2/badge-sample-2.component.scss => badge-variants/badge-variants.component.scss} (100%) rename src/app/data-display/badge/{badge-dot-sample/badge-dot-sample.component.ts => badge-variants/badge-variants.component.ts} (62%) diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts index c331361e12..1d76204bd1 100644 --- a/live-editing/configs/BadgeConfigGenerator.ts +++ b/live-editing/configs/BadgeConfigGenerator.ts @@ -17,34 +17,48 @@ export class BadgeConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/data-display/badge/" })); - // badge sample 2 + // badge overview configs.push(new Config({ - component: 'BadgeSample2Component', + component: 'BadgeOverviewComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/badge/" + })); + + // badge shape + configs.push(new Config({ + component: 'BadgeShapeComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/badge/" + })); + + // badge overview + configs.push(new Config({ + component: 'BadgeVariantsComponent', additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); - // badge sample 3 + // badge list configs.push(new Config({ - component: 'BadgeSample3Component', + component: 'BadgeListComponent', additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); - // badge styling sample + // badge styling configs.push(new Config({ - component: 'BadgeStylingSampleComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling-sample/layout.scss"], + component: 'BadgeStylingComponent', + additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); - // badge dot sample + // badge dot configs.push(new Config({ - component: 'BadgeDotSampleComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss"], + component: 'BadgeDotComponent', + additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot/badge-dot.component.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html similarity index 100% rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html rename to src/app/data-display/badge/badge-dot/badge-dot.component.html diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss similarity index 100% rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss rename to src/app/data-display/badge/badge-dot/badge-dot.component.scss diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts b/src/app/data-display/badge/badge-dot/badge-dot.component.ts similarity index 63% rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts rename to src/app/data-display/badge/badge-dot/badge-dot.component.ts index 3f22d52960..a3877635bc 100644 --- a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.ts @@ -3,10 +3,10 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @Component({ - selector: 'app-badge-sample-2', - styleUrls: ['./badge-sample-2.component.scss'], - templateUrl: './badge-sample-2.component.html', + selector: 'app-badge-dot', + styleUrls: ['./badge-dot.component.scss'], + templateUrl: './badge-dot.component.html', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeSample2Component { } +export class BadgeDotComponent { } diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html b/src/app/data-display/badge/badge-list/badge-list.component.html similarity index 100% rename from src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html rename to src/app/data-display/badge/badge-list/badge-list.component.html diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss b/src/app/data-display/badge/badge-list/badge-list.component.scss similarity index 100% rename from src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss rename to src/app/data-display/badge/badge-list/badge-list.component.scss diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts b/src/app/data-display/badge/badge-list/badge-list.component.ts similarity index 79% rename from src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts rename to src/app/data-display/badge/badge-list/badge-list.component.ts index 446dc994dd..3a3a3406b3 100644 --- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts +++ b/src/app/data-display/badge/badge-list/badge-list.component.ts @@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; @Component({ - selector: 'app-badge-sample-3', - styleUrls: ['./badge-sample-3.component.scss'], - templateUrl: './badge-sample-3.component.html', + selector: 'app-badge-list', + styleUrls: ['./badge-list.component.scss'], + templateUrl: './badge-list.component.html', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeSample3Component { +export class BadgeListComponent { public members: Member[] = [ new Member('Terrance Orta', 'online'), new Member('Donna Price', 'online'), diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.html b/src/app/data-display/badge/badge-overview/badge-overview.component.html new file mode 100644 index 0000000000..d1a668e776 --- /dev/null +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss new file mode 100644 index 0000000000..d228601be8 --- /dev/null +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss @@ -0,0 +1,18 @@ +.wrapper { + display: flex; + align-items: center; + padding: 0.5rem; +} + +igx-badge { + --size: 18px; + + position: relative; + right: 10px; + top: -15px; +} + +igx-avatar { + --size: 45px; + margin-top: 6px; +} diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.ts b/src/app/data-display/badge/badge-overview/badge-overview.component.ts new file mode 100644 index 0000000000..9049e07c26 --- /dev/null +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-overview', + templateUrl: './badge-overview.component.html', + styleUrls: ['./badge-overview.component.scss'], + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeOverviewComponent { } diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.html b/src/app/data-display/badge/badge-shape/badge-shape.component.html new file mode 100644 index 0000000000..c4c5d326ed --- /dev/null +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss new file mode 100644 index 0000000000..1910721299 --- /dev/null +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss @@ -0,0 +1,3 @@ +.wrapper { + padding: 16px; +} diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.ts b/src/app/data-display/badge/badge-shape/badge-shape.component.ts new file mode 100644 index 0000000000..076f71077b --- /dev/null +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.ts @@ -0,0 +1,11 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-shape', + templateUrl: './badge-shape.component.html', + styleUrls: ['./badge-shape.component.scss'], + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxBadgeComponent] +}) +export class BadgeShapeComponent { } diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html b/src/app/data-display/badge/badge-styling/badge-styling.component.html similarity index 100% rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html rename to src/app/data-display/badge/badge-styling/badge-styling.component.html diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss similarity index 100% rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss rename to src/app/data-display/badge/badge-styling/badge-styling.component.scss diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts b/src/app/data-display/badge/badge-styling/badge-styling.component.ts similarity index 77% rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts rename to src/app/data-display/badge/badge-styling/badge-styling.component.ts index 55b522e709..4a8d990d50 100644 --- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts +++ b/src/app/data-display/badge/badge-styling/badge-styling.component.ts @@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; @Component({ - selector: 'app-badge-styling-sample', - styleUrls: ['./badge-styling-sample.component.scss'], - templateUrl: './badge-styling-sample.component.html', + selector: 'app-badge-styling', + styleUrls: ['./badge-styling.component.scss'], + templateUrl: './badge-styling.component.html', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeStylingSampleComponent { +export class BadgeStylingComponent { public members: Member[] = [ new Member('Terrance Orta', 'online'), new Member('Donna Price', 'online'), diff --git a/src/app/data-display/badge/badge-styling-sample/layout.scss b/src/app/data-display/badge/badge-styling/layout.scss similarity index 100% rename from src/app/data-display/badge/badge-styling-sample/layout.scss rename to src/app/data-display/badge/badge-styling/layout.scss diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html similarity index 100% rename from src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss similarity index 100% rename from src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts similarity index 74% rename from src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts index 394ebbcc88..2ff74b33d7 100644 --- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts +++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts @@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; @Component({ - selector: 'app-badge-tailwind-styling-sample', - styleUrls: ['./badge-tailwind-styling-sample.component.scss'], - templateUrl: './badge-tailwind-styling-sample.component.html', + selector: 'app-badge-tailwind-styling', + styleUrls: ['./badge-tailwind-styling.component.scss'], + templateUrl: './badge-tailwind-styling.component.html', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeTailwindStylingSampleComponent { +export class BadgeTailwindStylingComponent { public members: Member[] = [ new Member('Terrance Orta', 'online'), new Member('Donna Price', 'online'), diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss b/src/app/data-display/badge/badge-tailwind-styling/layout.scss similarity index 100% rename from src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss rename to src/app/data-display/badge/badge-tailwind-styling/layout.scss diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html b/src/app/data-display/badge/badge-variants/badge-variants.component.html similarity index 100% rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html rename to src/app/data-display/badge/badge-variants/badge-variants.component.html diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss similarity index 100% rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss rename to src/app/data-display/badge/badge-variants/badge-variants.component.scss diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts b/src/app/data-display/badge/badge-variants/badge-variants.component.ts similarity index 62% rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts rename to src/app/data-display/badge/badge-variants/badge-variants.component.ts index 3459cb7d44..7d5eb9b51c 100644 --- a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.ts @@ -3,10 +3,10 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @Component({ - selector: 'app-badge-dot-sample', - styleUrls: ['./badge-dot-sample.component.scss'], - templateUrl: './badge-dot-sample.component.html', + selector: 'app-badge-variants', + styleUrls: ['./badge-variants.component.scss'], + templateUrl: './badge-variants.component.html', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeDotSampleComponent { } +export class BadgeVariantsComponent { } diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 84c0e4554e..46c197a5ef 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -2,12 +2,14 @@ export const dataDisplayRoutesData = { "badge-icon": { displayName: "Badge Icon Sample", parentName: "Badge" }, - "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" }, - "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" }, - "badge-outlined-sample": { displayName: "Badge Outlined Sample", parentName: "Badge" }, - "badge-dot-sample": { displayName: "Badge Dot Sample", parentName: "Badge" }, - "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" }, - "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" }, + "badge-overview": { displayName: "Overview", parentName: "Badge" }, + "badge-shape": { displayName: "Badge Shape", parentName: "Badge" }, + "badge-variants": { displayName: "Badge Variants", parentName: "Badge" }, + "badge-list": { displayName: "Badge for List Items", parentName: "Badge" }, + "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" }, + "badge-dot": { displayName: "Badge Dot", parentName: "Badge" }, + "badge-styling": { displayName: "Badge Styling", parentName: "Badge" }, + "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" }, "chip-simple": { displayName: "Chip Simple", parentName: "Chip" }, "chip-variants": { displayName: "Chip Variants", parentName: "Chip" }, "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 4db820c452..d323ab912f 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -1,10 +1,12 @@ import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component'; -import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component'; -import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component'; +import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component'; +import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component'; +import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component'; +import { BadgeListComponent } from './badge/badge-list/badge-list.component'; import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component'; -import { BadgeDotSampleComponent } from './badge/badge-dot-sample/badge-dot-sample.component'; -import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component'; -import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component'; +import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component'; +import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component'; +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 { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component'; @@ -55,34 +57,44 @@ export const DataDisplayRoutes: Routes = [ path: 'badge-icon' }, { - component: BadgeSample2Component, - data: dataDisplayRoutesData['badge-sample-2'], - path: 'badge-sample-2' + component: BadgeOverviewComponent, + data: dataDisplayRoutesData['badge-overview'], + path: 'badge-overview' }, { - component: BadgeSample3Component, - data: dataDisplayRoutesData['badge-sample-3'], - path: 'badge-sample-3' + component: BadgeShapeComponent, + data: dataDisplayRoutesData['badge-shape'], + path: 'badge-shape' + }, + { + component: BadgeVariantsComponent, + data: dataDisplayRoutesData['badge-variants'], + path: 'badge-variants' + }, + { + component: BadgeListComponent, + data: dataDisplayRoutesData['badge-list'], + path: 'badge-list' }, { component: BadgeOutlinedComponent, - data: dataDisplayRoutesData['badge-outlined-sample'], - path: 'badge-outlined-sample' + data: dataDisplayRoutesData['badge-outlined'], + path: 'badge-outlined' }, { - component: BadgeDotSampleComponent, - data: dataDisplayRoutesData['badge-dot-sample'], - path: 'badge-dot-sample' + component: BadgeDotComponent, + data: dataDisplayRoutesData['badge-dot'], + path: 'badge-dot' }, { - component: BadgeStylingSampleComponent, - data: dataDisplayRoutesData['badge-styling-sample'], - path: 'badge-styling-sample' + component: BadgeStylingComponent, + data: dataDisplayRoutesData['badge-styling'], + path: 'badge-styling' }, { - component: BadgeTailwindStylingSampleComponent, - data: dataDisplayRoutesData['badge-tailwind-styling-sample'], - path: 'badge-tailwind-styling-sample' + component: BadgeTailwindStylingComponent, + data: dataDisplayRoutesData['badge-tailwind-styling'], + path: 'badge-tailwind-styling' }, { component: ChipAreaSampleComponent, From e61002b61472984b1abd3d4623bc741b6956fc88 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 20 Jul 2026 19:17:51 +0300 Subject: [PATCH 2/3] fix(badge): update the badge config generator --- live-editing/configs/BadgeConfigGenerator.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts index 1d76204bd1..c837a53a4d 100644 --- a/live-editing/configs/BadgeConfigGenerator.ts +++ b/live-editing/configs/BadgeConfigGenerator.ts @@ -31,10 +31,9 @@ export class BadgeConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/data-display/badge/" })); - // badge overview + // badge variants configs.push(new Config({ component: 'BadgeVariantsComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); @@ -58,7 +57,7 @@ export class BadgeConfigGenerator implements IConfigGenerator { // badge dot configs.push(new Config({ component: 'BadgeDotComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot/badge-dot.component.scss"], + additionalFiles: ["src/app/data-display/badge/badge-dot/badge-dot.component.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); From 0cf58fca11ba42a771502bf1ac885d4296065cb2 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 21 Jul 2026 17:30:00 +0300 Subject: [PATCH 3/3] feat(badge): remove list sample --- live-editing/configs/BadgeConfigGenerator.ts | 8 ------- .../badge-list/badge-list.component.html | 18 --------------- .../badge-list/badge-list.component.scss | 18 --------------- .../badge/badge-list/badge-list.component.ts | 22 ------------------- .../data-display/data-display-routes-data.ts | 1 - src/app/data-display/data-display.routes.ts | 6 ----- 6 files changed, 73 deletions(-) delete mode 100644 src/app/data-display/badge/badge-list/badge-list.component.html delete mode 100644 src/app/data-display/badge/badge-list/badge-list.component.scss delete mode 100644 src/app/data-display/badge/badge-list/badge-list.component.ts diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts index c837a53a4d..bd709f9c4c 100644 --- a/live-editing/configs/BadgeConfigGenerator.ts +++ b/live-editing/configs/BadgeConfigGenerator.ts @@ -38,14 +38,6 @@ export class BadgeConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/data-display/badge/" })); - // badge list - configs.push(new Config({ - component: 'BadgeListComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], - appConfig: BaseAppConfig, - shortenComponentPathBy: "/data-display/badge/" - })); - // badge styling configs.push(new Config({ component: 'BadgeStylingComponent', diff --git a/src/app/data-display/badge/badge-list/badge-list.component.html b/src/app/data-display/badge/badge-list/badge-list.component.html deleted file mode 100644 index 36c6a560c2..0000000000 --- a/src/app/data-display/badge/badge-list/badge-list.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - - Team Members (4) - - @for (member of members; track member) { - -
-
- - -
-
- {{ member.name }} -
-
- - } - diff --git a/src/app/data-display/badge/badge-list/badge-list.component.scss b/src/app/data-display/badge/badge-list/badge-list.component.scss deleted file mode 100644 index c5aee48558..0000000000 --- a/src/app/data-display/badge/badge-list/badge-list.component.scss +++ /dev/null @@ -1,18 +0,0 @@ -.wrapper { - display: flex; - flex-direction: row; -} - -.contact-name { - font-weight: 600; -} - -.contact-container { - margin-left: 20px; -} - -.badge-style { - position: absolute; - bottom: 2.5px; - left: 40px; -} diff --git a/src/app/data-display/badge/badge-list/badge-list.component.ts b/src/app/data-display/badge/badge-list/badge-list.component.ts deleted file mode 100644 index 3a3a3406b3..0000000000 --- a/src/app/data-display/badge/badge-list/badge-list.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { Member } from '../model/member.model'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - - -@Component({ - selector: 'app-badge-list', - styleUrls: ['./badge-list.component.scss'], - templateUrl: './badge-list.component.html', - changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeListComponent { - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline') - ]; -} diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 46c197a5ef..55cc6daa13 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -5,7 +5,6 @@ export const dataDisplayRoutesData = { "badge-overview": { displayName: "Overview", parentName: "Badge" }, "badge-shape": { displayName: "Badge Shape", parentName: "Badge" }, "badge-variants": { displayName: "Badge Variants", parentName: "Badge" }, - "badge-list": { displayName: "Badge for List Items", parentName: "Badge" }, "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" }, "badge-dot": { displayName: "Badge Dot", parentName: "Badge" }, "badge-styling": { displayName: "Badge Styling", parentName: "Badge" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index d323ab912f..160fa580e0 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -2,7 +2,6 @@ import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component'; import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component'; import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component'; import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component'; -import { BadgeListComponent } from './badge/badge-list/badge-list.component'; import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component'; import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component'; import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component'; @@ -71,11 +70,6 @@ export const DataDisplayRoutes: Routes = [ data: dataDisplayRoutesData['badge-variants'], path: 'badge-variants' }, - { - component: BadgeListComponent, - data: dataDisplayRoutesData['badge-list'], - path: 'badge-list' - }, { component: BadgeOutlinedComponent, data: dataDisplayRoutesData['badge-outlined'],