diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index c331361e12..bd709f9c4c 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -17,34 +17,39 @@ export class BadgeConfigGenerator implements IConfigGenerator {
shortenComponentPathBy: "/data-display/badge/"
}));
- // badge sample 2
+ // badge overview
configs.push(new Config({
- component: 'BadgeSample2Component',
- additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+ component: 'BadgeOverviewComponent',
appConfig: BaseAppConfig,
shortenComponentPathBy: "/data-display/badge/"
}));
- // badge sample 3
+ // badge shape
configs.push(new Config({
- component: 'BadgeSample3Component',
- additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+ component: 'BadgeShapeComponent',
+ appConfig: BaseAppConfig,
+ shortenComponentPathBy: "/data-display/badge/"
+ }));
+
+ // badge variants
+ configs.push(new Config({
+ component: 'BadgeVariantsComponent',
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/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-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-sample-3/badge-sample-3.component.html b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html
deleted file mode 100644
index 36c6a560c2..0000000000
--- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.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-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-sample-3/badge-sample-3.component.ts b/src/app/data-display/badge/badge-styling/badge-styling.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-styling/badge-styling.component.ts
index 446dc994dd..4a8d990d50 100644
--- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.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-sample-3',
- styleUrls: ['./badge-sample-3.component.scss'],
- templateUrl: './badge-sample-3.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 BadgeSample3Component {
+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.ts b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts
deleted file mode 100644
index 394ebbcc88..0000000000
--- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.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-tailwind-styling-sample',
- styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
- templateUrl: './badge-tailwind-styling-sample.component.html',
- changeDetection: ChangeDetectionStrategy.Eager,
- imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
-})
-export class BadgeTailwindStylingSampleComponent {
- 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/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-styling-sample/badge-styling-sample.component.ts b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
similarity index 76%
rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts
rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
index 55b522e709..2ff74b33d7 100644
--- a/src/app/data-display/badge/badge-styling-sample/badge-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-styling-sample',
- styleUrls: ['./badge-styling-sample.component.scss'],
- templateUrl: './badge-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 BadgeStylingSampleComponent {
+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..55cc6daa13 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -2,12 +2,13 @@
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-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..160fa580e0 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -1,10 +1,11 @@
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 { 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 +56,39 @@ 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: 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,