Skip to content

Commit c1ac555

Browse files
adrianptrvadrianptrv
committed
fix(samples): new styling and structure changes based on comments
1 parent c08969d commit c1ac555

24 files changed

Lines changed: 475 additions & 594 deletions

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<igx-chips-area (reorder)="chipsOrderChanged($event)">
2-
@for (chip of chipList; track chip) {
3-
<igx-chip [id]="chip.id">
4-
<igx-icon igxPrefix name={{chip.icon}}></igx-icon>
5-
{{chip.text}}
6-
</igx-chip>
7-
}
1+
<igx-chips-area>
2+
@for (chip of chipList; track chip) {
3+
<igx-chip [ngClass]="chip.class">
4+
<igx-icon igxPrefix name={{chip.icon}}></igx-icon>
5+
{{chip.text}}
6+
</igx-chip>
7+
}
88
</igx-chips-area>

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

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

4-
// CSS only approach
4+
// CSS variables approach
55

66
igx-chip {
77
--text-color: #fff;
88
--hover-text-color: #fff;
99
--focus-text-color: #fff;
10-
--border-radius: 5px;
10+
--border-radius: #{rem(5px)};
1111
}
1212

13-
igx-chip[id='1'] {
13+
.xcom {
1414
--background: #000;
1515
--hover-background: #000;
1616
--focus-background: #323232;
1717
}
1818

19-
igx-chip[id='2'] {
19+
.youtube {
2020
--background: #cd201f;
2121
--hover-background: #cd201f;
2222
--focus-background: #9f1717;
2323
}
2424

25-
igx-chip[id='3'] {
25+
.facebook {
2626
--background: #3b5999;
2727
--hover-background: #3b5999;
2828
--focus-background: #2c4378;
2929
}
3030

31-
igx-chip[id='4'] {
31+
.linkedin {
3232
--background: #55acee;
3333
--hover-background: #55acee;
3434
--focus-background: #4682af;
3535
}
3636

37-
igx-icon.igx-icon {
38-
width: 0.75rem;
39-
height: 0.75rem;
37+
igx-icon {
38+
--size: 0.75rem;
4039
}
4140

42-
// SASS approach
41+
// Sass theme approach
4342

4443
// $custom-chip-theme: chip-theme(
4544
// $background: #cd201f,

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

Lines changed: 43 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,51 @@
11
import { ChangeDetectorRef, Component, inject } from '@angular/core';
2-
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxIconService } from 'igniteui-angular';
3-
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

1219
export class ChipStylingSampleComponent {
13-
changeDetectionRef = inject(ChangeDetectorRef);
14-
private iconService = inject(IgxIconService)
15-
16-
public ngOnInit() {
17-
18-
this.iconService.addSvgIconFromText('twitter', '<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>');
19-
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>');
20-
this.iconService.addSvgIconFromText('facebook', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/></svg>');
21-
this.iconService.addSvgIconFromText('linkedin', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>');
22-
}
23-
24-
public chipList = [
25-
{
26-
text: 'X.com',
27-
id: '1',
28-
icon: 'twitter'
29-
},
30-
{
31-
text: 'Youtube',
32-
id: '2',
33-
icon: 'youtube'
34-
},
35-
{
36-
text: 'Facebook',
37-
id: '3',
38-
icon: 'facebook'
39-
},
40-
{
41-
text: 'LinkedIn',
42-
id: '4',
43-
icon: 'linkedin'
44-
}
45-
];
46-
47-
public chipRemoved(event: IBaseChipEventArgs) {
48-
this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
49-
this.changeDetectionRef.detectChanges();
50-
}
51-
52-
public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
53-
const newChipList = [];
54-
for (const chip of event.chipsArray) {
55-
const chipItem = this.chipList.filter((item) => item.id === chip.id)[0];
56-
newChipList.push(chipItem);
57-
}
58-
this.chipList = newChipList;
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+
}
28+
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'
5949
}
50+
];
6051
}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
:host {
2-
::ng-deep {
3-
igx-chip .igx-chip__item{
4-
height: 20px;
5-
font-size: 12px;
6-
}
7-
}
2+
::ng-deep {
3+
.igx-chip__item {
4+
height: 1.25rem;
5+
font-size: 0.75rem;
6+
}
7+
}
88
}
99

1010
igx-chip {
11-
margin-right: 5px;
12-
margin-top: 20px;
11+
margin-right: 0.5rem;
12+
margin-top: 1.25rem;
1313
}
1414

1515
igx-chips-area {
16-
margin-left: 20px;
16+
margin-left: 1.25rem;
1717
}

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
@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" igxRipple>Solid</button>
5-
</div>
6-
<div class="button-sample">
7-
<button igxButton="outlined" igxRipple>Outlined</button>
8-
</div>
9-
<div class="button-sample dashed">
10-
<button igxButton="outlined" igxRipple>Dashed</button>
11-
</div>
12-
<div class="button-sample filled">
13-
<button igxButton="flat" igxRipple>Filled</button>
14-
</div>
15-
<div class="button-sample text">
16-
<button igxButton="flat" igxRipple>Text</button>
17-
</div>
18-
<div class="button-sample link">
19-
<button igxButton="flat" igxRipple>Link</button>
20-
</div>
2+
<div [class]="'buttons-sample-' + (i + 1)">
3+
<div class="button-sample">
4+
<button igxButton="contained">Solid</button>
215
</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>
21+
</div>
2222
}

0 commit comments

Comments
 (0)