feat(kit): Tabs add size (#7055)

projects/demo/src/modules/components/tabs/examples/5/index.html

@@ -1,4 +1,5 @@
 <tui-tabs-with-more
+    size="m"
     [itemsLimit]="3"
     [(activeItemIndex)]="activeItemIndex"
 >

projects/demo/src/modules/components/tabs/examples/6/index.html

@@ -50,6 +50,7 @@
         </p>
     </div>
     <tui-tabs
+        size="m"
         vertical="right"
         class="right"
     >

projects/demo/src/modules/components/tabs/tabs.component.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {tuiDocExampleOptionsProvider} from '@taiga-ui/addon-doc';
+import type {TuiSizeL} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-tabs',
@@ -11,8 +12,8 @@ import {tuiDocExampleOptionsProvider} from '@taiga-ui/addon-doc';
 export class ExampleTuiTabsComponent {
     protected buttons = ['Button 1', 'Button 2', 'Button 3', 'Button 4'];
 
-    protected readonly import = import('./examples/import/import-module.md?raw');
-    protected readonly template = import('./examples/import/insert-template.md?raw');
+    protected readonly import = import('./examples/import/import.md?raw');
+    protected readonly template = import('./examples/import/template.md?raw');
 
     protected readonly moreContentVariants = ['', 'And more'];
 
@@ -23,4 +24,8 @@ export class ExampleTuiTabsComponent {
     protected activeItemIndex = 0;
 
     protected itemsLimit = 999;
+
+    protected sizes: readonly TuiSizeL[] = ['m', 'l'];
+
+    protected size = this.sizes[1];
 }

projects/demo/src/modules/components/tabs/tabs.template.html

@@ -76,6 +76,7 @@
             <tui-tabs-with-more
                 [itemsLimit]="itemsLimit"
                 [moreContent]="moreContent"
+                [size]="size"
                 [underline]="underline"
                 [(activeItemIndex)]="activeItemIndex"
             >
@@ -129,6 +130,15 @@
                     only
                 </strong>
             </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="size"
+                documentationPropertyType="TuiSizeL"
+                [documentationPropertyValues]="sizes"
+                [(documentationPropertyValue)]="size"
+            >
+                Size
+            </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="underline"

projects/experimental/components/navigation/nav.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button';
-import {tuiBadgeOptionsProvider} from '@taiga-ui/kit';
+import {tuiBadgeOptionsProvider, tuiTabsOptionsProvider} from '@taiga-ui/kit';
 
 @Component({
     selector: 'nav[tuiNavigationNav]',
@@ -11,6 +11,7 @@ import {tuiBadgeOptionsProvider} from '@taiga-ui/kit';
     providers: [
         tuiBadgeOptionsProvider({size: 'm'}),
         tuiButtonOptionsProvider({size: 's'}),
+        tuiTabsOptionsProvider({size: 'm'}),
     ],
 })
 export class TuiNavComponent {}

projects/experimental/components/navigation/nav.style.less

@@ -4,10 +4,11 @@ nav[tuiNavigationNav] {
     top: 3rem;
     z-index: 1;
     display: flex;
+    min-height: 3rem;
     align-items: center;
     gap: 0.5rem;
     box-shadow: inset 0 -1px var(--tui-base-03);
-    padding: 0 1.25rem;
+    padding: 0.25rem 1.25rem 0;
     margin: 0 -1.25rem;
     box-sizing: border-box;
     white-space: nowrap;
@@ -43,15 +44,10 @@ nav[tuiNavigationNav] {
 
     tui-tabs,
     [tuiTabs] {
-        height: 3rem;
         margin-inline-end: 1rem;
 
         &:before {
             background: var(--tui-base-07);
         }
     }
-
-    [tuiTab] {
-        font: var(--tui-font-text-s);
-    }
 }

projects/kit/components/tabs/tab.directive.ts

@@ -3,18 +3,16 @@ import {Directive, ElementRef, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {RouterLinkActive} from '@angular/router';
 import {MutationObserverService} from '@ng-web-apis/mutation-observer';
-import {tuiCreateToken, tuiIsNativeFocused, tuiTypedFromEvent} from '@taiga-ui/cdk';
+import {tuiIsNativeFocused, tuiTypedFromEvent} from '@taiga-ui/cdk';
 import {EMPTY, filter, merge} from 'rxjs';
 
-export const TUI_TAB_MARGIN = tuiCreateToken(24);
 export const TUI_TAB_ACTIVATE = 'tui-tab-activate';
 
 @Directive({
     standalone: true,
     selector:
         'a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]',
     host: {
-        '[style.--tui-tab-margin.px]': 'margin',
         type: 'button',
     },
 })
@@ -27,7 +25,6 @@ export class TuiTabDirective implements OnDestroy {
             filter(() => !!this.rla?.isActive),
         );
 
-    protected readonly margin = inject(TUI_TAB_MARGIN);
     protected readonly sub = merge(
         this.observer || EMPTY,
         this.rla?.isActiveChange.pipe(filter(Boolean)) || EMPTY,

projects/kit/components/tabs/tabs-horizontal.directive.ts

@@ -26,7 +26,7 @@ import {TUI_TABS_OPTIONS} from './tabs.options';
     hostDirectives: [
         {
             directive: TuiTabsDirective,
-            inputs: ['activeItemIndex'],
+            inputs: ['activeItemIndex', 'size'],
             outputs: ['activeItemIndexChange'],
         },
     ],

projects/kit/components/tabs/tabs-vertical.directive.ts

@@ -9,7 +9,7 @@ import {TuiTabsDirective} from './tabs.directive';
     hostDirectives: [
         {
             directive: TuiTabsDirective,
-            inputs: ['activeItemIndex'],
+            inputs: ['activeItemIndex', 'size'],
             outputs: ['activeItemIndexChange'],
         },
     ],

projects/kit/components/tabs/tabs-with-more.component.ts

@@ -25,14 +25,15 @@ import {
     tuiPx,
     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 {TUI_MORE_WORD} from '@taiga-ui/kit/tokens';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 import {filter, map, tap} from 'rxjs';
 
-import {TUI_TAB_MARGIN, TuiTabDirective} from './tab.directive';
+import {TuiTabDirective} from './tab.directive';
 import {TUI_TABS_OPTIONS} from './tabs.options';
 import {TUI_TABS_PROVIDERS, TUI_TABS_REFRESH} from './tabs.providers';
 import {TuiTabsHorizontalDirective} from './tabs-horizontal.directive';
@@ -62,12 +63,14 @@ export class TuiTabsWithMoreComponent implements AfterViewChecked, AfterViewInit
     private readonly dir?: ElementRef<HTMLButtonElement>;
 
     private readonly options = inject(TUI_TABS_OPTIONS);
-    private readonly margin = inject(TUI_TAB_MARGIN);
     private readonly refresh$ = inject(TUI_TABS_REFRESH);
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
     private readonly cdr = inject(ChangeDetectorRef);
     private maxIndex = Infinity;
 
+    @Input()
+    public size: TuiSizeL = this.options.size;
+
     @Input()
     public moreContent: PolymorpheusContent;
 
@@ -214,6 +217,10 @@ export class TuiTabsWithMoreComponent implements AfterViewChecked, AfterViewInit
         return index > this.lastVisibleIndex && this.isOverflown(index);
     }
 
+    private get margin(): number {
+        return this.size === 'l' ? 24 : 16;
+    }
+
     private focusMore(): void {
         if (this.moreButton) {
             this.moreButton.nativeElement.focus();

projects/kit/components/tabs/tabs-with-more.style.less

@@ -4,24 +4,24 @@
     position: relative;
     display: flex;
     font: var(--tui-font-text-m);
-    height: var(--tui-height-l);
     box-sizing: border-box;
     color: var(--tui-text-02);
     box-shadow: inset 0 -1px var(--tui-base-03);
     overflow: hidden;
 }
 
 .t-tabs {
-    height: inherit;
-    font-size: inherit;
-    font-weight: inherit;
+    font: inherit;
     overflow: visible;
     box-shadow: none;
     color: inherit;
 }
 
-.t-overflown {
+.t-flex {
     display: flex;
+}
+
+.t-overflown {
     margin: 0;
     width: 0;
     max-width: 0;
@@ -67,6 +67,11 @@
             background: var(--tui-clear);
         }
     }
+
+    &[data-size='m'] ::ng-deep *[tuiTab] {
+        height: 2.25rem;
+        font: var(--tui-font-text-s);
+    }
     /* stylelint-enable */
 }
 

projects/kit/components/tabs/tabs-with-more.template.html

@@ -2,6 +2,7 @@
 <tui-tabs
     class="t-tabs"
     [activeItemIndex]="activeItemIndex"
+    [size]="size"
     [underline]="underline"
     (activeItemIndexChange)="onActiveItemIndexChange($event)"
     (keydown.arrowRight)="onArrowRight($event)"
@@ -12,7 +13,10 @@
             [ngTemplateOutlet]="item"
         />
         <ng-template #hidden>
-            <div [class.t-overflown]="isOverflown(index)">
+            <div
+                class="t-flex"
+                [class.t-overflown]="isOverflown(index)"
+            >
                 <ng-container [ngTemplateOutlet]="item" />
             </div>
         </ng-template>
@@ -46,6 +50,7 @@
     <div
         #element
         class="t-dropdown"
+        [attr.data-size]="size"
         (keydown.arrowDown.prevent)="onWrapperArrow($event, element, false)"
         (keydown.arrowUp.prevent)="onWrapperArrow($event, element, true)"
     >

projects/kit/components/tabs/tabs.directive.ts

@@ -9,17 +9,25 @@ import {
     Output,
 } from '@angular/core';
 import {tuiMoveFocus, tuiWithStyles} from '@taiga-ui/cdk';
+import type {TuiSizeL} from '@taiga-ui/core';
 
 import {TUI_TAB_ACTIVATE} from './tab.directive';
 import {TuiTabsComponent} from './tabs.component';
+import {TUI_TABS_OPTIONS} from './tabs.options';
 
 @Directive({
     standalone: true,
     selector: 'tui-tabs:is(never)',
+    host: {
+        '[attr.data-size]': 'size',
+    },
 })
 export class TuiTabsDirective implements AfterViewChecked {
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
 
+    @Input()
+    public size: TuiSizeL = inject(TUI_TABS_OPTIONS).size;
+
     @Input()
     public activeItemIndex = 0;
 

projects/kit/components/tabs/tabs.options.ts

@@ -1,18 +1,21 @@
 import type {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
+import type {TuiSizeL} from '@taiga-ui/core';
 
 export interface TuiTabsOptions {
     readonly exposeActive: boolean;
     readonly itemsLimit: number;
     readonly minMoreWidth: number;
     readonly underline: boolean | string;
+    readonly size: TuiSizeL;
 }
 
 export const TUI_TABS_DEFAULT_OPTIONS: TuiTabsOptions = {
     underline: true,
     exposeActive: true,
     itemsLimit: Infinity,
     minMoreWidth: 0,
+    size: 'l',
 };
 
 /**