Skip to content

Commit b82baa2

Browse files
simeonoffsimeonoff
authored
Merge pull request #3699 from IgniteUI/apetrov/new-design-system-samples
feat(styling): bespoke design system samples
2 parents 04e9ae6 + 7680105 commit b82baa2

32 files changed

Lines changed: 1271 additions & 280 deletions

‎package-lock.json‎

Lines changed: 12 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@
7272
"express": "^4.18.2",
7373
"file-saver": "^2.0.2",
7474
"hammerjs": "^2.0.8",
75-
"igniteui-angular": "^20.1.4",
75+
"igniteui-angular": "^20.1.6",
7676
"igniteui-angular-charts": "^19.0.1",
7777
"igniteui-angular-core": "^19.0.1",
7878
"igniteui-angular-extras": "^20.0.0",
79-
"igniteui-angular-i18n": "^20.1.4",
79+
"igniteui-angular-i18n": "^20.1.6",
8080
"igniteui-dockmanager": "^1.17.0",
8181
"igniteui-live-editing": "^3.1.1",
8282
"igniteui-webcomponents": "^6.2.0",

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

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,8 @@
1-
<igx-chips-area (reorder)="chipsOrderChanged($event)">
1+
<igx-chips-area>
22
@for (chip of chipList; track chip) {
3-
<igx-chip
4-
[id]="chip.id"
5-
[selectable]="true"
6-
[selectIcon]="mySelectIcon"
7-
[removable]="true"
8-
[removeIcon]="myRemoveIcon"
9-
(remove)="chipRemoved($event)"
10-
[draggable]="true">
11-
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
3+
<igx-chip [ngClass]="chip.class">
4+
<igx-icon igxPrefix name={{chip.icon}}></igx-icon>
125
{{chip.text}}
136
</igx-chip>
147
}
158
</igx-chips-area>
16-
17-
<ng-template #mySelectIcon>
18-
<igx-icon>check_circle</igx-icon>
19-
</ng-template>
20-
21-
<ng-template #myRemoveIcon>
22-
<igx-icon>delete</igx-icon>
23-
</ng-template>

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

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,48 @@
11
@use "layout.scss";
22
@use "igniteui-angular/theming" as *;
33

4-
$custom-theme: chip-theme(
5-
$background: #57a5cd,
6-
$selected-background: #ecaa53,
7-
$remove-icon-color: #d81414,
8-
$border-radius: 5px,
9-
);
10-
11-
@include css-vars($custom-theme);
4+
// CSS variables approach
5+
6+
igx-chip {
7+
--text-color: #fff;
8+
--hover-text-color: #fff;
9+
--focus-text-color: #fff;
10+
--border-radius: #{rem(5px)};
11+
}
12+
13+
.xcom {
14+
--background: #000;
15+
--hover-background: #000;
16+
--focus-background: #323232;
17+
}
18+
19+
.youtube {
20+
--background: #cd201f;
21+
--hover-background: #cd201f;
22+
--focus-background: #9f1717;
23+
}
24+
25+
.facebook {
26+
--background: #3b5999;
27+
--hover-background: #3b5999;
28+
--focus-background: #2c4378;
29+
}
30+
31+
.linkedin {
32+
--background: #55acee;
33+
--hover-background: #55acee;
34+
--focus-background: #4682af;
35+
}
36+
37+
// Sass theme approach
38+
39+
// $custom-chip-theme: chip-theme(
40+
// $background: #cd201f,
41+
// $text-color: #fff,
42+
// $hover-background: #cd201f,
43+
// $focus-background: #9f1717,
44+
// $border-radius: rem(5px)
45+
// );
46+
47+
// @include css-vars($custom-chip-theme)
48+

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

Lines changed: 44 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,51 @@
1-
import { ChangeDetectorRef, Component, inject } from '@angular/core';
2-
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
3-
1+
import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
2+
import { facebook, linkedin } from '@igniteui/material-icons-extended';
3+
import {
4+
IgxChipsAreaComponent,
5+
IgxChipComponent,
6+
IgxIconComponent,
7+
IgxPrefixDirective,
8+
IgxIconService
9+
} from 'igniteui-angular';
10+
import { NgClass } from '@angular/common';
411

512
@Component({
6-
selector: 'app-chip',
7-
styleUrls: ['./chip-styling.component.scss'],
8-
templateUrl: './chip-styling.component.html',
9-
imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
13+
selector: 'app-chip',
14+
styleUrls: ['./chip-styling.component.scss'],
15+
templateUrl: './chip-styling.component.html',
16+
imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass]
1017
})
1118

12-
export class ChipStylingSampleComponent {
13-
changeDetectionRef = inject(ChangeDetectorRef);
14-
15-
public chipList = [
16-
{
17-
text: 'Country',
18-
id: '1',
19-
icon: 'place'
20-
},
21-
{
22-
text: 'City',
23-
id: '2',
24-
icon: 'location_city'
25-
},
26-
{
27-
text: 'Town',
28-
id: '3',
29-
icon: 'store'
30-
},
31-
{
32-
text: 'First Name',
33-
id: '4',
34-
icon: 'person_pin'
35-
}
36-
];
37-
38-
39-
public chipRemoved(event: IBaseChipEventArgs) {
40-
this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
41-
this.changeDetectionRef.detectChanges();
42-
}
19+
export class ChipStylingSampleComponent implements OnInit {
20+
changeDetectionRef = inject(ChangeDetectorRef);
21+
private iconService = inject(IgxIconService)
22+
public ngOnInit() {
23+
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>');
24+
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>');
25+
this.iconService.addSvgIconFromText(facebook.name, facebook.value);
26+
this.iconService.addSvgIconFromText(linkedin.name, linkedin.value);
27+
}
4328

44-
public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
45-
const newChipList = [];
46-
for (const chip of event.chipsArray) {
47-
const chipItem = this.chipList.filter((item) => item.id === chip.id)[0];
48-
newChipList.push(chipItem);
49-
}
50-
this.chipList = newChipList;
29+
public chipList = [
30+
{
31+
text: 'X.com',
32+
class: 'xcom',
33+
icon: 'x'
34+
},
35+
{
36+
text: 'Youtube',
37+
class: 'youtube',
38+
icon: 'youtube'
39+
},
40+
{
41+
text: 'Facebook',
42+
class: 'facebook',
43+
icon: 'facebook'
44+
},
45+
{
46+
text: 'LinkedIn',
47+
class: 'linkedin',
48+
icon: 'linkedin'
5149
}
50+
];
5251
}

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,23 @@
1+
@use "igniteui-angular/theming" as *;
2+
3+
:host {
4+
::ng-deep {
5+
.igx-chip__item {
6+
height: rem(20px);
7+
font-size: rem(12px);
8+
}
9+
}
10+
}
11+
112
igx-chip {
2-
margin-right: 5px;
3-
margin-top: 20px;
13+
margin-right: rem(8px);
14+
margin-top: rem(20px);
15+
}
16+
17+
igx-chips-area {
18+
margin-left: rem(20px);
19+
}
20+
21+
igx-icon {
22+
--size: #{rem(12px)};
423
}

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

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
<div class="buttons-sample">
2-
<div class="button-sample">
3-
<button igxButton="contained" igxRipple>Contained Button</button>
1+
@for (item of range; let i = $index; track i) {
2+
<div [class]="'buttons-sample-' + (i + 1)">
3+
<div class="button-sample">
4+
<button igxButton="contained">Solid</button>
5+
</div>
6+
<div class="button-sample">
7+
<button igxButton="outlined">Outlined</button>
8+
</div>
9+
<div class="button-sample dashed">
10+
<button igxButton="outlined">Dashed</button>
11+
</div>
12+
<div class="button-sample filled">
13+
<button igxButton="flat">Filled</button>
14+
</div>
15+
<div class="button-sample text">
16+
<button igxButton="flat">Text</button>
17+
</div>
18+
<div class="button-sample link">
19+
<button igxButton="flat">Link</button>
20+
</div>
421
</div>
5-
<div class="button-sample">
6-
<button igxButton="flat" igxRipple>Flat Button</button>
7-
</div>
8-
<div class="button-sample">
9-
<button igxButton="outlined" igxRipple>Outlined Button</button>
10-
</div>
11-
<div class="button-sample">
12-
<button igxButton="fab" igxRipple>Fab Button</button>
13-
</div>
14-
<div class="button-sample">
15-
<button igxButton="contained" [disabled]="'true'">Disabled</button>
16-
</div>
17-
</div>
22+
}

0 commit comments

Comments
 (0)