From b599e3a41a62540e5337b97d4806efd2da41ef44 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Sun, 20 May 2018 20:07:10 +0100
Subject: [PATCH] breadcrumb bug fixes (#3348)

---
 .../app/components/files/files.component.html |  5 +++++
 .../breadcrumb/breadcrumb.component.html      |  6 ++++--
 .../breadcrumb/breadcrumb.component.scss      | 21 +++++++++++--------
 .../dropdown-breadcrumb.component.html        |  2 +-
 .../dropdown-breadcrumb.component.scss        |  6 +++---
 ...content-node-selector-panel.component.scss |  2 +-
 6 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 10ed77a5ef..e73bbbca08 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -32,6 +32,11 @@
         <adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
         </adf-sites-dropdown>
     </div>
+
+    <!-- demonstrates breadcrumb use outside of the toolbar -->
+    <adf-breadcrumb root="Personal Files" [target]="documentList" [folderNode]="documentList.folderNode">
+    </adf-breadcrumb>
+
     <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
         <adf-upload-drag-area fxFlex="1 1 auto"
                               [disabled]="disableDragArea"
diff --git a/lib/content-services/breadcrumb/breadcrumb.component.html b/lib/content-services/breadcrumb/breadcrumb.component.html
index 77fc8f460b..289e727344 100644
--- a/lib/content-services/breadcrumb/breadcrumb.component.html
+++ b/lib/content-services/breadcrumb/breadcrumb.component.html
@@ -4,8 +4,10 @@
         tabindex="0"
         class="adf-breadcrumb-dropdown-trigger"
         (click)="open()">
-        <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
-        <mat-icon [class.isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
+        <div class="adf-breadcrumb-dropdown-trigger-icon">
+            <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
+            <mat-icon [class.isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
+        </div>
     </button>
 
     <mat-select
diff --git a/lib/content-services/breadcrumb/breadcrumb.component.scss b/lib/content-services/breadcrumb/breadcrumb.component.scss
index b8c8ee86d1..f474fb7cb7 100644
--- a/lib/content-services/breadcrumb/breadcrumb.component.scss
+++ b/lib/content-services/breadcrumb/breadcrumb.component.scss
@@ -15,7 +15,6 @@
 	    font-weight: 600;
         letter-spacing: -0.2px;
         color: mat-color($foreground, text, 0.54);
-        width: 0;
 
         &-container {
             margin: 0;
@@ -32,7 +31,7 @@
                 height: 0;
                 overflow: hidden;
                 margin-top: 35px;
-                
+
                 &.mat-select {
                     width: 0;
                 }
@@ -51,20 +50,24 @@
                     color: mat-color($primary);
                     outline: none;
                 }
-    
+
+                &-icon {
+                    position: relative;
+                }
+
                 &-arrow {
                     font-size: 17px;
-                    position: relative;
-                    left: -28px;
-                    top: -2px;
+                    position: absolute;
+                    left: 4px;
+                    top: 4px;
                     color: white;
                     z-index: 2;
                 }
-    
+
                 &-arrow.isRoot {
                     visibility: hidden;
                 }
-    
+
                 &-arrow.focus {
                     border: none;
                 }
@@ -141,4 +144,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
index 32259b3f98..9fea2af697 100644
--- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
+++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
@@ -2,7 +2,7 @@
 
     <button
         tabindex="0"
-        class="adf-dropdown-breadcumb-trigger"
+        class="adf-dropdown-breadcrumb-trigger"
         (click)="open()"
         data-automation-id="dropdown-breadcrumb-trigger">
         <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
index c9ada8fcb3..6473445110 100644
--- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
+++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
@@ -9,12 +9,12 @@
             width: 100%;
         }
 
-        &-dropdown-breadcumb-trigger {
+        &-dropdown-breadcrumb-trigger {
             cursor: pointer;
             padding: 0;
             border: none;
             background: transparent;
-            
+
             &:focus {
                 color: mat-color($primary);
                 outline: none;
@@ -25,7 +25,7 @@
             margin-top: 5px;
         }
 
-        &-dropdown-breadcumb-trigger.isRoot {
+        &-dropdown-breadcrumb-trigger.isRoot {
             cursor: not-allowed;
         }
 
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
index e2f1d1d1b3..5ca1d76cc7 100644
--- a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
@@ -64,7 +64,7 @@
             }
 
             &-breadcrumb {
-                .adf-dropdown-breadcumb-trigger {
+                .adf-dropdown-breadcrumb-trigger {
                     outline: none;
                     .mat-icon {
                         color: mat-color($foreground, base, 0.45);