refactor(roundness): optimize sample

Author: simeonoff

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

@@ -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>
+    <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>

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

@@ -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.scss

@@ -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 {}