Skip to content

Commit b3ac927

Browse files
authored
refactor(*): update icon reference names for tree, combo and select (#14561)
1 parent c4fd587 commit b3ac927

File tree

9 files changed

+31
-33
lines changed

9 files changed

+31
-33
lines changed

projects/igniteui-angular/src/lib/combo/combo.common.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -974,8 +974,8 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
974974
private _defaultFilteringOptions: IComboFilteringOptions = { caseSensitive: false, filterable: true };
975975
private _icons = [
976976
{
977-
name: 'expand',
978-
family: 'combo',
977+
name: 'input_expand',
978+
family: 'default',
979979
ref: new Map(Object.entries({
980980
'material': {
981981
name: 'expand_more',
@@ -988,8 +988,8 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
988988
}))
989989
},
990990
{
991-
name: 'collapse',
992-
family: 'combo',
991+
name: 'input_collapse',
992+
family: 'default',
993993
ref: new Map(Object.entries({
994994
'material': {
995995
name: 'expand_less',
@@ -1017,7 +1017,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
10171017
},
10181018
{
10191019
name: 'case-sensitive',
1020-
family: 'combo',
1020+
family: 'default',
10211021
ref: new Map(Object.entries({
10221022
'material': {
10231023
name: 'case-sensitive',
@@ -1200,7 +1200,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
12001200

12011201
/** @hidden @internal */
12021202
public get toggleIcon(): string {
1203-
return this.dropdown.collapsed ? 'expand' : 'collapse';
1203+
return this.dropdown.collapsed ? 'input_expand' : 'input_collapse';
12041204
}
12051205

12061206
/** @hidden @internal */

projects/igniteui-angular/src/lib/combo/combo.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<ng-container *ngIf="toggleIconTemplate">
2929
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
3030
</ng-container>
31-
<igx-icon *ngIf="!toggleIconTemplate" family="combo" [name]="toggleIcon"></igx-icon>
31+
<igx-icon *ngIf="!toggleIconTemplate" family="default" [name]="toggleIcon"></igx-icon>
3232
</igx-suffix>
3333
</igx-input-group>
3434
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down"
@@ -44,7 +44,7 @@
4444
<igx-suffix *ngIf="showSearchCaseIcon" (click)="toggleCaseSensitive()">
4545
<span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
4646
<igx-icon
47-
family="combo"
47+
family="default"
4848
name="case-sensitive"
4949
[active]="filteringOptions.caseSensitive">
5050
</igx-icon>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -388,14 +388,14 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
388388

389389
const icon = GridFunctions.getExcelFilterTreeNodeIcon(fix, 0);
390390
let iconText = icon.children[0].innerText;
391-
expect(iconText).toBe('keyboard_arrow_right', 'incorrect rendered icon');
391+
expect(iconText).toBe('chevron_right', 'incorrect rendered icon');
392392

393393
GridFunctions.clickExcelTreeNodeExpandIcon(fix, 0);
394394
fix.detectChanges();
395395
tick();
396396

397397
iconText = icon.children[0].innerText;
398-
expect(iconText).toBe('keyboard_arrow_down', 'incorrect rendered icon');
398+
expect(iconText).toBe('expand_more', 'incorrect rendered icon');
399399
}));
400400

401401
it('Should display Select All item', fakeAsync(() => {

projects/igniteui-angular/src/lib/icon/reference_table.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ Default Component Icons:
305305
| default | first_page | material | first_page | Grid, Paginator | All |
306306
| default | last_page | material | last_page | Grid, Paginator | All |
307307
| default | chevron_left | material | chevron_left | Grid, Paginator | All |
308-
| default | chevron_right | material | chevron_right | Grid, Paginator, Excel Style Filtering | All |
308+
| default | chevron_right | material | chevron_right | Grid, Paginator, Excel Style Filtering, TreeNode | All |
309309
| default | refresh | material | refresh | Grid, Filtering Row | All |
310310
| default | visibility | material | visibility | Grid, Excel Style Filtering | All |
311311
| default | visibility_off | material | visibility_off | Grid, Excel Style Filtering | All |
@@ -315,15 +315,13 @@ Default Component Icons:
315315
| default | arrow_downward | material | arrow_downward | Grid, Excel Style Filtering | All |
316316
| default | today | material | today | Date Picker | All |
317317
| default | date_range | material | date_range | Date Range Picker | All |
318-
| default | expand | material | arrow_drop_down | Grid | All |
318+
| default | expand | material | arrow_drop_down | Grid, TreeNode | All |
319319
| default | import_export | material | import_export | Grid | All |
320320
| default | table_rows | material | table_rows | Grid | All |
321321
| default | view_column | material | view_column | Grid | All |
322322
| default | functions | material | functions | Grid, Pivot Data Selector | All |
323-
| combo | expand | material | expand_more | Combo, Simple Combo, Select | Material |
324-
| combo | collapse | material | expand_less | Combo, Simple Combo, Select | Material |
325-
| combo | expand | material | arrow_drop_down | Combo, Simple Combo, Select | Indigo, Fluent, Bootstrap |
326-
| combo | collapse | material | arrow_drop_up | Combo, Simple Combo, Select | Indigo, Fluent, Bootstrap |
327-
| combo | case-sensitive | imx-icons | case-sensitive | Combo, Simple Combo | All |
328-
| tree | expand | material | keyboard_arrow_right | TreeNode | All |
329-
| tree | collapse | material | keyboard_arrow_down | TreeNode | All |
323+
| default | input_expand | material | expand_more | Combo, Simple Combo, Select | Material |
324+
| default | input_collapse | material | expand_less | Combo, Simple Combo, Select | Material |
325+
| default | input_expand | material | arrow_drop_down | Combo, Simple Combo, Select | Indigo, Fluent, Bootstrap |
326+
| default | input_collapse | material | arrow_drop_up | Combo, Simple Combo, Select | Indigo, Fluent, Bootstrap |
327+
| default | case-sensitive | imx-icons | case-sensitive | Combo, Simple Combo | All |

projects/igniteui-angular/src/lib/select/select.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<ng-container *ngIf="toggleIconTemplate">
2727
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
2828
</ng-container>
29-
<igx-icon *ngIf="!toggleIconTemplate" family="combo" [name]="toggleIcon"></igx-icon>
29+
<igx-icon *ngIf="!toggleIconTemplate" family="default" [name]="toggleIcon"></igx-icon>
3030
</igx-suffix>
3131
<ng-container ngProjectAs="igx-hint, [igxHint]" >
3232
<ng-content select="igx-hint, [igxHint]"></ng-content>

projects/igniteui-angular/src/lib/select/select.component.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,8 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
282282
private _type = null;
283283
private _icons = [
284284
{
285-
name: 'expand',
286-
family: 'combo',
285+
name: 'input_expand',
286+
family: 'default',
287287
ref: new Map(Object.entries({
288288
'material': {
289289
name: 'expand_more',
@@ -296,8 +296,8 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
296296
}))
297297
},
298298
{
299-
name: 'collapse',
300-
family: 'combo',
299+
name: 'input_collapse',
300+
family: 'default',
301301
ref: new Map(Object.entries({
302302
'material': {
303303
name: 'expand_less',
@@ -604,7 +604,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
604604

605605
/** @hidden @internal */
606606
public get toggleIcon(): string {
607-
return this.collapsed ? 'expand' : 'collapse';
607+
return this.collapsed ? 'input_expand' : 'input_collapse';
608608
}
609609

610610
/**

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
</igx-suffix>
3434

3535
<igx-suffix *ngIf="showSearchCaseIcon">
36-
<igx-icon family="combo" name="case-sensitive" [active]="filteringOptions.caseSensitive"
36+
<igx-icon family="default" name="case-sensitive" [active]="filteringOptions.caseSensitive"
3737
(click)="toggleCaseSensitive()">
3838
</igx-icon>
3939
</igx-suffix>
@@ -42,7 +42,7 @@
4242
<ng-container *ngIf="toggleIconTemplate">
4343
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
4444
</ng-container>
45-
<igx-icon *ngIf="!toggleIconTemplate" family="combo" [name]="toggleIcon"></igx-icon>
45+
<igx-icon *ngIf="!toggleIconTemplate" family="default" [name]="toggleIcon"></igx-icon>
4646
</igx-suffix>
4747

4848
</igx-input-group>

projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<ng-template #defaultIndicator>
1919
<igx-icon
2020
[attr.aria-label]="expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand"
21-
[name]="!expanded ? 'expand' : 'collapse'"
22-
family="tree"
21+
[name]="!expanded ? 'chevron_right' : 'expand'"
22+
family="default"
2323
>
2424
</igx-icon>
2525
</ng-template>

projects/igniteui-angular/src/lib/tree/tree.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -336,13 +336,13 @@ export class IgxTreeComponent implements IgxTree, OnInit, AfterViewInit, OnDestr
336336
this.treeService.register(this);
337337
this.navService.register(this);
338338

339-
iconService?.addIconRef('expand', 'tree', {
340-
name: 'keyboard_arrow_right',
339+
iconService?.addIconRef('chevron_right', 'default', {
340+
name: 'chevron_right',
341341
family: 'material'
342342
});
343343

344-
iconService?.addIconRef('collapse', 'tree', {
345-
name: 'keyboard_arrow_down',
344+
iconService?.addIconRef('expand', 'default', {
345+
name: 'expand_more',
346346
family: 'material'
347347
});
348348
}

0 commit comments

Comments
 (0)