fix: Show side navigation expand icon (#3510)

BREAKING CHANGE: side navigation expand icon changed from directive to component
SAP · Sep 30, 2020 · ea73993 · ea73993
1 parent 5457ef9
commit ea73993
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 32 deletions.
diff --git a/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.spec.ts b/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.spec.ts
@@ -3,7 +3,7 @@ import { Component, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NestedListModule } from '../nested-list.module';
 import { NestedListStateService } from '../nested-list-state.service';
-import { NestedListExpandIconDirective } from '../nested-list-directives';
+import { NestedListExpandIconComponent } from '../nested-list-directives';
 import { NestedItemService } from '../nested-item/nested-item.service';
 
 @Component({
@@ -21,14 +21,14 @@ class TestNestedContainerComponent {
     @ViewChild(NestedListContentDirective)
     directiveElement: NestedListContentDirective;
 
-    @ViewChild(NestedListExpandIconDirective)
-    iconElement: NestedListExpandIconDirective;
+    @ViewChild(NestedListExpandIconComponent)
+    iconElement: NestedListExpandIconComponent;
 }
 
 describe('NestedContentDirective', () => {
     let component: TestNestedContainerComponent;
     let directiveElement: NestedListContentDirective;
-    let iconElement: NestedListExpandIconDirective;
+    let iconElement: NestedListExpandIconComponent;
     let fixture: ComponentFixture<TestNestedContainerComponent>;
 
     beforeEach(async(() => {

diff --git a/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.ts b/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.ts
@@ -13,7 +13,7 @@ import {
     Renderer2
 } from '@angular/core';
 import { NestedLinkDirective } from '../nested-link/nested-link.directive';
-import { NestedListExpandIconDirective } from '../nested-list-directives';
+import { NestedListExpandIconComponent } from '../nested-list-directives';
 import { NestedItemService } from '../nested-item/nested-item.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -57,8 +57,8 @@ export class NestedListContentDirective implements AfterContentInit, OnDestroy {
     @ContentChild(NestedLinkDirective)
     nestedLink: NestedLinkDirective;
 
-    @ContentChild(NestedListExpandIconDirective)
-    nestedExpandIcon: NestedListExpandIconDirective;
+    @ContentChild(NestedListExpandIconComponent)
+    nestedExpandIcon: NestedListExpandIconComponent;
 
     /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */
     private readonly onDestroy$: Subject<void> = new Subject<void>();
@@ -105,8 +105,7 @@ export class NestedListContentDirective implements AfterContentInit, OnDestroy {
     /** Expanded state change propagation method */
     changeExpandedState(expanded: boolean): void {
         if (this.nestedExpandIcon) {
-            this.nestedExpandIcon.expanded = expanded;
-            this.changeDetRef.detectChanges();
+            this.nestedExpandIcon.changeExpandedState(expanded);
         }
     }
 

diff --git a/libs/core/src/lib/nested-list/nested-item/nested-item.directive.spec.ts b/libs/core/src/lib/nested-list/nested-item/nested-item.directive.spec.ts
@@ -3,7 +3,7 @@ import { Component, ViewChild } from '@angular/core';
 import { PopoverModule } from '../../popover/popover.module';
 import { MenuKeyboardService } from '../../menu/menu-keyboard.service';
 import { NestedLinkDirective } from '../nested-link/nested-link.directive';
-import { NestedListExpandIconDirective } from '../nested-list-directives';
+import { NestedListExpandIconComponent } from '../nested-list-directives';
 import { NestedListModule } from '../nested-list.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NestedListKeyboardService } from '../nested-list-keyboard.service';
@@ -72,11 +72,11 @@ class TestNestedContainerComponent {
     @ViewChild('emptyItemDirective', { read: NestedItemDirective })
     emptyItemDirective: NestedItemDirective;
 
-    @ViewChild('iconElementPopover', { read: NestedListExpandIconDirective })
-    popoverIconElement: NestedListExpandIconDirective;
+    @ViewChild('iconElementPopover', { read: NestedListExpandIconComponent })
+    popoverIconElement: NestedListExpandIconComponent;
 
-    @ViewChild('iconElement', { read: NestedListExpandIconDirective })
-    iconElement: NestedListExpandIconDirective;
+    @ViewChild('iconElement', { read: NestedListExpandIconComponent })
+    iconElement: NestedListExpandIconComponent;
 
     @ViewChild('linkElement', {read: NestedLinkDirective })
     linkDirective: NestedLinkDirective;
@@ -88,7 +88,7 @@ describe('NestedItemDirective', () => {
     let nestedItemListDirective: NestedItemDirective;
     let subItemElement: NestedItemDirective;
     let popoverSubItemElement: NestedItemDirective;
-    let iconElement: NestedListExpandIconDirective;
+    let iconElement: NestedListExpandIconComponent;
     let emptyItemDirective: NestedItemDirective;
     let fixture: ComponentFixture<TestNestedContainerComponent>;
     let itemService: NestedItemService;

diff --git a/libs/core/src/lib/nested-list/nested-list-directives.spec.ts b/libs/core/src/lib/nested-list/nested-list-directives.spec.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { NestedListExpandIconDirective, NestedListTitleDirective, NestedListIconDirective } from './nested-list-directives';
+import { NestedListExpandIconComponent, NestedListTitleDirective, NestedListIconDirective } from './nested-list-directives';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NestedItemService } from './nested-item/nested-item.service';
 
@@ -14,24 +14,24 @@ class TestNestedContainerComponent {
     @ViewChild(NestedListTitleDirective)
     titleElement: NestedListTitleDirective;
 
-    @ViewChild(NestedListExpandIconDirective)
-    expandIconElement: NestedListExpandIconDirective;
+    @ViewChild(NestedListExpandIconComponent)
+    expandIconElement: NestedListExpandIconComponent;
 
     @ViewChild(NestedListIconDirective)
     iconElement: NestedListIconDirective;
 }
 
 describe('NestedListDirectives', () => {
     let component: TestNestedContainerComponent;
-    let expandIconElement: NestedListExpandIconDirective;
+    let expandIconElement: NestedListExpandIconComponent;
     let iconElement: NestedListIconDirective;
     let titleElement: NestedListTitleDirective;
     let fixture: ComponentFixture<TestNestedContainerComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
-                NestedListExpandIconDirective,
+                NestedListExpandIconComponent,
                 NestedListIconDirective,
                 NestedListTitleDirective,
                 TestNestedContainerComponent

diff --git a/libs/core/src/lib/nested-list/nested-list-directives.ts b/libs/core/src/lib/nested-list/nested-list-directives.ts
@@ -1,7 +1,22 @@
-import { Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Directive,
+    ElementRef,
+    HostBinding,
+    HostListener,
+    Input,
+    OnChanges,
+    OnInit, Optional,
+    ViewEncapsulation
+} from '@angular/core';
 import { NestedItemService } from './nested-item/nested-item.service';
 import { applyCssClass } from '../utils/decorators/apply-css-class.decorator';
 import { CssClassBuilder } from '../utils/interfaces/css-class-builder.interface';
+import { RtlService } from '../utils/services/rtl.service';
+import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
 
 @Directive({
     selector: '[fdNestedDirectivesHeader], [fd-nested-list-header]'
@@ -88,14 +103,21 @@ export class NestedListTitleDirective {
     }
 }
 
-@Directive({
+@Component({
+    // tslint:disable-next-line:component-selector
     selector: '[fdNestedListExpandIcon], [fd-nested-list-expand-icon]',
+    template: `
+        <ng-content></ng-content>
+        <fd-icon [glyph]="expanded ? 'navigation-down-arrow' : ( sideArrowIcon$ | async )"></fd-icon>
+    `,
     host: {
         'aria-haspopup': 'true',
         'tabindex': '-1'
-    }
+    },
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
-export class NestedListExpandIconDirective {
+export class NestedListExpandIconComponent {
 
     /** @hidden */
     @HostBinding('class.fd-nested-list__button')
@@ -113,9 +135,16 @@ export class NestedListExpandIconDirective {
     @HostBinding('attr.aria-expanded')
     expanded = false;
 
+    /** @hidden */
+    sideArrowIcon$: Observable<string>;
+
     constructor (
-        private _itemService: NestedItemService
-    ) {}
+        private _itemService: NestedItemService,
+        private _changeDetRef: ChangeDetectorRef,
+        @Optional() private _rtlService: RtlService
+    ) {
+        this._listenOnTextDirection();
+    }
 
     /** Mouse event handler */
     @HostListener('click', ['$event'])
@@ -130,4 +159,17 @@ export class NestedListExpandIconDirective {
     onFocus(): void {
         this._itemService.focus.next();
     }
+
+    /** @hidden */
+    changeExpandedState(expanded: boolean): void {
+        this.expanded = expanded;
+        this._changeDetRef.detectChanges();
+    }
+
+    /** @hidden Sets expand arrow depending on text direction */
+    private _listenOnTextDirection(): void {
+        this.sideArrowIcon$ = this._rtlService
+            ? this._rtlService.rtl.pipe(map(isRtl => isRtl ? 'navigation-left-arrow' : 'navigation-right-arrow'))
+            : of('navigation-right-arrow');
+    }
 }
diff --git a/libs/core/src/lib/nested-list/nested-list.module.ts b/libs/core/src/lib/nested-list/nested-list.module.ts
@@ -3,7 +3,7 @@ import { NestedListDirective } from './nested-list/nested-list.directive';
 import { NestedLinkDirective } from './nested-link/nested-link.directive';
 import { NestedItemDirective } from './nested-item/nested-item.directive';
 import {
-    NestedListExpandIconDirective,
+    NestedListExpandIconComponent,
     NestedListHeaderDirective,
     NestedListIconDirective,
     NestedListTitleDirective
@@ -17,12 +17,14 @@ import { PreparedNestedListComponent } from './prepared-nested-list/prepared-nes
 import { NestedListStateService } from './nested-list-state.service';
 import { RouterModule } from '@angular/router';
 import { NestedListContentDirective } from './nested-content/nested-list-content.directive';
+import { IconModule } from '../icon/icon.module';
 
 @NgModule({
     imports: [
         CommonModule,
         PopoverModule,
-        RouterModule
+        RouterModule,
+        IconModule
     ],
     declarations: [
         NestedListDirective,
@@ -33,7 +35,7 @@ import { NestedListContentDirective } from './nested-content/nested-list-content
         NestedListHeaderDirective,
         NestedListPopoverComponent,
         PreparedNestedListComponent,
-        NestedListExpandIconDirective,
+        NestedListExpandIconComponent,
         NestedListContentDirective
     ],
     exports: [
@@ -45,7 +47,7 @@ import { NestedListContentDirective } from './nested-content/nested-list-content
         NestedListHeaderDirective,
         NestedListPopoverComponent,
         PreparedNestedListComponent,
-        NestedListExpandIconDirective,
+        NestedListExpandIconComponent,
         NestedListContentDirective
     ],
     providers: [

diff --git a/libs/core/src/lib/side-navigation/side-navigation.component.scss b/libs/core/src/lib/side-navigation/side-navigation.component.scss
@@ -7,7 +7,9 @@
         cursor: pointer;
     }
 
-    .fd-nested-list__expand-icon {
-        background-color: transparent;
+    .fd-nested-list__content {
+        .fd-nested-list__button.fd-button {
+            background: none;
+        }
     }
 }