feat(tabs): active tab underline transition (#DS-2935) (#343)

Author: sk8knut

packages/components/tabs/_tabs-common.scss

@@ -79,17 +79,6 @@
         bottom: -10px;
     }
 
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-selected:after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -10px;
-        height: 3px;
-        border-radius: 2px 2px 0 0;
-        background: rgba(33, 34, 44, 1);
-    }
-
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 

packages/components/tabs/tab-header.component.ts

@@ -60,6 +60,14 @@ export class KbqTabHeader extends KbqPaginatedTabHeader {
     @ViewChild('nextPaginator') nextPaginator: ElementRef<HTMLElement>;
     @ViewChild('previousPaginator') previousPaginator: ElementRef<HTMLElement>;
 
+    get activeTabOffsetWidth() {
+        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth + 'px';
+    }
+
+    get activeTabOffsetLeft() {
+        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft + 'px';
+    }
+
     constructor(
         readonly elementRef: ElementRef,
         readonly changeDetectorRef: ChangeDetectorRef,

packages/components/tabs/tab-header.html

@@ -21,6 +21,13 @@
     >
         <div class="kbq-tab-list__content">
             <ng-content />
+            <div
+                class="kbq-tab-list__active-tab-underline"
+                [ngStyle]="{
+                    width: activeTabOffsetWidth,
+                    left: activeTabOffsetLeft
+                }"
+            ></div>
         </div>
     </div>
 </div>

packages/components/tabs/tab-header.scss

@@ -25,11 +25,10 @@
 }
 
 .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
-    position: relative;
     padding: 8px 0;
 }
 
-.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content:after {
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
     content: '';
     position: absolute;
     left: 0;
@@ -39,6 +38,20 @@
     background: rgba(13, 14, 18, 0.12);
 }
 
+.kbq-tab-list__active-tab-underline {
+    display: none;
+}
+
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    border-radius: 2px 2px 0 0;
+    background: rgba(33, 34, 44, 1);
+    transition: all 0.2s ease-in-out;
+}
+
 .kbq-tab-header__pagination {
     @include vendor-prefixes.user-select(none);
 

packages/components/tabs/tabs.module.ts

@@ -1,6 +1,7 @@
 import { A11yModule } from '@angular/cdk/a11y';
 import { PortalModule } from '@angular/cdk/portal';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { NgStyle } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { KbqCommonModule } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -28,7 +29,8 @@ import { KbqTab } from './tab.component';
         CdkScrollableModule,
         KbqCommonModule,
         KbqIconModule,
-        KbqToolTipModule
+        KbqToolTipModule,
+        NgStyle
     ],
     // Don't export all components because some are only to be used internally.
     exports: [

tools/public_api_guard/components/tabs.api.md

@@ -29,6 +29,7 @@ import * as i11 from '@angular/cdk/scrolling';
 import * as i12 from '@koobiq/components/core';
 import * as i13 from '@koobiq/components/icon';
 import * as i14 from '@koobiq/components/tooltip';
+import * as i15 from '@angular/common';
 import * as i9 from '@angular/cdk/portal';
 import { InjectionToken } from '@angular/core';
 import { NgZone } from '@angular/core';
@@ -255,6 +256,10 @@ export const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
 export class KbqTabHeader extends KbqPaginatedTabHeader {
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
     // (undocumented)
+    get activeTabOffsetLeft(): string;
+    // (undocumented)
+    get activeTabOffsetWidth(): string;
+    // (undocumented)
     readonly changeDetectorRef: ChangeDetectorRef;
     // (undocumented)
     readonly elementRef: ElementRef;
@@ -383,7 +388,7 @@ export class KbqTabsModule {
     // Warning: (ae-forgotten-export) The symbol "i8" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule, typeof i15.NgStyle], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
 }
 
 // @public (undocumented)