From 3b531845989aed4b167494e5e4030ce51cfc13ef Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Fri, 29 Mar 2019 16:09:54 +0000
Subject: [PATCH] info drawer fixes (#4529)

---
 .../components/info-drawer-tab.component.md   | 21 +++++++++++--------
 .../info-drawer/info-drawer.component.html    | 15 ++++++-------
 .../info-drawer/info-drawer.component.scss    |  5 +++++
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/docs/core/components/info-drawer-tab.component.md b/docs/core/components/info-drawer-tab.component.md
index 0804bf0b50..31707c6bb3 100644
--- a/docs/core/components/info-drawer-tab.component.md
+++ b/docs/core/components/info-drawer-tab.component.md
@@ -18,27 +18,28 @@ Render a tab with label:
 ```html
 <adf-info-drawer>
 
-    <adf-info-drawer-tab [label]="'Tab1'">
-        <div> Tab1 content</div>
+    <adf-info-drawer-tab label="Tab1">
+        <div>Tab1 content</div>
     </adf-info-drawer-tab>
 
-    <adf-info-drawer-tab [label]="'Tab2'">
-        <div> Tab2 content</div>
+    <adf-info-drawer-tab label="Tab2">
+        <div>Tab2 content</div>
     </adf-info-drawer-tab>
+
 </adf-info-drawer>
 ```
 
-Render tab with icon instead of labels:
+Render tab with icons instead of labels:
 
 ```html
 <adf-info-drawer>
 
-    <adf-info-drawer-tab [label]="'Tab1'" icon="comment">
-        <div> Tab1 content</div>
+    <adf-info-drawer-tab icon="comment">
+        <div>Tab1 content</div>
     </adf-info-drawer-tab>
 
-    <adf-info-drawer-tab [label]="'Tab2'" icon="people">
-            <div> Tab2 content</div>
+    <adf-info-drawer-tab icon="people">
+        <div>Tab2 content</div>
     </adf-info-drawer-tab>
 
 </adf-info-drawer>
@@ -46,6 +47,8 @@ Render tab with icon instead of labels:
 
 ![Info drawer screenshot](../../docassets/images/icon-tab.png)
 
+You can also combine `icon` and `label` properties.
+
 ## Class members
 
 ### Properties
diff --git a/lib/core/info-drawer/info-drawer.component.html b/lib/core/info-drawer/info-drawer.component.html
index 1c0b7c2072..9b19b524e9 100644
--- a/lib/core/info-drawer/info-drawer.component.html
+++ b/lib/core/info-drawer/info-drawer.component.html
@@ -8,13 +8,14 @@
 
     <ng-template #tabLayout>
         <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
-            <mat-tab *ngFor="let contentBlock of contentBlocks" [label]="contentBlock.label" class="adf-info-drawer-tab">
-                <ng-container *ngIf="contentBlock.icon">
-                    <ng-template mat-tab-label>
-                        <mat-icon>{{ contentBlock.icon }}</mat-icon>
-                        <span *ngIf="contentBlock.label">{{ contentBlock.label }}</span>
-                    </ng-template>
-                </ng-container>
+            <mat-tab *ngFor="let contentBlock of contentBlocks"
+                [label]="contentBlock.label"
+                class="adf-info-drawer-tab">
+
+                <ng-template mat-tab-label>
+                    <mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon>
+                    <span *ngIf="contentBlock.label">{{ contentBlock.label }}</span>
+                </ng-template>
 
                 <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
             </mat-tab>
diff --git a/lib/core/info-drawer/info-drawer.component.scss b/lib/core/info-drawer/info-drawer.component.scss
index 6d900442bf..cb0f1ab87d 100644
--- a/lib/core/info-drawer/info-drawer.component.scss
+++ b/lib/core/info-drawer/info-drawer.component.scss
@@ -1,7 +1,12 @@
 .adf {
+
     &-info-drawer {
         display: block;
 
+        .mat-tab-label {
+            min-width: 0;
+        }
+
         & &-layout {
 
             &-content {