Merge pull request #3697 from IgniteUI/apetrov/add-roundness-sample-vnext

feat(theming): add roundness sample (vnext)

Author: simeonoff

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,

src/app/theming/roundness/roundness-sample.component.html

@@ -0,0 +1,25 @@
+<div class="sample-container">
+    <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: 1;</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>

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;
+}

src/app/theming/roundness/roundness-sample.component.ts

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import {
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxChipComponent,
+    IgxIconComponent,
+    IgxPrefixDirective
+} from "igniteui-angular";
+
+@Component({
+    selector: "app-chip-simple",
+    styleUrls: ["./roundness-sample.component.scss"],
+    templateUrl: "./roundness-sample.component.html",
+    imports: [
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardContentDirective,
+        IgxChipComponent,
+        IgxIconComponent,
+        IgxPrefixDirective
+    ]
+})
+export class RoundnessComponent {}

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' }

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'],