From 3ad5c58571c6f3bfbb214a13f146599ad0d05c43 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Fri, 27 Jun 2025 15:34:47 +0300
Subject: [PATCH 1/3] feat(theming): add roundness sample

---
 .../roundness/roundness-sample.component.css  | 23 +++++++++++++++++++
 .../roundness/roundness-sample.component.html | 16 +++++++++++++
 .../roundness/roundness-sample.component.ts   | 13 +++++++++++
 src/app/theming/theming-routes-data.ts        |  1 +
 src/app/theming/theming.routes.ts             |  6 +++++
 5 files changed, 59 insertions(+)
 create mode 100644 src/app/theming/roundness/roundness-sample.component.css
 create mode 100644 src/app/theming/roundness/roundness-sample.component.html
 create mode 100644 src/app/theming/roundness/roundness-sample.component.ts

diff --git a/src/app/theming/roundness/roundness-sample.component.css b/src/app/theming/roundness/roundness-sample.component.css
new file mode 100644
index 0000000000..4d44c3ca31
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.css
@@ -0,0 +1,23 @@
+.chip1{
+    --ig-radius-factor: 0;
+}
+
+.chip2{
+    --ig-radius-factor: 1;
+}
+
+.chip-wrapper {
+    text-align: center;
+}
+
+.sample-container {
+    display: flex;
+    justify-content: center;
+    gap: 5rem;
+    padding-top: 30px;
+}
+
+p{
+    font-size: 17px;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/app/theming/roundness/roundness-sample.component.html b/src/app/theming/roundness/roundness-sample.component.html
new file mode 100644
index 0000000000..03efb6e9a8
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.html
@@ -0,0 +1,16 @@
+<div class="sample-container">
+  <div class="chip-wrapper">
+    <p>--ig-radius-factor: 0</p>
+    <igx-chip class="chip1">
+      <igx-icon igxPrefix>place</igx-icon>
+      Country
+    </igx-chip>
+  </div>
+  <div class="chip-wrapper">
+    <p>--ig-radius-factor: 1</p>
+    <igx-chip class="chip2">
+      <igx-icon igxPrefix>location_city</igx-icon>
+      City
+    </igx-chip>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/theming/roundness/roundness-sample.component.ts b/src/app/theming/roundness/roundness-sample.component.ts
new file mode 100644
index 0000000000..fd1bd35ddd
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
+
+
+@Component({
+  selector: 'app-chip-simple',
+  styleUrls: ['./roundness-sample.component.css'],
+  templateUrl: './roundness-sample.component.html',
+  imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+
+export class RoundnessComponent {
+}
diff --git a/src/app/theming/theming-routes-data.ts b/src/app/theming/theming-routes-data.ts
index e5a3ac0d92..34a10def49 100644
--- a/src/app/theming/theming-routes-data.ts
+++ b/src/app/theming/theming-routes-data.ts
@@ -8,6 +8,7 @@ export const themingRoutesData = {
     'shadows-sample-2': { displayName: 'Shadows sample 2', parentName: 'Shadows' },
     // eslint-disable-next-line quote-props
     'density': { displayName: 'Display density sample', parentName: 'Themes' },
+    'roundness': { displayName: 'Roundness', parentName: 'Themes' },
     'angular-sample': { displayName: 'Angular Material Theming', parentName: 'Themes' },
     'bootstrap-sample': { displayName: 'Bootstrap Theming', parentName: 'Themes' },
     'card-sample-shadow': { displayName: 'card-sample-shadow', parentName: 'Shadows' }
diff --git a/src/app/theming/theming.routes.ts b/src/app/theming/theming.routes.ts
index 8ba1cc05f9..950958bbe3 100644
--- a/src/app/theming/theming.routes.ts
+++ b/src/app/theming/theming.routes.ts
@@ -5,6 +5,7 @@ import { AngularMaterialComponent } from './angular/angular-sample.component';
 import { BootstrapComponent } from './bootstrap/bootstrap-sample.component';
 import { DefaultThemeSampleComponent } from './default-theme-sample/default-theme-sample.component';
 import { DisplayDensityComponent } from './display-density/display-density.component';
+import { RoundnessComponent } from './roundness/roundness-sample.component';
 import { CardSampleShadowComponent} from './shadows/card-sample-shadow/card-sample-shadow';
 import { ShadowsSampleComponent } from './shadows/shadows-sample-1/shadows-sample.component';
 import { ShadowsSample2Component } from './shadows/shadows-sample-2/shadows-sample-2.component';
@@ -32,6 +33,11 @@ export const ThemingRoutes: Routes = [
         data: themingRoutesData['density'],
         path: 'density'
     },
+    {
+        component: RoundnessComponent,
+        data: themingRoutesData['roundness'],
+        path: 'roundness'
+    },
     {
         component: CardSampleShadowComponent,
         data: themingRoutesData['card-sample-shadow'],

From 53246eba8834930f9e23f85b89c80583159f01ce Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 17 Jul 2025 14:19:27 +0300
Subject: [PATCH 2/3] refactor(roundness): optimize sample

---
 .../roundness/roundness-sample.component.css  | 23 -----------
 .../roundness/roundness-sample.component.html | 39 ++++++++++++-------
 .../roundness/roundness-sample.component.scss | 17 ++++++++
 .../roundness/roundness-sample.component.ts   | 31 ++++++++++-----
 4 files changed, 62 insertions(+), 48 deletions(-)
 delete mode 100644 src/app/theming/roundness/roundness-sample.component.css
 create mode 100644 src/app/theming/roundness/roundness-sample.component.scss

diff --git a/src/app/theming/roundness/roundness-sample.component.css b/src/app/theming/roundness/roundness-sample.component.css
deleted file mode 100644
index 4d44c3ca31..0000000000
--- a/src/app/theming/roundness/roundness-sample.component.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.chip1{
-    --ig-radius-factor: 0;
-}
-
-.chip2{
-    --ig-radius-factor: 1;
-}
-
-.chip-wrapper {
-    text-align: center;
-}
-
-.sample-container {
-    display: flex;
-    justify-content: center;
-    gap: 5rem;
-    padding-top: 30px;
-}
-
-p{
-    font-size: 17px;
-    font-weight: bold;
-}
\ No newline at end of file
diff --git a/src/app/theming/roundness/roundness-sample.component.html b/src/app/theming/roundness/roundness-sample.component.html
index 03efb6e9a8..1610d8c258 100644
--- a/src/app/theming/roundness/roundness-sample.component.html
+++ b/src/app/theming/roundness/roundness-sample.component.html
@@ -1,16 +1,25 @@
 <div class="sample-container">
-  <div class="chip-wrapper">
-    <p>--ig-radius-factor: 0</p>
-    <igx-chip class="chip1">
-      <igx-icon igxPrefix>place</igx-icon>
-      Country
-    </igx-chip>
-  </div>
-  <div class="chip-wrapper">
-    <p>--ig-radius-factor: 1</p>
-    <igx-chip class="chip2">
-      <igx-icon igxPrefix>location_city</igx-icon>
-      City
-    </igx-chip>
-  </div>
-</div>
\ No newline at end of file
+    <igx-card>
+        <igx-card-header>
+            <pre>--ig-radius-factor: 0;</pre>
+        </igx-card-header>
+        <igx-card-content>
+            <igx-chip class="square-chip">
+                <igx-icon igxPrefix>place</igx-icon>
+                <span>Square Chip</span>
+            </igx-chip>
+        </igx-card-content>
+    </igx-card>
+
+    <igx-card>
+        <igx-card-header>
+            <pre>--ig-radius-factor: 0;</pre>
+        </igx-card-header>
+        <igx-card-content>
+            <igx-chip class="round-chip">
+                <igx-icon igxPrefix>place</igx-icon>
+                <span>Round Chip</span>
+            </igx-chip>
+        </igx-card-content>
+    </igx-card>
+</div>
diff --git a/src/app/theming/roundness/roundness-sample.component.scss b/src/app/theming/roundness/roundness-sample.component.scss
new file mode 100644
index 0000000000..1a7a74f86c
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.scss
@@ -0,0 +1,17 @@
+@use "igniteui-angular/theming" as *;
+
+.sample-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: rem(16px);
+    padding: rem(32px);
+}
+
+.square-chip {
+    --ig-radius-factor: 0;
+}
+
+.round-chip {
+    --ig-radius-factor: 1;
+}
diff --git a/src/app/theming/roundness/roundness-sample.component.ts b/src/app/theming/roundness/roundness-sample.component.ts
index fd1bd35ddd..a0af158426 100644
--- a/src/app/theming/roundness/roundness-sample.component.ts
+++ b/src/app/theming/roundness/roundness-sample.component.ts
@@ -1,13 +1,24 @@
-import { Component } from '@angular/core';
-import { IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
-
+import { Component } from "@angular/core";
+import {
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxChipComponent,
+    IgxIconComponent,
+    IgxPrefixDirective,
+} from "igniteui-angular";
 
 @Component({
-  selector: 'app-chip-simple',
-  styleUrls: ['./roundness-sample.component.css'],
-  templateUrl: './roundness-sample.component.html',
-  imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+    selector: "app-chip-simple",
+    styleUrls: ["./roundness-sample.component.scss"],
+    templateUrl: "./roundness-sample.component.html",
+    imports: [
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardContentDirective,
+        IgxChipComponent,
+        IgxIconComponent,
+        IgxPrefixDirective,
+    ],
 })
-
-export class RoundnessComponent {
-}
+export class RoundnessComponent {}

From e59dbda2cb896ecbb7f749772da79aaee47ac2ee Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Thu, 17 Jul 2025 15:08:55 +0300
Subject: [PATCH 3/3] refactor(roundness): fix lint errors + add live-editing
 sample

---
 live-editing/configs/ThemingConfigGenerator.ts     | 14 ++++++++++++++
 .../roundness/roundness-sample.component.html      |  2 +-
 .../roundness/roundness-sample.component.ts        |  6 +++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/live-editing/configs/ThemingConfigGenerator.ts b/live-editing/configs/ThemingConfigGenerator.ts
index 6715df2815..eaf0e86e97 100644
--- a/live-editing/configs/ThemingConfigGenerator.ts
+++ b/live-editing/configs/ThemingConfigGenerator.ts
@@ -1,3 +1,11 @@
+import {
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxChipComponent,
+    IgxIconComponent,
+    IgxPrefixDirective,
+} from "igniteui-angular";
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';;
 export class ThemingConfigGenerator implements IConfigGenerator {
@@ -36,6 +44,12 @@ export class ThemingConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/theming/'
         }));
 
+        configs.push(new Config({
+            component: 'RoundnessComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: '/theming/roundness/'
+        }));
+
         configs.push(new Config({
             component: 'AnimationsSampleComponent',
             appConfig: BaseAppConfig,
diff --git a/src/app/theming/roundness/roundness-sample.component.html b/src/app/theming/roundness/roundness-sample.component.html
index 1610d8c258..9c5e2d7802 100644
--- a/src/app/theming/roundness/roundness-sample.component.html
+++ b/src/app/theming/roundness/roundness-sample.component.html
@@ -13,7 +13,7 @@
 
     <igx-card>
         <igx-card-header>
-            <pre>--ig-radius-factor: 0;</pre>
+            <pre>--ig-radius-factor: 1;</pre>
         </igx-card-header>
         <igx-card-content>
             <igx-chip class="round-chip">
diff --git a/src/app/theming/roundness/roundness-sample.component.ts b/src/app/theming/roundness/roundness-sample.component.ts
index a0af158426..d1c3524afd 100644
--- a/src/app/theming/roundness/roundness-sample.component.ts
+++ b/src/app/theming/roundness/roundness-sample.component.ts
@@ -5,7 +5,7 @@ import {
     IgxCardHeaderComponent,
     IgxChipComponent,
     IgxIconComponent,
-    IgxPrefixDirective,
+    IgxPrefixDirective
 } from "igniteui-angular";
 
 @Component({
@@ -18,7 +18,7 @@ import {
         IgxCardContentDirective,
         IgxChipComponent,
         IgxIconComponent,
-        IgxPrefixDirective,
-    ],
+        IgxPrefixDirective
+    ]
 })
 export class RoundnessComponent {}