fix(menu): add RTL chevron menu icon (#1042)

BREAKING CHANGE:

Collapsed menu icon changes direction based on current layout direction.

src/framework/theme/components/menu/_menu.component.theme.scss

@@ -51,7 +51,7 @@
  }
 
  .chevron {
- font-size: 0.875rem;
+ font-size: 1rem;
  color: nb-theme(menu-icon-color);
  }
  }

src/framework/theme/components/menu/menu-item.component.html

@@ -43,8 +43,7 @@
  href="#">
  <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
  <span class="menu-title">{{ menuItem.title }}</span>
- <nb-icon [icon]="menuItem.expanded ? 'chevron-down-outline' : 'chevron-left-outline'" pack="nebular-essentials">
- </nb-icon>
+ <nb-icon [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
 </a>
 <ul *ngIf="menuItem.children"
  [class.collapsed]="!(menuItem.children && menuItem.expanded)"

src/framework/theme/components/menu/menu.component.ts

@@ -23,6 +23,7 @@ import { NbMenuInternalService, NbMenuItem, NbMenuBag, NbMenuService } from './m
 import { convertToBoolProperty } from '../helpers';
 import { NB_WINDOW } from '../../theme.options';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { NbLayoutDirectionService } from '../../services/direction.service';
 
 export enum NbToggleStates {
  Expanded = 'expanded',
@@ -51,7 +52,8 @@ export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
  private alive = true;
  toggleState: NbToggleStates;
 
- constructor(private menuService: NbMenuService) {}
+ constructor(private menuService: NbMenuService,
+ private directionService: NbLayoutDirectionService) {}
 
  ngDoCheck() {
  this.toggleState = this.menuItem.expanded ? NbToggleStates.Expanded : NbToggleStates.Collapsed;
@@ -86,6 +88,16 @@ export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
  onItemClick(item: NbMenuItem) {
  this.itemClick.emit(item);
  }
+
+ getExpandStateIcon(): string {
+ if (this.menuItem.expanded) {
+ return 'chevron-down-outline';
+ }
+
+ return this.directionService.isLtr()
+ ? 'chevron-left-outline'
+ : 'chevron-right-outline';
+ }
 }
 
 /**

src/framework/theme/components/menu/menu.spec.ts

@@ -3,9 +3,10 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-import { Component, Input, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, DebugElement, Input, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
 import { NbMenuModule } from './menu.module';
@@ -19,7 +20,7 @@ import {
 } from './url-matching-helpers';
 import { pairwise, take } from 'rxjs/operators';
 import { NbMenuComponent } from './menu.component';
-import { NbIconLibraries } from '@nebular/theme';
+import { NbIconComponent, NbIconLibraries, NbLayoutDirection, NbLayoutDirectionService } from '@nebular/theme';
 
 @Component({ template: '' })
 export class NoopComponent {}
@@ -177,6 +178,20 @@ describe('NbMenuItem', () => {
  expect(activeItem.querySelector('span').innerHTML).toEqual(selectedItem.title);
  });
 
+ it('should change arrow direction when document direction changes', () => {
+ const menuItems = [{ title: '', children: [{ title: '' }] }];
+ const { fixture } = createSingleMenuComponent(menuItems);
+ const iconComponent = fixture.debugElement.query(By.directive(NbIconComponent)) as DebugElement;
+ const directionService: NbLayoutDirectionService = TestBed.get(NbLayoutDirectionService);
+
+ expect(iconComponent.componentInstance.icon).toEqual('chevron-left-outline');
+
+ directionService.setDirection(NbLayoutDirection.RTL);
+ fixture.detectChanges();
+
+ expect(iconComponent.componentInstance.icon).toEqual('chevron-right-outline');
+ });
+
 });
 
 describe('menu services', () => {