Merge branch 'master' into tzhelev/fix-5577-8.2.x

Author: tachojelev

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -209,6 +209,10 @@
     %aside--mini {
         width: rem(60px);
         transition-duration: .2s, .2s;
+
+        %item {
+            justify-content: center;
+        }
     }
 
     %aside--normal {
@@ -251,17 +255,18 @@
     %item {
         position: relative;
         display: flex;
+        align-items: center;
         flex-flow: row nowrap;
         color: --var($theme, 'item-text-color');
         max-height: rem(48px);
-        padding: rem(12px) rem(16px);
+        min-width: rem(32px);
+        padding: rem(12px) rem(8px);
         cursor: pointer;
-        align-items: center;
         user-select: none;
         outline: transparent;
         white-space: nowrap;
         border-radius: --var($theme, 'item-border-radius');
-        margin: 8px;
+        margin: rem(8px) rem(8px);
 
         > igx-icon + span {
             margin-left: rem(32px);

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts

@@ -240,7 +240,7 @@ describe('Navigation Drawer', () => {
             fixture.detectChanges();
             asideElem = fixture.debugElement.query(By.css('.igx-nav-drawer__aside'));
 
-            expect(asideElem.styles['width']).toEqual('60px');
+            expect(asideElem.styles['width']).toEqual('68px');
 
             fixture.componentInstance.miniView = false;
             fixture.detectChanges();
@@ -441,9 +441,10 @@ describe('Navigation Drawer', () => {
             fixture = TestBed.createComponent(TestComponentDIComponent);
             fixture.detectChanges();
 
-            fixture.componentInstance.drawerMiniWidth = 60;
+            fixture.componentInstance.drawerMiniWidth = 68;
             fixture.detectChanges();
-            expect(fixture.componentInstance.viewChild.maxEdgeZone).toBe(66);
+            expect(fixture.componentInstance.viewChild.maxEdgeZone)
+                .toBe(fixture.componentInstance.drawerMiniWidth * 1.1);
 
             fixture.componentInstance.drawerMiniWidth = 80;
             fixture.detectChanges();

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts

@@ -183,7 +183,7 @@ export class IgxNavigationDrawerComponent implements
     @Input() public width = '280px';
 
     /**
-     * Width of the drawer in its mini state. Defaults to 60px.
+     * Width of the drawer in its mini state. Defaults to 68px.
      *
      * ```typescript
      * // get
@@ -195,7 +195,7 @@ export class IgxNavigationDrawerComponent implements
      * <igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
      * ```
      */
-    @Input() public miniWidth = '60px';
+    @Input() public miniWidth = '68px';
 
     /**
      * Pinned state change output for two-way binding.