refactor(kit): Tabs use Icons (#7177)

taiga-family · Apr 5, 2024 · c3d99ae · c3d99ae
1 parent dce51b2
commit c3d99ae
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 81 deletions.
diff --git a/projects/demo/src/modules/components/tabs/examples/1/index.html b/projects/demo/src/modules/components/tabs/examples/1/index.html
@@ -1,38 +1,28 @@
 <tui-tabs [(activeItemIndex)]="activeItemIndex">
     <button
+        iconLeft="tuiIconCreditCard"
         tuiTab
         (click)="onClick('Maps')"
     >
-        <tui-svg
-            src="tuiIconCreditCard"
-            class="tui-space_right-2"
-        />
         Maps
     </button>
     <button
         disabled
+        iconLeft="tuiIconPhone"
         tuiTab
         (click)="onClick('Calls')"
     >
-        <tui-svg
-            src="tuiIconPhone"
-            class="tui-space_right-2"
-        />
         Calls
     </button>
     <button
+        iconLeft="tuiIconSettings"
         tuiTab
         (click)="onClick('Settings')"
     >
-        <tui-svg
-            src="tuiIconSettings"
-            class="tui-space_right-2"
-        />
         Settings
     </button>
 </tui-tabs>
 <tui-input-number
-    decimal="never"
     class="tui-space_top-4"
     [max]="2"
     [min]="0"

diff --git a/projects/demo/src/modules/components/tabs/examples/2/index.html b/projects/demo/src/modules/components/tabs/examples/2/index.html
@@ -4,63 +4,47 @@
 >
     <button
         *tuiItem
+        iconLeft="tuiIconCreditCard"
         tuiTab
         (click)="onClick('Maps')"
     >
-        <tui-svg
-            src="tuiIconCreditCard"
-            class="tui-space_right-2"
-        />
         Maps
     </button>
     <button
         *tuiItem
         disabled
+        iconLeft="tuiIconPhone"
         tuiTab
         (click)="onClick('Calls')"
     >
-        <tui-svg
-            src="tuiIconPhone"
-            class="tui-space_right-2"
-        />
         Calls
     </button>
     <button
         *tuiItem
+        iconLeft="tuiIconSettings"
         tuiTab
         (click)="onClick('Settings')"
     >
-        <tui-svg
-            src="tuiIconSettings"
-            class="tui-space_right-2"
-        />
         Settings
     </button>
     <button
         *tuiItem
+        iconLeft="tuiIconHeart"
         tuiTab
         (click)="onClick('Favorite')"
     >
-        <tui-svg
-            src="tuiIconHeart"
-            class="tui-space_right-2"
-        />
         Favorite
     </button>
     <button
         *tuiItem
+        iconLeft="tuiIconTrash"
         tuiTab
         (click)="onClick('Trash')"
     >
-        <tui-svg
-            src="tuiIconTrash"
-            class="tui-space_right-2"
-        />
         Trash
     </button>
 </tui-tabs-with-more>
 <tui-input-number
-    decimal="never"
     class="tui-space_top-4"
     [max]="4"
     [min]="0"

diff --git a/projects/demo/src/modules/components/tabs/examples/3/index.html b/projects/demo/src/modules/components/tabs/examples/3/index.html
@@ -23,18 +23,13 @@ <h1 class="tui-text_h3 title">Monty Python</h1>
             <ng-template #submenu>
                 <button
                     *tuiItem
+                    tuiChevron
                     tuiTab
                     [tuiDropdown]="dropdown"
                     [(tuiDropdownOpen)]="open"
                     (tui-tab-activate)="stop($event)"
                 >
                     Collaborators
-                    <!--TODO: Switch to tuiChevron-->
-                    <tui-svg
-                        src="tuiIconChevronDown"
-                        class="icon"
-                        [class.icon_rotated]="open"
-                    />
                 </button>
             </ng-template>
         </ng-container>
@@ -57,5 +52,5 @@ <h1 class="tui-text_h3 title">Monty Python</h1>
     </tui-data-list>
 </ng-template>
 <ng-template #more>
-    <tui-svg src="tuiIconMoreHorizontalLarge" />
+    <tui-icon icon="tuiIconMoreHorizontal" />
 </ng-template>
diff --git a/projects/demo/src/modules/components/tabs/examples/4/index.html b/projects/demo/src/modules/components/tabs/examples/4/index.html
@@ -8,9 +8,9 @@
         >
             {{ step }}
         </button>
-        <tui-svg
+        <tui-icon
             *ngIf="!last"
-            src="tuiIconChevronRight"
+            icon="tuiIconChevronRight"
             class="separator"
         />
     </ng-container>

diff --git a/projects/demo/src/modules/components/tabs/examples/4/index.less b/projects/demo/src/modules/components/tabs/examples/4/index.less
@@ -13,6 +13,7 @@
 
 .separator {
     height: 100%;
-    color: var(--tui-base-03);
-    margin: 0 0.75rem;
+    color: var(--tui-text-03);
+    margin: 0 1rem;
+    font-size: 1rem;
 }
diff --git a/projects/demo/src/modules/components/tabs/examples/5/index.html b/projects/demo/src/modules/components/tabs/examples/5/index.html
@@ -10,9 +10,10 @@
             (keydown.delete)="remove(item)"
         >
             {{ item }}
-            <tui-svg
-                src="tuiIconClose"
+            <tui-icon
+                icon="tuiIconClose"
                 class="tui-space_left-2"
+                [style.font-size.rem]="1"
                 (click.stop)="remove(item)"
             />
         </button>

diff --git a/projects/demo/src/modules/components/tabs/tabs.module.ts b/projects/demo/src/modules/components/tabs/tabs.module.ts
@@ -8,12 +8,12 @@ import {
     TuiButtonDirective,
     TuiDataListModule,
     TuiDropdownModule,
+    TuiIconComponent,
     TuiModeModule,
     TuiNotificationModule,
     TuiScrollbarComponent,
-    TuiSvgModule,
 } from '@taiga-ui/core';
-import {TuiInputNumberModule, TuiTabsModule} from '@taiga-ui/kit';
+import {TuiChevronDirective, TuiInputNumberModule, TuiTabsModule} from '@taiga-ui/kit';
 
 import {TuiTabsExample1} from './examples/1';
 import {TuiTabsExample2} from './examples/2';
@@ -32,7 +32,6 @@ import {ExampleTuiTabsComponent} from './tabs.component';
         TuiInputNumberModule,
         TuiModeModule,
         TuiNotificationModule,
-        TuiSvgModule,
         TuiButtonDirective,
         TuiDropdownModule,
         TuiDataListModule,
@@ -41,6 +40,8 @@ import {ExampleTuiTabsComponent} from './tabs.component';
         TuiExamplePipe,
         TuiSetupComponent,
         tuiGetDocModules(ExampleTuiTabsComponent),
+        TuiChevronDirective,
+        TuiIconComponent,
     ],
     declarations: [
         ExampleTuiTabsComponent,

diff --git a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.module.ts b/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.module.ts
@@ -8,9 +8,9 @@ import {
     TuiDataListModule,
     TuiDropdownModule,
     TuiGroupDirective,
-    TuiIconComponent,
 } from '@taiga-ui/core';
 import {
+    TuiChevronDirective,
     TuiDataListWrapperModule,
     TuiSelectModule,
     TuiSwitchComponent,
@@ -37,7 +37,7 @@ import {TuiDropdownHoverExample4} from './examples/4';
         TuiSwitchComponent,
         TuiDataListModule,
         TuiGroupDirective,
-        TuiIconComponent,
+        TuiChevronDirective,
         DropdownDocumentationModule,
         tuiGetDocModules(ExampleTuiDropdownHoverComponent),
     ],

diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.html b/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.html
@@ -4,6 +4,7 @@
 >
     <button tuiTab>Just a tab</button>
     <button
+        tuiChevron
         tuiDropdownHover
         tuiTab
         [tuiDropdown]="content"
@@ -21,26 +22,25 @@
     </button>
     <button tuiTab>Another tab</button>
     <button
+        iconLeft="tuiIconSettings"
         tuiDropdownHover
         tuiTab
         [tuiDropdown]="settings"
         [(tuiDropdownOpen)]="openSettings"
         (tui-tab-activate.stop)="(0)"
-    >
-        <tui-icon name="tuiIconSettings" />
-        <ng-template #settings>
-            <div
-                class="settings"
-                [formGroup]="testForm"
-            >
-                <input
-                    formControlName="option"
-                    tuiSwitch
-                    type="checkbox"
-                />
-                Turn option
-            </div>
-        </ng-template>
-    </button>
+    ></button>
+    <ng-template #settings>
+        <div
+            class="settings"
+            [formGroup]="testForm"
+        >
+            <input
+                formControlName="option"
+                tuiSwitch
+                type="checkbox"
+            />
+            Turn option
+        </div>
+    </ng-template>
 </nav>
 <p>Current state: {{ open ? 'open' : 'closed' }}</p>
diff --git a/projects/kit/components/tabs/tab.directive.ts b/projects/kit/components/tabs/tab.directive.ts
@@ -4,6 +4,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {RouterLinkActive} from '@angular/router';
 import {MutationObserverService} from '@ng-web-apis/mutation-observer';
 import {tuiIsNativeFocused, tuiTypedFromEvent} from '@taiga-ui/cdk';
+import {TuiIconsDirective} from '@taiga-ui/core';
 import {EMPTY, filter, merge} from 'rxjs';
 
 export const TUI_TAB_ACTIVATE = 'tui-tab-activate';
@@ -12,6 +13,12 @@ export const TUI_TAB_ACTIVATE = 'tui-tab-activate';
     standalone: true,
     selector:
         'a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]',
+    hostDirectives: [
+        {
+            directive: TuiIconsDirective,
+            inputs: ['iconLeft', 'iconRight'],
+        },
+    ],
     host: {
         type: 'button',
     },

diff --git a/projects/kit/components/tabs/tabs-with-more.component.ts b/projects/kit/components/tabs/tabs-with-more.component.ts
@@ -26,8 +26,8 @@ import {
     tuiToInt,
 } from '@taiga-ui/cdk';
 import type {TuiSizeL} from '@taiga-ui/core';
-import {TuiDropdownModule, TuiSvgModule} from '@taiga-ui/core';
-import {TUI_ARROW_OPTIONS} from '@taiga-ui/kit/components/arrow';
+import {TuiDropdownModule} from '@taiga-ui/core';
+import {TuiChevronDirective} from '@taiga-ui/kit/directives';
 import {TUI_MORE_WORD} from '@taiga-ui/kit/tokens';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -45,10 +45,10 @@ import {TuiTabsHorizontalDirective} from './tabs-horizontal.directive';
         CommonModule,
         PolymorpheusModule,
         TuiDropdownModule,
-        TuiSvgModule,
         TuiFocusableModule,
         TuiTabDirective,
         TuiTabsHorizontalDirective,
+        TuiChevronDirective,
     ],
     templateUrl: './tabs-with-more.template.html',
     styleUrls: ['./tabs-with-more.style.less'],
@@ -93,7 +93,6 @@ export class TuiTabsWithMoreComponent implements AfterViewChecked, AfterViewInit
         EMPTY_QUERY;
 
     protected readonly moreWord$ = inject(TUI_MORE_WORD);
-    protected readonly arrowOptions = inject(TUI_ARROW_OPTIONS);
     protected open = false;
 
     @Input('activeItemIndex')

diff --git a/projects/kit/components/tabs/tabs-with-more.template.html b/projects/kit/components/tabs/tabs-with-more.template.html
@@ -24,6 +24,7 @@
 </tui-tabs>
 
 <button
+    *ngIf="moreContent; else chevron"
     tuiTab
     class="t-more"
     [class._active]="isMoreActive"
@@ -34,18 +35,25 @@
     [(tuiDropdownOpen)]="open"
     (keydown.arrowLeft.prevent)="onArrowLeft()"
 >
-    <ng-container *polymorpheusOutlet="moreContent || more as text">
+    <ng-container *polymorpheusOutlet="moreContent as text">
         {{ text }}
     </ng-container>
 </button>
-<ng-template #more>
-    {{ moreWord$ | async }}
-    <!--TODO: Switch to tuiChevron-->
-    <tui-svg
-        class="t-icon"
-        [class.t-icon_rotated]="open"
-        [src]="arrowOptions.iconSmall"
-    />
+<ng-template #chevron>
+    <button
+        tuiChevron
+        tuiTab
+        class="t-more"
+        [class._active]="isMoreActive"
+        [class.t-no-margin]="isMoreAlone"
+        [class.t-overflown]="!isMoreVisible"
+        [tuiDropdown]="dropdownContent || dropdown"
+        [tuiFocusable]="isMoreFocusable"
+        [(tuiDropdownOpen)]="open"
+        (keydown.arrowLeft.prevent)="onArrowLeft()"
+    >
+        {{ moreWord$ | async }}
+    </button>
 </ng-template>
 <ng-template #dropdown>
     <div

diff --git a/projects/kit/components/tabs/tabs.style.less b/projects/kit/components/tabs/tabs.style.less
@@ -55,6 +55,21 @@
         margin-left: var(--tui-tab-margin, 1.5rem);
     }
 
+    &._icon-left:before {
+        font-size: 1rem;
+        margin-inline-end: 0.5rem;
+    }
+
+    &._icon-right:after {
+        font-size: 1rem;
+        margin-inline-start: 0.5rem;
+    }
+
+    &:empty:after,
+    &:empty:before {
+        margin: 0.5rem;
+    }
+
     @media (hover: hover) {
         &:hover {
             color: var(--tui-text-01);