chore(file-upload): after design review

Author: NikGurev

packages/components/top-bar/top-bar.scss

@@ -20,13 +20,15 @@
     .kbq-top-bar-container__start {
         display: flex;
         gap: var(--kbq-top-bar-container-start-gap);
-        flex: 1 1 var(--kbq-top-bar-container-start-basis);
+        flex: 1 0 var(--kbq-top-bar-container-start-basis);
         justify-content: flex-start;
+        min-width: 0;
     }
 
     .kbq-top-bar-container__end {
         display: flex;
         gap: var(--kbq-top-bar-container-end-gap);
+        justify-content: end;
     }
 
     .kbq-top-bar-container__with-overflow-items {

packages/docs-examples/components/top-bar/top-bar-breadcrumbs-adaptive/top-bar-breadcrumbs-adaptive-example.ts

@@ -41,20 +41,29 @@ type ExampleAction = {
                 <div class="layout-row layout-margin-right-m flex-none">
                     <img alt="example icon" src="assets/example-icon.svg" width="24" height="24" />
                 </div>
-                <div class="example-top-bar__breadcrumbs flex">
-                    <nav kbq-breadcrumbs size="big">
-                        <kbq-breadcrumb-item text="Main" routerLink="./main" />
-                        <kbq-breadcrumb-item text="Sections" routerLink="./main/sections" />
-                        <kbq-breadcrumb-item text="Page" routerLink="./main/sections/page" />
-                        <kbq-breadcrumb-item text="Details" routerLink="./main/sections/page/details" />
-                    </nav>
-                </div>
+                <nav kbq-breadcrumbs size="big">
+                    <kbq-breadcrumb-item text="Main" routerLink="./main" />
+                    <kbq-breadcrumb-item text="Sections" routerLink="./main/sections" />
+                    <kbq-breadcrumb-item text="Page" routerLink="./main/sections/page" />
+                    <kbq-breadcrumb-item routerLink="./main/sections/page/details" text="Details">
+                        <a
+                            class="kbq-truncate-line"
+                            *kbqBreadcrumbView
+                            routerLink="./main/sections/page/details"
+                            tabindex="-1"
+                        >
+                            <button disabled aria-current="page" kbq-button kbqBreadcrumb>
+                                <span>Details</span>
+                                <i kbq-icon="kbq-file-code-o_16"></i>
+                            </button>
+                        </a>
+                    </kbq-breadcrumb-item>
+                </nav>
             </div>
             <div kbqTopBarSpacer></div>
             <div
                 #kbqOverflowItems="kbqOverflowItems"
                 [debounceTime]="0"
-                [style.max-width.px]="166"
                 kbqOverflowItems
                 kbqTopBarContainer
                 placement="end"
@@ -145,17 +154,14 @@ type ExampleAction = {
             }
 
             .kbq-top-bar-container__start {
-                --kbq-top-bar-container-start-basis: 115px;
+                min-width: 125px;
+                --kbq-top-bar-container-start-basis: 125px;
             }
         }
 
         .example-kbq-top-bar__title {
             display: inline-flex;
         }
-
-        .kbq-overflow-items {
-            max-width: 210px;
-        }
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })

packages/docs-examples/components/top-bar/top-bar-breadcrumbs/top-bar-breadcrumbs-example.ts

@@ -32,19 +32,17 @@ import { map } from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <kbq-top-bar>
-            <div class="layout-align-start-center" kbqTopBarContainer placement="start">
+            <div class="layout-align-center-center" kbqTopBarContainer placement="start">
                 <div class="layout-row layout-margin-right-m flex-none">
                     <img alt="example icon" src="assets/example-icon.svg" width="24" height="24" />
                 </div>
-                <div class="example-top-bar__breadcrumbs flex">
-                    <nav kbq-breadcrumbs size="big">
-                        <kbq-breadcrumb-item text="Dashboards" routerLink="./dashboards" />
-                        <kbq-breadcrumb-item text="MEIS Dashboard" routerLink="./dashboards/dashboard123" />
-                    </nav>
-                </div>
+                <nav class="flex" kbq-breadcrumbs size="big">
+                    <kbq-breadcrumb-item text="Dashboards" routerLink="./dashboards" />
+                    <kbq-breadcrumb-item text="MEIS Dashboard" routerLink="./dashboards/dashboard123" />
+                </nav>
             </div>
             <div kbqTopBarSpacer></div>
-            <div #kbqOverflowItems="kbqOverflowItems" kbqOverflowItems kbqTopBarContainer placement="end">
+            <div #kbqOverflowItems="kbqOverflowItems" kbqTopBarContainer kbqOverflowItems placement="end">
                 <button
                     [kbqStyle]="KbqButtonStyles.Transparent"
                     [color]="KbqComponentColors.Contrast"
@@ -98,8 +96,8 @@ import { map } from 'rxjs/operators';
     `,
     styles: `
         :host {
-            .kbq-top-bar-container__end {
-                max-width: 110px;
+            .kbq-top-bar-container[placement='start'] {
+                min-width: 238px;
             }
         }
     `