[ADF-3053] breadcrumb fixes (#3406)

* translate breadcrumb root in demo shell

* optional "max items" feature and style fixes

* should not be restricted by default

* style updates

* toolbar and breadcrumb layout fixes

* breadcrumb demo and testing page

* full toolbar scenario

* fix translation issue with the dropdown and custom root

* a11y fixes

* fix issue with duplicate id, remove unused attribute

lib/content-services/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container">
+<nav *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container" role="list">
     <button
         *ngIf="hasPreviousNodes()"
         tabindex="0"
@@ -11,7 +11,7 @@
     </button>
 
     <mat-select
-        #select
+        #dropdown
         *ngIf="hasPreviousNodes()"
         class="adf-breadcrumb-dropdown-path"
         tabindex="0">
@@ -21,15 +21,16 @@
             (click)="onRoutePathClick(node, $event)"
             class="adf-breadcrumb-path-option"
             tabindex="0">
-            {{ node.name }}
+            {{ node.name | translate }}
         </mat-option>
     </mat-select>
 
-    <li *ngFor="let item of lastNodes; let last = last"
+    <div *ngFor="let item of lastNodes; let last = last"
         [class.active]="last"
         [ngSwitch]="last"
         title="{{ item.name | translate }}"
-        class="adf-breadcrumb-item">
+        class="adf-breadcrumb-item"
+        role="listitem">
 
         <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
             class="adf-breadcrumb-item-anchor"
@@ -44,13 +45,13 @@
         <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
             chevron_right
         </mat-icon>
-    </li>
-</div>
+    </div>
+</nav>
 
-<div *ngIf="!folderNode && hasRoot" data-automation-id="breadcrumb">
-    <li class="adf-breadcrumb-item active">
+<nav *ngIf="!folderNode && hasRoot" data-automation-id="breadcrumb" role="navigation">
+    <div class="adf-breadcrumb-item active" role="listitem">
         <div class="adf-breadcrumb-item-current">
             {{ root | translate }}
         </div>
-    </li>
-</div>
+    </div>
+</nav>

lib/content-services/breadcrumb/breadcrumb.component.scss

@@ -15,6 +15,7 @@
 	    font-weight: 600;
         letter-spacing: -0.2px;
         color: mat-color($foreground, text, 0.54);
+        overflow: hidden;
 
         &-container {
             margin: 0;
@@ -89,14 +90,20 @@
             text-align: left;
             opacity: 0.6;
 
+            flex: 0 10 auto;
+            min-width: 35px;
+            text-overflow: ellipsis;
+
             &:hover,
             &.active {
                 opacity: 1;
             }
 
             &.active {
-                flex: 1 0 auto;
+                flex: 1 1 auto;
                 color: mat-color($foreground, text, 0.87);
+                min-width: initial;
+                width: auto;
 		    }
 
             &-chevron {
@@ -118,23 +125,21 @@
             }
 
             &-anchor {
+                box-sizing: border-box;
                 color: inherit;
                 text-decoration: none;
-                display: block;
+                display: inline-block;
                 width: 100%;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-            }
-
-            &.active {
-                display: block;
+                flex: 0 1 auto;
             }
 
             &-current {
                 text-overflow: ellipsis;
                 overflow: hidden;
-                max-width: 300px;
+                white-space: nowrap;
             }
         }
 

lib/content-services/breadcrumb/breadcrumb.component.ts

@@ -62,16 +62,16 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     @Input()
     transform: (node) => any;
 
-    @ViewChild('select') selectbox: MatSelect;
+    @ViewChild('dropdown')
+    dropdown: MatSelect;
+
+    /** Maximum number of nodes to display before wrapping them with a dropdown element.  */
+    @Input()
+    maxItems: number;
 
     previousNodes: PathElementEntity[];
     lastNodes: PathElementEntity[];
 
-    /** Number of successive nodes that are going to be shown inside the
-     * breadcrumb
-     */
-    SUCCESSIVE_NODES = 3;
-
     route: PathElementEntity[] = [];
 
     get hasRoot(): boolean {
@@ -80,7 +80,7 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
 
     /** Emitted when the user clicks on a breadcrumb. */
     @Output()
-    navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
+    navigate = new EventEmitter<PathElementEntity>();
 
     ngOnInit() {
         this.transform = this.transform ? this.transform : null;
@@ -101,9 +101,9 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     }
 
     protected recalculateNodes(): void {
-        if (this.route.length > this.SUCCESSIVE_NODES) {
-            this.lastNodes = this.route.slice(this.route.length - this.SUCCESSIVE_NODES);
-            this.previousNodes = this.route.slice(0, this.route.length - this.SUCCESSIVE_NODES);
+        if (this.maxItems && this.route.length > this.maxItems) {
+            this.lastNodes = this.route.slice(this.route.length - this.maxItems);
+            this.previousNodes = this.route.slice(0, this.route.length - this.maxItems);
             this.previousNodes.reverse();
         } else {
             this.lastNodes = this.route;
@@ -112,8 +112,8 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     }
 
     open(): void {
-        if (this.selectbox) {
-            this.selectbox.open();
+        if (this.dropdown) {
+            this.dropdown.open();
         }
     }
 

lib/content-services/breadcrumb/dropdown-breadcrumb.component.html

@@ -10,7 +10,7 @@
     <mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
 
     <mat-select
-        #select
+        #dropdown
         *ngIf="hasPreviousNodes()"
         class="adf-dropdown-breadcrumb-path"
         tabindex="0"

lib/content-services/breadcrumb/dropdown-breadcrumb.component.spec.ts

@@ -166,7 +166,7 @@ describe('DropdownBreadcrumb', () => {
 
     it('should open the selectbox when clicking on the folder icon', (done) => {
         triggerComponentChange(fakeNodeWithCreatePermission);
-        spyOn(component.selectbox, 'open');
+        spyOn(component.dropdown, 'open');
 
         fixture.whenStable().then(() => {
 
@@ -174,7 +174,7 @@ describe('DropdownBreadcrumb', () => {
 
             fixture.whenStable().then(() => {
 
-                expect(component.selectbox.open).toHaveBeenCalled();
+                expect(component.dropdown.open).toHaveBeenCalled();
                 done();
             });
         });

lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts

@@ -31,8 +31,8 @@ import { BreadcrumbComponent } from './breadcrumb.component';
 })
 export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements OnChanges {
 
-    @ViewChild('select')
-    selectbox: MatSelect;
+    @ViewChild('dropdown')
+    dropdown: MatSelect;
 
     currentNode: PathElementEntity;
     previousNodes: PathElementEntity[];
@@ -60,11 +60,11 @@ export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements
     }
 
     /**
-     * Opens the selectbox overlay
+     * Opens the node picker menu
      */
     open(): void {
-        if (this.selectbox) {
-            this.selectbox.open();
+        if (this.dropdown) {
+            this.dropdown.open();
         }
     }
 

lib/content-services/upload/components/upload-drag-area.component.html

@@ -1,4 +1,4 @@
-<div [file-draggable]="isDroppable()" id="UploadBorder" class="upload-border"
+<div [file-draggable]="isDroppable()" class="upload-border"
      (filesDropped)="onFilesDropped($event)"
      (filesEntityDropped)="onFilesEntityDropped($event)"
      (folderEntityDropped)="onFolderEntityDropped($event)"