Skip to content

Commit

Permalink
refactor!: rename icons
Browse files Browse the repository at this point in the history
  • Loading branch information
vladimirpotekhin committed Jun 17, 2024
1 parent 9fc0b12 commit 825a63d
Show file tree
Hide file tree
Showing 1,745 changed files with 1,051 additions and 748 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('InputCardGrouped', () => {
/>
<ng-template #customIconTemplate>
<tui-icon icon="tuiIconVisa" />
<tui-icon icon="@tui.visa" />
</ng-template>
`,
})
Expand Down Expand Up @@ -186,7 +186,7 @@ describe('InputCardGrouped', () => {

it('input-card-grouped have a default icon', () => {
expect(testComponent.control.valid).toBe(true);
expect(testComponent.component['content']).toBe('tuiIconVisa');
expect(testComponent.component['content']).toBe('@tui.visa');
expect(testComponent.control.value?.card).toBe('4111111111111111');
expect(expectCardOutlet()).toBeTruthy();
});
Expand Down
28 changes: 14 additions & 14 deletions projects/addon-commerce/tokens/payment-system-icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ import {tuiCreateToken} from '@taiga-ui/cdk';

export const TUI_PAYMENT_SYSTEM_ICONS: InjectionToken<Record<TuiPaymentSystem, string>> =
tuiCreateToken({
mir: 'tuiIconMir',
visa: 'tuiIconVisa',
electron: 'tuiIconElectron',
mastercard: 'tuiIconMastercard',
maestro: 'tuiIconMaestro',
amex: 'tuiIconAmex',
dinersclub: 'tuiIconDinersClub',
discover: 'tuiIconDiscover',
humo: 'tuiIconHumo',
jcb: 'tuiIconJCB',
rupay: 'tuiIconRuPay',
unionpay: 'tuiIconUnionPay',
uzcard: 'tuiIconUzcard',
verve: 'tuiIconVerve',
mir: '@tui.mir',
visa: '@tui.visa',
electron: '@tui.electron',
mastercard: '@tui.mastercard',
maestro: '@tui.maestro',
amex: '@tui.amex',
dinersclub: '@tui.diners-club',
discover: '@tui.discover',
humo: '@tui.humo',
jcb: '@tui.jcb',
rupay: '@tui.ru-pay',
unionpay: '@tui.union-pay',
uzcard: '@tui.uzcard',
verve: '@tui.verve',
});
2 changes: 1 addition & 1 deletion projects/addon-doc/components/code/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
appearance="icon"
size="xs"
class="t-copy-button"
[iconLeft]="(icon$ | async) || 'tuiIconCopy'"
[iconLeft]="(icon$ | async) || '@tui.copy'"
[cdkCopyToClipboard]="content"
(click)="copy$.next()"
>
Expand Down
4 changes: 2 additions & 2 deletions projects/addon-doc/components/code/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export class TuiDocCodeComponent {
protected readonly icon$ = this.copy$.pipe(
switchMap(() =>
timer(2000).pipe(
map(() => 'tuiIconCopy'),
startWith('tuiIconCheck'),
map(() => '@tui.copy'),
startWith('@tui.check'),
),
),
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ describe('TuiDocCodeComponent', () => {
expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
`<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">5</span>;</code>
<div class="t-code-actions">
<button tuiappearance="" tuiicons="" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button _icon-left" data-appearance="icon" style="--t-mask-left: url(assets/taiga-ui/icons/tuiIconCopy.svg); --t-mask-right: url();" data-size="xs">
<button tuiappearance="" tuiicons="" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button _icon-left" data-appearance="icon" style="--t-mask-left: url(assets/taiga-ui/icons/copy.svg); --t-mask-right: url();" data-size="xs">
</button>
\t
</div>`.replace('\t', ' '), // prettier problem
Expand All @@ -71,7 +71,7 @@ describe('TuiDocCodeComponent', () => {
expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
`<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">10</span>;</code>
<div class="t-code-actions">
<button tuiappearance="" tuiicons="" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button _icon-left" data-appearance="icon" style="--t-mask-left: url(assets/taiga-ui/icons/tuiIconCopy.svg); --t-mask-right: url();" data-size="xs">
<button tuiappearance="" tuiicons="" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button _icon-left" data-appearance="icon" style="--t-mask-left: url(assets/taiga-ui/icons/copy.svg); --t-mask-right: url();" data-size="xs">
</button>
\t
</div>`.replace('\t', ' '), // prettier problem
Expand All @@ -89,7 +89,7 @@ describe('TuiDocCodeComponent', () => {
expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
`<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">15</span>;</code>
<div class="t-code-actions">
<button tuiappearance="" tuiicons="" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button _icon-left" data-appearance="icon" style="--t-mask-left: url(assets/taiga-ui/icons/tuiIconCopy.svg); --t-mask-right: url();" data-size="xs">
<button tuiappearance="" tuiicons="" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button _icon-left" data-appearance="icon" style="--t-mask-left: url(assets/taiga-ui/icons/copy.svg); --t-mask-right: url();" data-size="xs">
</button>
\t
</div>`.replace('\t', ' '), // prettier problem
Expand Down
2 changes: 1 addition & 1 deletion projects/addon-doc/components/example/example.options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS: TuiDocExampleOptions = {
),
tabTitles: new Map(),
fullsize: true,
linkIcon: 'tuiIconLink',
linkIcon: '@tui.link',
};

/**
Expand Down
10 changes: 5 additions & 5 deletions projects/addon-doc/tokens/doc-icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ export interface TuiDocIcons {
}

export const TUI_DOC_DEFAULT_ICONS: TuiDocIcons = {
search: 'tuiIconSearch',
light: 'tuiIconSun',
dark: 'tuiIconMoon',
code: 'tuiIconCode',
menu: 'tuiIconMenu',
search: '@tui.search',
light: '@tui.sun',
dark: '@tui.moon',
code: '@tui.code',
menu: '@tui.menu',
};

export const TUI_DOC_ICONS = tuiCreateToken(TUI_DOC_DEFAULT_ICONS);
Expand Down
6 changes: 3 additions & 3 deletions projects/addon-table/components/reorder/reorder.options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export interface TuiReorderOptions {

export const TUI_REORDER_DEFAULT_OPTIONS: TuiReorderOptions = {
icons: {
hide: 'tuiIconEye',
show: 'tuiIconEyeOff',
drag: 'tuiIconGripVertical',
hide: '@tui.eye',
show: '@tui.eye-off',
drag: '@tui.grip-vertical',
},
};

Expand Down
6 changes: 3 additions & 3 deletions projects/addon-table/components/table/table.options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export const TUI_TABLE_DEFAULT_OPTIONS: TuiTableOptions = {
size: 'm',
direction: 1,
sortIcons: {
asc: 'tuiIconChevronUp',
desc: 'tuiIconChevronDown',
off: 'tuiIconChevronsUpDown',
asc: '@tui.chevron-up',
desc: '@tui.chevron-down',
off: '@tui.chevrons-up-down',
},
};

Expand Down
94 changes: 47 additions & 47 deletions projects/cdk/constants/used-icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,51 @@
* Array of icons used in taiga-ui components
*/
export const TUI_USED_ICONS = [
'tuiIconMir',
'tuiIconVisa',
'tuiIconElectron',
'tuiIconMastercard',
'tuiIconMaestro',
'tuiIconAmex',
'tuiIconDinersClub',
'tuiIconDiscover',
'tuiIconHumo',
'tuiIconJCB',
'tuiIconRuPay',
'tuiIconUnionPay',
'tuiIconUzcard',
'tuiIconVerve',
'tuiIconCopy',
'tuiIconCheck',
'tuiIconLink',
'tuiIconSearch',
'tuiIconSun',
'tuiIconMoon',
'tuiIconCode',
'tuiIconMenu',
'tuiIconEye',
'tuiIconEyeOff',
'tuiIconGripVertical',
'tuiIconChevronUp',
'tuiIconChevronDown',
'tuiIconChevronsUpDown',
'tuiIconInfo',
'tuiIconCircleCheck',
'tuiIconCircleX',
'tuiIconCircleAlert',
'tuiIconX',
'tuiIconCircleHelp',
'tuiIconChevronRight',
'tuiIconChevronLeft',
'tuiIconCalendar',
'tuiIconMinus',
'tuiIconFile',
'tuiIconTrash',
'tuiIconStar',
'tuiIconRotateCcwSquare',
'tuiIconArrowLeft',
'tuiIconArrowRight',
'tuiIconPlus',
'tuiIconMinimize',
'tuiIconClock',
'@tui.mir',
'@tui.visa',
'@tui.electron',
'@tui.mastercard',
'@tui.maestro',
'@tui.amex',
'@tui.diners-club',
'@tui.discover',
'@tui.humo',
'@tui.jcb',
'@tui.ru-pay',
'@tui.union-pay',
'@tui.uzcard',
'@tui.verve',
'@tui.copy',
'@tui.check',
'@tui.link',
'@tui.search',
'@tui.sun',
'@tui.moon',
'@tui.code',
'@tui.menu',
'@tui.eye',
'@tui.eye-off',
'@tui.grip-vertical',
'@tui.chevron-up',
'@tui.chevron-down',
'@tui.chevrons-up-down',
'@tui.info',
'@tui.circle-check',
'@tui.circle-x',
'@tui.circle-alert',
'@tui.x',
'@tui.circle-help',
'@tui.chevron-right',
'@tui.chevron-left',
'@tui.minus',
'@tui.file',
'@tui.trash',
'@tui.star',
'@tui.calendar',
'@tui.rotate-ccw-square',
'@tui.arrow-left',
'@tui.arrow-right',
'@tui.plus',
'@tui.minimize',
'@tui.clock',
] as const;
10 changes: 5 additions & 5 deletions projects/core/components/notification/notification.options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ export interface TuiNotificationOptions {
}

const STATUS_ICON = {
info: 'tuiIconInfo',
success: 'tuiIconCircleCheck',
error: 'tuiIconCircleX',
warning: 'tuiIconCircleAlert',
neutral: 'tuiIconInfo',
info: '@tui.info',
success: '@tui.circle-check',
error: '@tui.circle-x',
warning: '@tui.circle-alert',
neutral: '@tui.info',
} as const;

/** Default values for the notification options. */
Expand Down
2 changes: 1 addition & 1 deletion projects/core/components/textfield/textfield.template.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<button
*ngIf="options.cleaner"
appearance="icon"
iconLeft="tuiIconX"
iconLeft="@tui.x"
size="xs"
tabindex="-1"
tuiIconButton
Expand Down
2 changes: 1 addition & 1 deletion projects/core/directives/hint/hint-options.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const TUI_HINT_DEFAULT_OPTIONS: TuiHintOptions = {
showDelay: 500,
hideDelay: 200,
appearance: '',
icon: 'tuiIconCircleHelp',
icon: '@tui.circle-help',
};

/**
Expand Down
8 changes: 4 additions & 4 deletions projects/core/tokens/common-icon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import type {Provider} from '@angular/core';
import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';

const COMMON_ICONS: TuiCommonIcons = {
check: 'tuiIconCheck',
close: 'tuiIconX',
error: 'tuiIconCircleAlert',
more: 'tuiIconChevronRight',
check: '@tui.check',
close: '@tui.x',
error: '@tui.circle-alert',
more: '@tui.chevron-right',
};

export interface TuiCommonIcons {
Expand Down
5 changes: 4 additions & 1 deletion projects/core/tokens/icon-resolver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ export const TUI_ICON_RESOLVER = tuiCreateTokenFromFactory<TuiStringHandler<stri
() => {
const path = inject(TUI_ASSETS_PATH);

return icon => (!icon || icon.includes('/') ? icon : `${path}${icon}.svg`);
return icon =>
!icon || icon.includes('/')
? icon
: `${path}${icon.replace('@tui.', '')}.svg`;
},
);

Expand Down
4 changes: 2 additions & 2 deletions projects/core/tokens/spin-icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ export interface TuiSpinIcons {
}

export const TUI_SPIN_ICONS = tuiCreateToken<TuiSpinIcons>({
decrement: 'tuiIconChevronLeft',
increment: 'tuiIconChevronRight',
decrement: '@tui.chevron-left',
increment: '@tui.chevron-right',
});
Original file line number Diff line number Diff line change
Expand Up @@ -1403,7 +1403,7 @@ test.describe('InputPhone', () => {
test('filler', async ({page}) => {
await tuiGoto(
page,
'/components/input-phone/API?tuiTextfieldCustomContent=tuiIconMastercardMono&phoneMaskAfterCountryCode=(%23%23%23)%20%23%23%23-%23%23-%23%23&tuiTextfieldCleaner=true&focusable=true&tuiTextfieldPrefix=&tuiTextfieldPostfix=&tuiTextfieldFiller=57567567&tuiTextfieldSize=l&search=q3e',
'/components/input-phone/API?tuiTextfieldCustomContent=@tui.mastercard-mono&phoneMaskAfterCountryCode=(%23%23%23)%20%23%23%23-%23%23-%23%23&tuiTextfieldCleaner=true&focusable=true&tuiTextfieldPrefix=&tuiTextfieldPostfix=&tuiTextfieldFiller=57567567&tuiTextfieldSize=l&search=q3e',
);

const example = new TuiDocumentationApiPagePO(page).apiPageExample;
Expand Down
10 changes: 5 additions & 5 deletions projects/demo-playwright/tests/kit/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ test.describe('Input', () => {
test('correctly aligns single custom content (as large icon)', async ({page}) => {
await tuiGoto(
page,
'/components/input/API?tuiTextfieldCustomContent=tuiIconCalendar',
'/components/input/API?tuiTextfieldCustomContent=@tui.calendar',
);
await expect(new TuiDocumentationPagePO(page).apiPageExample).toHaveScreenshot(
'02-custom-large-icon-content.png',
Expand All @@ -30,7 +30,7 @@ test.describe('Input', () => {
}) => {
await tuiGoto(
page,
'/components/input/API?tuiTextfieldCleaner=true&tuiTextfieldCustomContent=tuiIconSearch&tuiHintContent=Some%20content',
'/components/input/API?tuiTextfieldCleaner=true&tuiTextfieldCustomContent=@tui.search&tuiHintContent=Some%20content',
);

await expect(new TuiDocumentationPagePO(page).apiPageExample).toHaveScreenshot(
Expand All @@ -43,7 +43,7 @@ test.describe('Input', () => {
}) => {
await tuiGoto(
page,
'components/input/API?tuiTextfieldCleaner=true&tuiTextfieldCustomContent=tuiIconVisaMono&tuiHintContent=Some%20content',
'components/input/API?tuiTextfieldCleaner=true&tuiTextfieldCustomContent=@tui.visa-mono&tuiHintContent=Some%20content',
);

await expect(new TuiDocumentationPagePO(page).apiPageExample).toHaveScreenshot(
Expand All @@ -54,7 +54,7 @@ test.describe('Input', () => {
test('input overflow due to placeholder', async ({page}) => {
await tuiGoto(
page,
'components/input/API?tuiTextfieldIconLeft=tuiIconSearch&pseudoFocus=true&placeholder=Lorem%20ipsum%20dolor%20sit%20amet,%20consectetur%20adipiscing%20elit,%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore',
'components/input/API?tuiTextfieldIconLeft=@tui.search&pseudoFocus=true&placeholder=Lorem%20ipsum%20dolor%20sit%20amet,%20consectetur%20adipiscing%20elit,%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore',
);

const example = new TuiDocumentationPagePO(page).apiPageExample;
Expand Down Expand Up @@ -133,7 +133,7 @@ test.describe('Input', () => {
test(`size=${size}`, async ({page}) => {
await tuiGoto(
page,
`components/input/API?tuiTextfieldIcon=tuiIconCalendar&tuiTextfieldCleaner=true&tuiTextfieldSize=${size}`,
`components/input/API?tuiTextfieldIcon=@tui.calendar&tuiTextfieldCleaner=true&tuiTextfieldSize=${size}`,
);
await expect(
new TuiDocumentationPagePO(page).apiPageExample,
Expand Down
10 changes: 5 additions & 5 deletions projects/demo/src/modules/components/abstract/control.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ export abstract class AbstractExampleTuiControl
public readonly customContentVariants: PolymorpheusContent[] = [
'',
CUSTOM_SVG_NAME,
'tuiIconSearch',
'tuiIconCalendar',
'tuiIconVisaMono',
'tuiIconMastercardMono',
'@tui.search',
'@tui.calendar',
'@tui.visa-mono',
'@tui.mastercard-mono',
];

public customContentSelected = this.customContentVariants[0];
Expand All @@ -85,7 +85,7 @@ export abstract class AbstractExampleTuiControl

public filler = '';

public readonly iconLeftVariants = ['', 'tuiIconMail', 'tuiIconPieChart'];
public readonly iconLeftVariants = ['', '@tui.mail', '@tui.pie-chart'];

public iconLeft = this.iconLeftVariants[0];

Expand Down
Loading

0 comments on commit 825a63d

Please sign in to comment.