feat(platform): icon tab bar horizon theme adaptation (#8006)

* fix(platform): removed unnecessary more(extra) button directive * fix(platform): fixed unit test * chore(e2e): fixed e2e
SAP · May 24, 2022 · 34fc3c3 · 34fc3c3
1 parent 7097946
commit 34fc3c3
Show file tree

Hide file tree

Showing 12 changed files with 5 additions and 199 deletions.
diff --git a/e2e/wdio/core/pages/product-switch.po.ts b/e2e/wdio/core/pages/product-switch.po.ts
@@ -4,7 +4,7 @@ import { waitForElDisplayed, waitForPresent } from '../../driver/wdio';
 export class ProductSwitchPo extends CoreBaseComponentPo {
     url = '/product-switch';
 
-    shellbarButton = 'app-product-switch fd-popover-control button';
+    shellbarButton = 'app-product-switch fd-popover-control button.fd-product-switch__control';
     shellbarSwitchItems = 'fd-popover-body .fd-product-switch__item';
     switchItems = 'fd-product-switch-body .fd-product-switch__item';
 

diff --git a/libs/platform/src/lib/icon-tab-bar/components/icon-tab-bar-base.class.ts b/libs/platform/src/lib/icon-tab-bar/components/icon-tab-bar-base.class.ts
@@ -25,7 +25,6 @@ import { IconTabBarItem } from '../interfaces/icon-tab-bar-item.interface';
 import { TabConfig } from '../interfaces/tab-config.interface';
 import { TabDestinyMode } from '../types';
 import { ICON_TAB_HIDDEN_CLASS_NAME, UNIQUE_KEY_SEPARATOR } from '../constants';
-import { ExtraButtonDirective } from '../directives/extra-button/extra-button.directive';
 import { IconTabBarPopoverBase } from './popovers/icon-tab-bar-popover-base.class';
 import { TabColorAssociations } from '../interfaces/tab-color-associations.interface';
 
@@ -82,12 +81,6 @@ export abstract class IconTabBarBase implements OnInit, OnChanges, AfterViewInit
     @ViewChild(OverflowListDirective)
     overflowDirective: OverflowListDirective;
 
-    /**
-     * @description Reference to ExtraButtonDirective
-     */
-    @ViewChild(ExtraButtonDirective)
-    extraBtnDirective: ExtraButtonDirective;
-
     /** @hidden */
     _selectedUid?: string;
 
@@ -344,7 +337,6 @@ export abstract class IconTabBarBase implements OnInit, OnChanges, AfterViewInit
         if (this.overflowDirective && !this._destroyed) {
             const extra = this.overflowDirective.getAmountOfExtraItems();
             this._recalculateVisibleItems(extra);
-            this.extraBtnDirective?.calculatePosition();
             this._cd.markForCheck();
         }
     }

diff --git a/.../icon-tab-bar/components/icon-tab-bar-filter-type/icon-tab-bar-filter-type.component.html b/.../icon-tab-bar/components/icon-tab-bar-filter-type/icon-tab-bar-filter-type.component.html
@@ -51,14 +51,7 @@
             </div>
         </a>
     </li>
-    <li
-        *ngIf="_extraTabs.length"
-        role="presentation"
-        class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow"
-        fdpExtraButton
-        [isRtl]="isRtl"
-        [anchorIndexInsideParent]="_lastVisibleTabIndex"
-    >
+    <li *ngIf="_extraTabs.length" role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
         <fdp-icon-tab-bar-popover
             [isRtl]="isRtl"
             [extraTabs]="_extraTabs"

diff --git a/.../lib/icon-tab-bar/components/icon-tab-bar-icon-type/icon-tab-bar-icon-type.component.html b/.../lib/icon-tab-bar/components/icon-tab-bar-icon-type/icon-tab-bar-icon-type.component.html
@@ -40,14 +40,7 @@
             </div>
         </a>
     </li>
-    <li
-        *ngIf="_extraTabs.length"
-        role="presentation"
-        class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow"
-        fdpExtraButton
-        [isRtl]="isRtl"
-        [anchorIndexInsideParent]="_lastVisibleTabIndex"
-    >
+    <li *ngIf="_extraTabs.length" role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
         <fdp-icon-tab-bar-popover
             [showItemLabel]="showLabel"
             [isRtl]="isRtl"

diff --git a/...con-tab-bar/components/icon-tab-bar-process-type/icon-tab-bar-process-type.component.html b/...con-tab-bar/components/icon-tab-bar-process-type/icon-tab-bar-process-type.component.html
@@ -61,15 +61,7 @@
             <fd-icon glyph="process"></fd-icon>
         </span>
     </li>
-    <li
-        *ngIf="_showRightBtn"
-        role="presentation"
-        class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow"
-        fdpExtraButton
-        [isRtl]="isRtl"
-        [addButtonOffset]="true"
-        [anchorIndexInsideParent]="_anchorIndexForExtraBtnDirective"
-    >
+    <li *ngIf="_showRightBtn" role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
         <fdp-icon-tab-bar-popover
             [isRtl]="isRtl"
             [extraTabs]="_nextSteps"

diff --git a/.../icon-tab-bar/components/icon-tab-bar-process-type/icon-tab-bar-process-type.component.ts b/.../icon-tab-bar/components/icon-tab-bar-process-type/icon-tab-bar-process-type.component.ts
@@ -89,7 +89,6 @@ export class IconTabBarProcessTypeComponent extends IconTabBarBase {
                 isPreviousStepsStrategy
                     ? this.recalculateItemsByPrevArr(extra, amountOfPreviousSteps)
                     : this._recalculateItemsByNextArr(extra, amountOfNextSteps);
-                this.extraBtnDirective?.calculatePosition();
                 this._cd.detectChanges();
             }
         });

diff --git a/.../lib/icon-tab-bar/components/icon-tab-bar-text-type/icon-tab-bar-text-type.component.html b/.../lib/icon-tab-bar/components/icon-tab-bar-text-type/icon-tab-bar-text-type.component.html
@@ -56,14 +56,7 @@
                 </fdp-text-type-popover>
             </ng-template>
         </li>
-        <li
-            *ngIf="_extraTabs.length"
-            role="presentation"
-            class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow"
-            fdpExtraButton
-            [isRtl]="isRtl"
-            [anchorIndexInsideParent]="_lastVisibleTabIndex"
-        >
+        <li *ngIf="_extraTabs.length" role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
             <fdp-text-type-popover
                 #extraItemsPopover
                 [isRtl]="isRtl"

diff --git a/libs/platform/src/lib/icon-tab-bar/directives/extra-button/extra-button.directive.spec.ts b/libs/platform/src/lib/icon-tab-bar/directives/extra-button/extra-button.directive.spec.ts
diff --git a/libs/platform/src/lib/icon-tab-bar/directives/extra-button/extra-button.directive.ts b/libs/platform/src/lib/icon-tab-bar/directives/extra-button/extra-button.directive.ts
diff --git a/libs/platform/src/lib/icon-tab-bar/icon-tab-bar.component.spec.ts b/libs/platform/src/lib/icon-tab-bar/icon-tab-bar.component.spec.ts
@@ -7,7 +7,6 @@ import { ContentDensityService, OverflowListModule, RtlService } from '@fundamen
 import { PopoverModule } from '@fundamental-ngx/core/popover';
 import { IconModule } from '@fundamental-ngx/core/icon';
 import { IconTabBarTextTypeComponent } from './components/icon-tab-bar-text-type/icon-tab-bar-text-type.component';
-import { ExtraButtonDirective } from './directives/extra-button/extra-button.directive';
 import { IconTabBarIconTypeComponent } from './components/icon-tab-bar-icon-type/icon-tab-bar-icon-type.component';
 import { IconTabBarProcessTypeComponent } from './components/icon-tab-bar-process-type/icon-tab-bar-process-type.component';
 import { IconTabBarFilterTypeComponent } from './components/icon-tab-bar-filter-type/icon-tab-bar-filter-type.component';
@@ -51,7 +50,6 @@ describe('IconTabBarComponent', () => {
                 HostComponent,
                 IconTabBarComponent,
                 IconTabBarTextTypeComponent,
-                ExtraButtonDirective,
                 IconTabBarIconTypeComponent,
                 IconTabBarProcessTypeComponent,
                 IconTabBarFilterTypeComponent,

diff --git a/libs/platform/src/lib/icon-tab-bar/icon-tab-bar.module.ts b/libs/platform/src/lib/icon-tab-bar/icon-tab-bar.module.ts
@@ -8,7 +8,6 @@ import { OverflowListModule } from '@fundamental-ngx/core/utils';
 
 import { IconTabBarComponent } from './icon-tab-bar.component';
 import { IconTabBarTextTypeComponent } from './components/icon-tab-bar-text-type/icon-tab-bar-text-type.component';
-import { ExtraButtonDirective } from './directives/extra-button/extra-button.directive';
 import { IconTabBarIconTypeComponent } from './components/icon-tab-bar-icon-type/icon-tab-bar-icon-type.component';
 import { IconTabBarProcessTypeComponent } from './components/icon-tab-bar-process-type/icon-tab-bar-process-type.component';
 import { IconTabBarFilterTypeComponent } from './components/icon-tab-bar-filter-type/icon-tab-bar-filter-type.component';
@@ -22,7 +21,6 @@ import { IconBarDndListDirective } from './directives/dnd/icon-bar-dnd-list.dire
     declarations: [
         IconTabBarComponent,
         IconTabBarTextTypeComponent,
-        ExtraButtonDirective,
         IconTabBarIconTypeComponent,
         IconTabBarProcessTypeComponent,
         IconTabBarFilterTypeComponent,
@@ -36,7 +34,6 @@ import { IconBarDndListDirective } from './directives/dnd/icon-bar-dnd-list.dire
     exports: [
         IconTabBarComponent,
         IconTabBarTextTypeComponent,
-        ExtraButtonDirective,
         IconTabBarIconTypeComponent,
         IconTabBarProcessTypeComponent,
         IconTabBarFilterTypeComponent,

diff --git a/libs/platform/src/lib/icon-tab-bar/public_api.ts b/libs/platform/src/lib/icon-tab-bar/public_api.ts
@@ -6,7 +6,6 @@ export * from './interfaces/tab-color-associations.interface';
 export * from './directives/dnd/icon-bar-dnd-container.directive';
 export * from './directives/dnd/icon-bar-dnd-item.directive';
 export * from './directives/dnd/icon-bar-dnd-list.directive';
-export * from './directives/extra-button/extra-button.directive';
 export * from './constants';
 export * from './types';
 export * from './components';