From 34654f372bdb317112af41a87131fa97141bace0 Mon Sep 17 00:00:00 2001 From: German Panov Date: Thu, 13 Jun 2024 13:32:34 +0300 Subject: [PATCH] refactor!: use `tui-icon` instead `tui-svg` (#7658) Co-authored-by: taiga-family-bot Co-authored-by: Alex Inkin --- .../navigation/navigation.component.ts | 4 +-- .../navigation/navigation.template.html | 32 +++++++++---------- .../tab-bar/tab-bar-item.component.ts | 4 +-- .../tab-bar/tab-bar-item.style.less | 1 + .../tab-bar/tab-bar-item.template.html | 4 +-- .../components/reorder/reorder.component.ts | 4 +-- .../components/reorder/reorder.style.less | 1 + .../components/reorder/reorder.template.html | 4 +-- .../table-pagination.component.ts | 4 +-- .../table-pagination.style.less | 5 +-- .../table-pagination.template.html | 4 +-- .../components/table/th/th.component.ts | 4 +-- .../components/table/th/th.style.less | 4 +++ .../components/table/th/th.template.html | 6 ++-- .../core/components/tooltip/tooltip.module.ts | 4 +-- .../components/tooltip/tooltip.style.less | 4 +++ .../components/tooltip/tooltip.template.html | 5 +-- projects/icons/all.ts | 12 +++++++ projects/icons/src/tuiIconDragOutline.svg | 18 +++++++++++ .../src/tuiIconMastercardMonoOutline.svg | 28 ++++++++++++++++ projects/icons/src/tuiIconSortOffOutline.svg | 26 +++++++++++++++ .../test/combo-box.component.spec.ts | 13 -------- 22 files changed, 137 insertions(+), 54 deletions(-) create mode 100644 projects/icons/src/tuiIconDragOutline.svg create mode 100644 projects/icons/src/tuiIconMastercardMonoOutline.svg create mode 100644 projects/icons/src/tuiIconSortOffOutline.svg diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts index 122dc3f958a9..551994815607 100644 --- a/projects/addon-doc/components/navigation/navigation.component.ts +++ b/projects/addon-doc/components/navigation/navigation.component.ts @@ -36,9 +36,9 @@ import { TUI_COMMON_ICONS, TuiDataList, TuiExpand, + TuiIconComponent, TuiLinkDirective, TuiScrollbarComponent, - TuiSvgComponent, TuiTextfieldOptionsDirective, } from '@taiga-ui/core'; import {TuiAccordion} from '@taiga-ui/kit'; @@ -66,7 +66,7 @@ import { AsyncPipe, NgForOf, NgIf, - TuiSvgComponent, + TuiIconComponent, PolymorpheusModule, RouterLink, TuiScrollbarComponent, diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html index e6eeee4cf67d..9132b7ed4cdf 100644 --- a/projects/addon-doc/components/navigation/navigation.template.html +++ b/projects/addon-doc/components/navigation/navigation.template.html @@ -24,10 +24,10 @@ [target]="item.target || '_self'" > {{ item.title }} - @@ -41,10 +41,10 @@ (click)="onClick(input)" > {{ item.title }} - @@ -103,10 +103,10 @@ [target]="item.target || '_self'" > {{ item.title }} - @@ -122,10 +122,10 @@ (click)="closeMenu()" > {{ item.title }} - @@ -144,16 +144,16 @@ class="t-sublink t-sublink_subsection" (click)="onGroupClick(index)" > - {{ item.title }} - {{ subPage.title }} - @@ -191,10 +191,10 @@ (click)="closeMenu()" > {{ subPage.title }} - diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts b/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts index dfe29ce7bafb..0cb9ac6db818 100644 --- a/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts +++ b/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts @@ -2,15 +2,15 @@ import {NgIf} from '@angular/common'; import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; import { TUI_ANIMATIONS_SPEED, + TuiIconComponent, tuiScaleIn, - TuiSvgComponent, tuiToAnimationOptions, } from '@taiga-ui/core'; @Component({ standalone: true, selector: 'button[tuiTabBarItem], a[tuiTabBarItem]', - imports: [TuiSvgComponent, NgIf], + imports: [NgIf, TuiIconComponent], templateUrl: './tab-bar-item.template.html', styleUrls: ['./tab-bar-item.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.style.less b/projects/addon-mobile/components/tab-bar/tab-bar-item.style.less index 992af9127ad1..c0ac3e915b52 100644 --- a/projects/addon-mobile/components/tab-bar/tab-bar-item.style.less +++ b/projects/addon-mobile/components/tab-bar/tab-bar-item.style.less @@ -26,6 +26,7 @@ height: 1.75rem; margin: 0.375rem 0 0.125rem; pointer-events: none; + border: 0.125rem solid transparent; } .t-wrapper { diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html b/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html index 2aac9a878929..5b8974364c48 100644 --- a/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html +++ b/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html @@ -1,6 +1,6 @@ - - {{ template }} diff --git a/projects/addon-table/components/table-pagination/table-pagination.component.ts b/projects/addon-table/components/table-pagination/table-pagination.component.ts index cebdb7373d2e..2d02570f700c 100644 --- a/projects/addon-table/components/table-pagination/table-pagination.component.ts +++ b/projects/addon-table/components/table-pagination/table-pagination.component.ts @@ -16,8 +16,8 @@ import { TuiDataList, TuiDropdownDirective, TuiDropdownOpenDirective, + TuiIconComponent, TuiLinkDirective, - TuiSvgComponent, } from '@taiga-ui/core'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; @@ -41,7 +41,7 @@ export interface TuiTablePagination { PolymorpheusModule, NgForOf, TuiDropdownOpenDirective, - TuiSvgComponent, + TuiIconComponent, TuiButtonDirective, ], templateUrl: './table-pagination.template.html', diff --git a/projects/addon-table/components/table-pagination/table-pagination.style.less b/projects/addon-table/components/table-pagination/table-pagination.style.less index e687df44c13c..6ce29d62cc80 100644 --- a/projects/addon-table/components/table-pagination/table-pagination.style.less +++ b/projects/addon-table/components/table-pagination/table-pagination.style.less @@ -21,8 +21,9 @@ } .t-checkmark { - min-width: 1.5rem; - border-left: 5px solid transparent; + min-width: 1rem; + font-size: 1rem; + margin-inline-start: 0.25rem; } .t-back { diff --git a/projects/addon-table/components/table-pagination/table-pagination.template.html b/projects/addon-table/components/table-pagination/table-pagination.template.html index 65b60dac585d..39e68f1e746f 100644 --- a/projects/addon-table/components/table-pagination/table-pagination.template.html +++ b/projects/addon-table/components/table-pagination/table-pagination.template.html @@ -33,10 +33,10 @@ > {{ text }} - diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index f0594c2d3867..d3674bebeb44 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -10,7 +10,7 @@ import { } from '@angular/core'; import type {TuiComparator} from '@taiga-ui/addon-table/types'; import {tuiDefaultSort} from '@taiga-ui/cdk'; -import {TuiSvgComponent} from '@taiga-ui/core'; +import {TuiIconComponent} from '@taiga-ui/core'; import {TuiHeadDirective} from '../directives/head.directive'; import {TuiResizedDirective} from '../directives/resized.directive'; @@ -20,7 +20,7 @@ import {TUI_TABLE_OPTIONS} from '../table.options'; @Component({ standalone: true, selector: 'th[tuiTh]', - imports: [TuiResizedDirective, NgIf, NgTemplateOutlet, TuiSvgComponent, AsyncPipe], + imports: [TuiResizedDirective, NgIf, NgTemplateOutlet, TuiIconComponent, AsyncPipe], templateUrl: './th.template.html', styleUrls: ['./th.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less index ef8fa273ddfb..e51939508cfc 100644 --- a/projects/addon-table/components/table/th/th.style.less +++ b/projects/addon-table/components/table/th/th.style.less @@ -146,3 +146,7 @@ opacity: 1; } } + +.t-icon { + border: 0.25rem solid transparent; +} diff --git a/projects/addon-table/components/table/th/th.template.html b/projects/addon-table/components/table/th/th.template.html index 153eeae745f8..f27eed8f01ce 100644 --- a/projects/addon-table/components/table/th/th.template.html +++ b/projects/addon-table/components/table/th/th.template.html @@ -7,9 +7,9 @@ > {{ table.change$ | async }} - diff --git a/projects/core/components/tooltip/tooltip.module.ts b/projects/core/components/tooltip/tooltip.module.ts index 24bb8ba8a123..66a0e7eee918 100644 --- a/projects/core/components/tooltip/tooltip.module.ts +++ b/projects/core/components/tooltip/tooltip.module.ts @@ -1,6 +1,6 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {TuiSvgComponent} from '@taiga-ui/core/components/svg'; +import {TuiIconComponent} from '@taiga-ui/core/components/icon'; import {TuiAppearanceDirective} from '@taiga-ui/core/directives'; import {TuiHint} from '@taiga-ui/core/directives/hint'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; @@ -10,7 +10,7 @@ import {TuiTooltipComponent} from './tooltip.component'; @NgModule({ imports: [ CommonModule, - TuiSvgComponent, + TuiIconComponent, TuiHint, PolymorpheusModule, TuiAppearanceDirective, diff --git a/projects/core/components/tooltip/tooltip.style.less b/projects/core/components/tooltip/tooltip.style.less index c3c2d1ea2789..efdd634bf200 100644 --- a/projects/core/components/tooltip/tooltip.style.less +++ b/projects/core/components/tooltip/tooltip.style.less @@ -24,3 +24,7 @@ width: 100%; height: 100%; } + +.t-icon { + border: 0.25rem solid transparent; +} diff --git a/projects/core/components/tooltip/tooltip.template.html b/projects/core/components/tooltip/tooltip.template.html index 79b8b0f8a688..754f967a94c6 100644 --- a/projects/core/components/tooltip/tooltip.template.html +++ b/projects/core/components/tooltip/tooltip.template.html @@ -12,8 +12,9 @@ [tuiHintHideDelay]="hideDelay" [tuiHintShowDelay]="showDelay" > - diff --git a/projects/icons/all.ts b/projects/icons/all.ts index 37a83982b4ef..cf014fa624a7 100644 --- a/projects/icons/all.ts +++ b/projects/icons/all.ts @@ -996,6 +996,9 @@ const tuiIconDrag = const tuiIconDragLarge = ''; +const tuiIconDragOutline = + ''; + const tuiIconDribbble = ''; @@ -1650,6 +1653,9 @@ const tuiIconMastercard = const tuiIconMastercardMono = ''; +const tuiIconMastercardMonoOutline = + ''; + const tuiIconMastercardOutline = ''; @@ -2424,6 +2430,9 @@ const tuiIconSortDescendingOutline = const tuiIconSortOff = ''; +const tuiIconSortOffOutline = + ''; + const tuiIconSound = ''; @@ -3454,6 +3463,7 @@ export { tuiIconDraft, tuiIconDrag, tuiIconDragLarge, + tuiIconDragOutline, tuiIconDribbble, tuiIconDribbbleLarge, tuiIconDribbbleOutline, @@ -3672,6 +3682,7 @@ export { tuiIconMapPinOutline, tuiIconMastercard, tuiIconMastercardMono, + tuiIconMastercardMonoOutline, tuiIconMastercardOutline, tuiIconMaximize, tuiIconMaximize2, @@ -3930,6 +3941,7 @@ export { tuiIconSortDescending, tuiIconSortDescendingOutline, tuiIconSortOff, + tuiIconSortOffOutline, tuiIconSound, tuiIconSoundLarge, tuiIconSoundOff, diff --git a/projects/icons/src/tuiIconDragOutline.svg b/projects/icons/src/tuiIconDragOutline.svg new file mode 100644 index 000000000000..38e86259308e --- /dev/null +++ b/projects/icons/src/tuiIconDragOutline.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/projects/icons/src/tuiIconMastercardMonoOutline.svg b/projects/icons/src/tuiIconMastercardMonoOutline.svg new file mode 100644 index 000000000000..2912d43f5174 --- /dev/null +++ b/projects/icons/src/tuiIconMastercardMonoOutline.svg @@ -0,0 +1,28 @@ + + + + + + + + + diff --git a/projects/icons/src/tuiIconSortOffOutline.svg b/projects/icons/src/tuiIconSortOffOutline.svg new file mode 100644 index 000000000000..6abf04b6e1e1 --- /dev/null +++ b/projects/icons/src/tuiIconSortOffOutline.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + diff --git a/projects/legacy/components/combo-box/test/combo-box.component.spec.ts b/projects/legacy/components/combo-box/test/combo-box.component.spec.ts index 4d4d5e35d40f..291058a82b75 100644 --- a/projects/legacy/components/combo-box/test/combo-box.component.spec.ts +++ b/projects/legacy/components/combo-box/test/combo-box.component.spec.ts @@ -3,7 +3,6 @@ import {Component, ViewChild} from '@angular/core'; import type {ComponentFixture} from '@angular/core/testing'; import {TestBed} from '@angular/core/testing'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; -import {By} from '@angular/platform-browser'; import type {TuiIdentityMatcher, TuiStringHandler} from '@taiga-ui/cdk'; import {TUI_DEFAULT_IDENTITY_MATCHER} from '@taiga-ui/cdk'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; @@ -216,18 +215,6 @@ describe('ComboBox', () => { expect(testComponent.component.open).toBe(true); }); }); - - describe('readonly state', () => { - beforeEach(() => { - testComponent.readOnly = true; - fixture.detectChanges(); - }); - - it('should be no icon', () => { - fixture.debugElement.query(By.css('.t-icon')); - expect(fixture.debugElement.query(By.css('.t-icon'))).toBeFalsy(); - }); - }); }); function getValue(): DebugElement | null {