fix(core): toolbar render spacer before overflow conditionally

SAP · Oct 7, 2024 · 30bbfac · 30bbfac
1 parent 104e1f5
commit 30bbfac
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 47 deletions.
diff --git a/libs/core/toolbar/toolbar.component.html b/libs/core/toolbar/toolbar.component.html
@@ -3,7 +3,9 @@ <h4 fd-title class="fd-toolbar__title" [id]="titleId" #titleElement>{{ title }}<
 }
 <ng-content></ng-content>
 @if (overflownItems.length > 0) {
-    <fd-toolbar-spacer></fd-toolbar-spacer>
+    @if (!spacerUsed()) {
+        <fd-toolbar-spacer></fd-toolbar-spacer>
+    }
     <fd-toolbar-separator></fd-toolbar-separator>
     <fd-popover placement="bottom-end" [noArrow]="true" class="fd-popover">
         <fd-popover-control>

diff --git a/libs/core/toolbar/toolbar.component.ts b/libs/core/toolbar/toolbar.component.ts
@@ -7,6 +7,7 @@ import {
     Component,
     ContentChild,
     ContentChildren,
+    contentChildren,
     DestroyRef,
     ElementRef,
     forwardRef,
@@ -16,6 +17,7 @@ import {
     Input,
     Optional,
     QueryList,
+    signal,
     SkipSelf,
     ViewChild,
     ViewEncapsulation
@@ -46,7 +48,8 @@ import { ToolbarSeparatorComponent } from './toolbar-separator.component';
 import { ToolbarSpacerDirective } from './toolbar-spacer.directive';
 
 const ELEMENT_MARGIN = 8;
-const OVERFLOW_SPACE = 50 + 2 * ELEMENT_MARGIN;
+const OVERFLOW_BTN_COZY = 36;
+const OVERFLOW_BTN_COMPACT = 32;
 const MAX_CONTENT_SIZE = 99999999;
 
 export type ToolbarType = 'solid' | 'transparent' | 'auto' | 'info';
@@ -178,6 +181,12 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
     /** @hidden */
     overflownItems: ToolbarItem[] = [];
 
+    /** @hidden */
+    spacerUsed = signal(false);
+
+    /** @hidden */
+    spacerDirectives = contentChildren(ToolbarSpacerDirective);
+
     /** HTML Element Reference. */
     readonly elementRef = inject(ElementRef);
 
@@ -189,7 +198,8 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
 
     /** @hidden */
     private get _toolbarWidth(): number {
-        return (this.elementRef.nativeElement as HTMLElement).clientWidth - OVERFLOW_SPACE;
+        const _overflow_btn_size = this._contentDensityObserver.isCompact ? OVERFLOW_BTN_COMPACT : OVERFLOW_BTN_COZY;
+        return (this.elementRef.nativeElement as HTMLElement).clientWidth - (_overflow_btn_size + 2 * ELEMENT_MARGIN);
     }
 
     /** @hidden */
@@ -224,6 +234,8 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
 
     /** @hidden */
     ngAfterViewInit(): void {
+        this._updateSpacerUsed();
+
         this.overflowItems$ = combineLatest([
             this.resizeObserverService.observe(this.elementRef.nativeElement).pipe(map(() => this._toolbarWidth)),
             this.toolbarItems.changes.pipe(
@@ -318,6 +330,15 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
         this._refreshOverflow$.next();
     }
 
+    /** hidden */
+    private _updateSpacerUsed(): void {
+        // do not render extra spacer if there is at least one passed by the application
+        // and it is not fixed this.spacerUsed.set(this.spacer.length > 0 && this.spacer.some((spacer) => !spacer.fixed));
+        this.spacerUsed.set(
+            this.spacerDirectives().length > 0 && this.spacerDirectives().some((spacer) => !spacer.fixed)
+        );
+    }
+
     /** @hidden Get group number with the lowest priority.
      *  Uses for detecting a group of elements which would be hidden from the toolbar.
      *  */

diff --git a/libs/docs/core/toolbar/examples/toolbar-example.component.ts b/libs/docs/core/toolbar/examples/toolbar-example.component.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
 import { IconComponent } from '@fundamental-ngx/core/icon';
 import { TitleComponent } from '@fundamental-ngx/core/title';
 import {
@@ -47,7 +46,7 @@ export class ToolbarSeparatorExampleComponent {}
     selector: 'fd-toolbar-overflow-priority-example',
     templateUrl: './toolbar-overflow-priority-example.component.html',
     standalone: true,
-    imports: [ToolbarComponent, ButtonComponent, ToolbarItemDirective]
+    imports: [ToolbarComponent, ButtonComponent, ToolbarItemDirective, ToolbarSpacerDirective]
 })
 export class ToolbarOverflowPriorityExampleComponent {}
 
@@ -58,11 +57,3 @@ export class ToolbarOverflowPriorityExampleComponent {}
     imports: [ToolbarComponent, ButtonComponent, ToolbarItemDirective]
 })
 export class ToolbarOverflowGroupingExampleComponent {}
-
-@Component({
-    selector: 'fd-toolbar-size-example',
-    templateUrl: './toolbar-size-example.component.html',
-    standalone: true,
-    imports: [ToolbarComponent, ContentDensityDirective, ToolbarLabelDirective]
-})
-export class ToolbarSizeExampleComponent {}
diff --git a/libs/docs/core/toolbar/examples/toolbar-overflow-priority-example.component.html b/libs/docs/core/toolbar/examples/toolbar-overflow-priority-example.component.html
@@ -1,9 +1,102 @@
 <fd-toolbar [shouldOverflow]="true" ariaLabel="Toolbar overflow priority">
     <button fd-toolbar-item fd-button label="Button First"></button>
     <button fd-toolbar-item fd-button label="Always" fdOverflowPriority="always"></button>
+    <fd-toolbar-spacer fd-toolbar-item [fixed]="true" style="width: 50px"></fd-toolbar-spacer>
     <button fd-toolbar-item fd-button label="Never" fdOverflowPriority="never"></button>
     <button fd-toolbar-item fd-button label="Low" fdOverflowPriority="low"></button>
+    <fd-toolbar-spacer></fd-toolbar-spacer>
     <button fd-toolbar-item fd-button label="High" fdOverflowPriority="high"></button>
     <button fd-toolbar-item fd-button label="Disappear" fdOverflowPriority="disappear"></button>
     <button fd-toolbar-item fd-button label="Button Last"></button>
 </fd-toolbar>
+
+<fd-toolbar [shouldOverflow]="true">
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+</fd-toolbar>
+<fd-toolbar [shouldOverflow]="true">
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <fd-toolbar-spacer fd-toolbar-item fd-toolbar-item [fixed]="true" style="width: 50px"></fd-toolbar-spacer>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+</fd-toolbar>
+
+<fd-toolbar [shouldOverflow]="true">
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <fd-toolbar-spacer></fd-toolbar-spacer>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+</fd-toolbar>
+
+<fd-toolbar [shouldOverflow]="true">
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <fd-toolbar-spacer fd-toolbar-item [fixed]="true" style="width: 50px"></fd-toolbar-spacer>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <fd-toolbar-spacer></fd-toolbar-spacer>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+    <button fd-toolbar-item fd-button label="Button First"></button>
+</fd-toolbar>
diff --git a/libs/docs/core/toolbar/examples/toolbar-size-example.component.html b/libs/docs/core/toolbar/examples/toolbar-size-example.component.html
diff --git a/libs/docs/core/toolbar/toolbar-documentation.component.html b/libs/docs/core/toolbar/toolbar-documentation.component.html
@@ -1,5 +1,5 @@
 <fd-docs-section-title id="types" componentName="toolbar"> Toolbar Types </fd-docs-section-title>
-<description>
+<!-- <description>
     The Toolbar component follows the fundamental-styles guidelines for Toolbar. The default type is "solid"; no
     modifier is required. Use the <code class="code-snippet">[fdType]=""</code> property to set the toolbar type.
 </description>
@@ -34,9 +34,9 @@
     <fd-toolbar-overflow-example></fd-toolbar-overflow-example>
 </component-example>
 <code-example [exampleFiles]="toolbarOverflowExample"></code-example>
-<separator></separator>
+<separator></separator> -->
 
-<fd-docs-section-title id="overflow-priority" componentName="toolbar">
+<!-- <fd-docs-section-title id="overflow-priority" componentName="toolbar">
     Toolbar Overflow Priority
 </fd-docs-section-title>
 <description>
@@ -62,7 +62,7 @@
             toolbar, and will not be added to the overflow menu.
         </li>
     </ul>
-</description>
+</description> -->
 <component-example>
     <fd-toolbar-overflow-priority-example></fd-toolbar-overflow-priority-example>
 </component-example>
@@ -85,15 +85,7 @@
 </component-example>
 <code-example [exampleFiles]="toolbarOverflowGroupingExample"></code-example>
 <separator></separator>
-
-<fd-docs-section-title id="size" componentName="toolbar"> Toolbar Size </fd-docs-section-title>
-<description> The Toolbar size can be set to either compact(default) or cozy. T </description>
-<component-example>
-    <fd-toolbar-size-example></fd-toolbar-size-example>
-</component-example>
-<code-example [exampleFiles]="toolbarSizeExample"></code-example>
-<separator></separator>
-
+<!-- 
 <fd-docs-section-title id="spacer" componentName="toolbar"> Toolbar Spacer </fd-docs-section-title>
 <description>
     Spacers can be used to fill any remaining space either automatically or manually within a toolbar. A Spacer has 2
@@ -112,4 +104,4 @@
     <fd-toolbar-separator-example></fd-toolbar-separator-example>
 </component-example>
 <code-example [exampleFiles]="toolbarSeparatorExample"></code-example>
-<separator></separator>
+<separator></separator> -->
diff --git a/libs/docs/core/toolbar/toolbar-documentation.component.ts b/libs/docs/core/toolbar/toolbar-documentation.component.ts
@@ -12,7 +12,6 @@ import {
     ToolbarOverflowGroupingExampleComponent,
     ToolbarOverflowPriorityExampleComponent,
     ToolbarSeparatorExampleComponent,
-    ToolbarSizeExampleComponent,
     ToolbarSpacerExampleComponent,
     ToolbarTitleExampleComponent,
     ToolbarTypeExampleComponent
@@ -27,7 +26,6 @@ const toolbarOverflowExampleTs = 'toolbar-overflow-example.component.ts';
 const toolbarOverflowExampleHtml = 'toolbar-overflow-example.component.html';
 const toolbarOverflowPriorityExampleHtml = 'toolbar-overflow-priority-example.component.html';
 const toolbarOverflowGroupingExampleHtml = 'toolbar-overflow-grouping-example.component.html';
-const toolbarSizeExampleHtml = 'toolbar-size-example.component.html';
 
 @Component({
     selector: 'fd-docs-toolbar',
@@ -45,7 +43,6 @@ const toolbarSizeExampleHtml = 'toolbar-size-example.component.html';
         ToolbarOverflowExampleComponent,
         ToolbarOverflowPriorityExampleComponent,
         ToolbarOverflowGroupingExampleComponent,
-        ToolbarSizeExampleComponent,
         ToolbarSpacerExampleComponent,
         ToolbarSeparatorExampleComponent
     ]
@@ -112,12 +109,4 @@ export class ToolbarDocumentationComponent {
             fileName: 'toolbar-overflow-grouping-example'
         }
     ];
-
-    toolbarSizeExample: ExampleFile[] = [
-        {
-            language: 'html',
-            code: getAssetFromModuleAssets(toolbarSizeExampleHtml),
-            fileName: 'toolbar-size-example'
-        }
-    ];
 }