feat(styling): bespoke design system samples

src/app/data-display/chip/chip-styling/chip-styling.component.html

@@ -1,23 +1,8 @@
-<igx-chips-area (reorder)="chipsOrderChanged($event)">
+<igx-chips-area>
   @for (chip of chipList; track chip) {
-    <igx-chip
-      [id]="chip.id"
-      [selectable]="true"
-      [selectIcon]="mySelectIcon"
-      [removable]="true"
-      [removeIcon]="myRemoveIcon"
-      (remove)="chipRemoved($event)"
-      [draggable]="true">
-      <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
+    <igx-chip [ngClass]="chip.class">
+      <igx-icon igxPrefix name={{chip.icon}}></igx-icon>
       {{chip.text}}
     </igx-chip>
   }
 </igx-chips-area>
-
-<ng-template #mySelectIcon>
-  <igx-icon>check_circle</igx-icon>
-</ng-template>
-
-<ng-template #myRemoveIcon>
-  <igx-icon>delete</igx-icon>
-</ng-template>

src/app/data-display/chip/chip-styling/chip-styling.component.scss

@@ -1,11 +1,48 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$custom-theme: chip-theme(
-  $background: #57a5cd,
-  $selected-background: #ecaa53,
-  $remove-icon-color: #d81414,
-  $border-radius: 5px,
-);
-
-@include css-vars($custom-theme);
+// CSS variables approach
+
+igx-chip {
+    --text-color: #fff;
+    --hover-text-color: #fff;
+    --focus-text-color: #fff;
+    --border-radius: #{rem(5px)};
+}
+
+.xcom {
+    --background: #000;
+    --hover-background: #000;
+    --focus-background: #323232;
+}
+
+.youtube {
+    --background: #cd201f;
+    --hover-background: #cd201f;
+    --focus-background: #9f1717;
+}
+
+.facebook {
+    --background: #3b5999;
+    --hover-background: #3b5999;
+    --focus-background: #2c4378;
+}
+
+.linkedin {
+    --background: #55acee;
+    --hover-background: #55acee;
+    --focus-background: #4682af;
+}
+
+// Sass theme approach
+
+// $custom-chip-theme: chip-theme(
+//     $background: #cd201f,
+//     $text-color: #fff,
+//     $hover-background: #cd201f,
+//     $focus-background: #9f1717,
+//     $border-radius: rem(5px)
+// );
+
+// @include css-vars($custom-chip-theme)
+

src/app/data-display/chip/chip-styling/chip-styling.component.ts

@@ -1,52 +1,51 @@
-import { ChangeDetectorRef, Component, inject } from '@angular/core';
-import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
-
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
+import { facebook, linkedin } from '@igniteui/material-icons-extended';
+import { 
+  IgxChipsAreaComponent, 
+  IgxChipComponent, 
+  IgxIconComponent, 
+  IgxPrefixDirective, 
+  IgxIconService
+} from 'igniteui-angular';
+import { NgClass } from '@angular/common';
 
 @Component({
-    selector: 'app-chip',
-    styleUrls: ['./chip-styling.component.scss'],
-    templateUrl: './chip-styling.component.html',
-    imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+  selector: 'app-chip',
+  styleUrls: ['./chip-styling.component.scss'],
+  templateUrl: './chip-styling.component.html',
+  imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass]
 })
 
-export class ChipStylingSampleComponent {
-    changeDetectionRef = inject(ChangeDetectorRef);
-
-    public chipList = [
-        {
-           text: 'Country',
-           id: '1',
-           icon: 'place'
-        },
-        {
-            text: 'City',
-            id: '2',
-            icon: 'location_city'
-        },
-        {
-            text: 'Town',
-            id: '3',
-            icon: 'store'
-        },
-        {
-            text: 'First Name',
-            id: '4',
-            icon: 'person_pin'
-        }
-    ];
-
-
-    public chipRemoved(event: IBaseChipEventArgs) {
-        this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
-        this.changeDetectionRef.detectChanges();
-    }
+export class ChipStylingSampleComponent implements OnInit {
+  changeDetectionRef = inject(ChangeDetectorRef);
+  private iconService = inject(IgxIconService)
+  public ngOnInit() {
+    this.iconService.addSvgIconFromText('x', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>');
+    this.iconService.addSvgIconFromText('youtube', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 13"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/> </svg>');
+    this.iconService.addSvgIconFromText(facebook.name, facebook.value);
+    this.iconService.addSvgIconFromText(linkedin.name, linkedin.value);
+  }
 
-    public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
-        const newChipList = [];
-        for (const chip of event.chipsArray) {
-            const chipItem = this.chipList.filter((item) => item.id === chip.id)[0];
-            newChipList.push(chipItem);
-        }
-        this.chipList = newChipList;
+  public chipList = [
+    {
+      text: 'X.com',
+      class: 'xcom',
+      icon: 'x'
+    },
+    {
+      text: 'Youtube',
+      class: 'youtube',
+      icon: 'youtube'
+    },
+    {
+      text: 'Facebook',
+      class: 'facebook',
+      icon: 'facebook'
+    },
+    {
+      text: 'LinkedIn',
+      class: 'linkedin',
+      icon: 'linkedin'
     }
+  ];
 }

src/app/data-display/chip/chip-styling/layout.scss

@@ -1,4 +1,23 @@
+@use "igniteui-angular/theming" as *;
+
+:host {
+    ::ng-deep {
+        .igx-chip__item {
+            height: rem(20px);
+            font-size: rem(12px);
+        }
+    }
+}
+
 igx-chip {
-  margin-right: 5px;
-  margin-top: 20px;
+    margin-right: rem(8px);
+    margin-top: rem(20px);
+}
+
+igx-chips-area {
+    margin-left: rem(20px);
+}
+
+igx-icon {
+    --size: #{rem(12px)};
 }

src/app/data-entries/buttons/buttons-style/buttons-style.component.html

@@ -1,17 +1,22 @@
-<div class="buttons-sample">
-  <div class="button-sample">
-    <button igxButton="contained" igxRipple>Contained Button</button>
+@for (item of range; let i = $index; track i) {
+  <div [class]="'buttons-sample-' + (i + 1)">
+    <div class="button-sample">
+      <button igxButton="contained">Solid</button>
+    </div>
+    <div class="button-sample">
+      <button igxButton="outlined">Outlined</button>
+    </div>
+    <div class="button-sample dashed">
+      <button igxButton="outlined">Dashed</button>
+    </div>
+    <div class="button-sample filled">
+      <button igxButton="flat">Filled</button>
+    </div>
+    <div class="button-sample text">
+      <button igxButton="flat">Text</button>
+    </div>
+    <div class="button-sample link">
+      <button igxButton="flat">Link</button>
+    </div>
   </div>
-  <div class="button-sample">
-    <button igxButton="flat" igxRipple>Flat Button</button>
-  </div>
-  <div class="button-sample">
-    <button igxButton="outlined" igxRipple>Outlined Button</button>
-  </div>
-  <div class="button-sample">
-    <button igxButton="fab" igxRipple>Fab Button</button>
-  </div>
-  <div class="button-sample">
-    <button igxButton="contained" [disabled]="'true'">Disabled</button>
-  </div>
-</div>
+}