fix(core): toolbar render spacer before overflow conditionally

SAP · Sep 23, 2024 · d0d28cd · d0d28cd
1 parent 08ef8f5
commit d0d28cd
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 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
@@ -178,6 +180,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);
 
@@ -224,6 +232,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 +328,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
@@ -47,7 +47,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 {}
 

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,8 +1,10 @@
 <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 [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>