fix(code-block): show viewAll on overflow (#DS-4920) (#1602)

artembelik · web-flow · commit 96b8ed7bc502 · 2026-05-29T15:24:11.000+03:00
Co-authored-by: artembelik &lt;24925224+artembelik@users.noreply.github.com&gt;
diff --git a/packages/components/code-block/__screenshots__/01-dark.png b/packages/components/code-block/__screenshots__/01-dark.png
diff --git a/packages/components/code-block/__screenshots__/01-light.png b/packages/components/code-block/__screenshots__/01-light.png
diff --git a/packages/components/code-block/code-block.html b/packages/components/code-block/code-block.html
@@ -99,10 +99,11 @@
     [tabIndex]="codeContentTabIndex"
 >
     <pre
+        #codeBlockPre
         class="kbq-code-block__pre"
     ><code kbqCodeBlockHighlight class="kbq-code-block__code" [file]="file">{{ file.content }}</code></pre>
 
-    @if (maxHeight) {
+    @if (contentExceedsMaxHeight()) {
         <div
             class="kbq-code-block__view-all"
             [class.kbq-code-block__view-all_collapsed]="!viewAll"
diff --git a/packages/components/code-block/code-block.spec.ts b/packages/components/code-block/code-block.spec.ts
@@ -1,10 +1,12 @@
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform } from '@angular/cdk/platform';
 import { ChangeDetectionStrategy, Component, DebugElement, Provider, Type } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { KbqTabNavBar } from '@koobiq/components/tabs';
 import { HLJSApi } from 'highlight.js';
+import { Observable, Subject } from 'rxjs';
 import { KBQ_CODE_BLOCK_FALLBACK_FILE_NAME, KbqCodeBlock, kbqCodeBlockLocaleConfigurationProvider } from './code-block';
 import {
     KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE,
@@ -16,6 +18,18 @@ import { KbqCodeBlockFile } from './types';
 
 const HOVER_DEBOUNCE_TIME = 100;
 
+class MockSharedResizeObserver {
+    private readonly subject = new Subject<ResizeObserverEntry[]>();
+
+    observe(_element: Element): Observable<ResizeObserverEntry[]> {
+        return this.subject.asObservable();
+    }
+
+    triggerResize(): void {
+        this.subject.next([]);
+    }
+}
+
 const createComponent = <T>(component: Type<T>, providers: Provider[] = []): ComponentFixture<T> => {
     TestBed.configureTestingModule({ imports: [component, NoopAnimationsModule], providers });
     const fixture = TestBed.createComponent<T>(component);
@@ -61,6 +75,12 @@ const getViewAllButtonElement = (debugElement: DebugElement): HTMLButtonElement
     return debugElement.nativeElement.querySelector('.kbq-code-block__view-all__button');
 };
 
+const mockPreHeight = (debugElement: DebugElement, height: number): void => {
+    const pre: HTMLElement = debugElement.nativeElement.querySelector('.kbq-code-block__pre');
+
+    Object.defineProperty(pre, 'offsetHeight', { get: () => height, configurable: true });
+};
+
 @Component({
     imports: [KbqCodeBlockModule],
     template: `
@@ -133,6 +153,24 @@ export class TestCodeBlockWithTemplateTabLink {
     ];
 }
 
+@Component({
+    imports: [KbqCodeBlockModule],
+    template: `
+        <kbq-code-block [files]="files" [maxHeight]="maxHeight" />
+    `,
+    changeDetection: ChangeDetectionStrategy.Default
+})
+class MaxHeightCodeBlock {
+    maxHeight = 200;
+    files: KbqCodeBlockFile[] = [
+        {
+            language: 'html',
+            filename: 'index.html',
+            content: `<!DOCTYPE html>\n<html lang="en">\n\t<head>\n\t\t<title>Koobiq</title>\n\t</head>\n\t<body>\n\t\t<app-root>Loading...</app-root>\n\t</body>\n</html>`
+        }
+    ];
+}
+
 describe(KbqCodeBlock.name, () => {
     it('should hide lineNumbers', () => {
         const fixture = createComponent(BaseCodeBlock);
@@ -498,24 +536,32 @@ describe(KbqCodeBlock.name, () => {
         expect(codeBlock.classes['kbq-code-block_show-actionbar']).toBeTruthy();
     }));
 
-    it('should show viewAll button', () => {
-        const fixture = createComponent(BaseCodeBlock);
-        const { debugElement, componentInstance } = fixture;
+    it('should show viewAll button when content overflows maxHeight', () => {
+        const mockResizeObserver = new MockSharedResizeObserver();
+        const fixture = createComponent(MaxHeightCodeBlock, [
+            { provide: SharedResizeObserver, useValue: mockResizeObserver }
+        ]);
+        const { debugElement } = fixture;
 
         expect(getViewAllButtonElement(debugElement)).toBeNull();
 
-        componentInstance.maxHeight = 300;
+        mockPreHeight(debugElement, 500);
+        mockResizeObserver.triggerResize();
         fixture.detectChanges();
 
         expect(getViewAllButtonElement(debugElement)).toBeInstanceOf(HTMLButtonElement);
     });
 
     it('should toggle viewAll property by click', () => {
-        const fixture = createComponent(BaseCodeBlock);
-        const { debugElement, componentInstance } = fixture;
+        const mockResizeObserver = new MockSharedResizeObserver();
+        const fixture = createComponent(MaxHeightCodeBlock, [
+            { provide: SharedResizeObserver, useValue: mockResizeObserver }
+        ]);
+        const { debugElement } = fixture;
         const spy = jest.spyOn(geCodeBlockDebugElement(debugElement).componentInstance, 'toggleViewAll');
 
-        componentInstance.maxHeight = 300;
+        mockPreHeight(debugElement, 500);
+        mockResizeObserver.triggerResize();
         fixture.detectChanges();
 
         getViewAllButtonElement(debugElement).click();
@@ -524,18 +570,65 @@ describe(KbqCodeBlock.name, () => {
     });
 
     it('should toggle viewAll property by ENTER keydown', () => {
-        const fixture = createComponent(BaseCodeBlock);
-        const { debugElement, componentInstance } = fixture;
+        const mockResizeObserver = new MockSharedResizeObserver();
+        const fixture = createComponent(MaxHeightCodeBlock, [
+            { provide: SharedResizeObserver, useValue: mockResizeObserver }
+        ]);
+        const { debugElement } = fixture;
         const spy = jest.spyOn(geCodeBlockDebugElement(debugElement).componentInstance, 'toggleViewAll');
 
-        componentInstance.maxHeight = 300;
+        mockPreHeight(debugElement, 500);
+        mockResizeObserver.triggerResize();
         fixture.detectChanges();
 
         getViewAllButtonElement(debugElement).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
         expect(spy).toHaveBeenCalledTimes(1);
     });
 
+    describe('viewAll button visibility', () => {
+        it('should not show viewAll button when content fits within maxHeight', () => {
+            const fixture = createComponent(MaxHeightCodeBlock, [
+                { provide: SharedResizeObserver, useValue: new MockSharedResizeObserver() }
+            ]);
+
+            // jsdom returns offsetHeight = 0 by default, which is less than maxHeight = 200
+            expect(getViewAllButtonElement(fixture.debugElement)).toBeNull();
+        });
+
+        it('should show viewAll button when content overflows maxHeight', () => {
+            const mockResizeObserver = new MockSharedResizeObserver();
+            const fixture = createComponent(MaxHeightCodeBlock, [
+                { provide: SharedResizeObserver, useValue: mockResizeObserver }
+            ]);
+            const { debugElement } = fixture;
+
+            mockPreHeight(debugElement, 500);
+            mockResizeObserver.triggerResize();
+            fixture.detectChanges();
+
+            expect(getViewAllButtonElement(debugElement)).toBeInstanceOf(HTMLButtonElement);
+        });
+
+        it('should hide viewAll button when content shrinks below maxHeight', () => {
+            const mockResizeObserver = new MockSharedResizeObserver();
+            const fixture = createComponent(MaxHeightCodeBlock, [
+                { provide: SharedResizeObserver, useValue: mockResizeObserver }
+            ]);
+            const { debugElement } = fixture;
+
+            mockPreHeight(debugElement, 500);
+            mockResizeObserver.triggerResize();
+            fixture.detectChanges();
+            expect(getViewAllButtonElement(debugElement)).toBeInstanceOf(HTMLButtonElement);
+
+            mockPreHeight(debugElement, 100);
+            mockResizeObserver.triggerResize();
+            fixture.detectChanges();
+            expect(getViewAllButtonElement(debugElement)).toBeNull();
+        });
+    });
+
     it('should use template for tabLink when provided', () => {
         const fixture = createComponent(TestCodeBlockWithTemplateTabLink);
         const { debugElement, componentInstance } = fixture;
diff --git a/packages/components/code-block/code-block.ts b/packages/components/code-block/code-block.ts
@@ -1,5 +1,6 @@
 import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Platform } from '@angular/cdk/platform';
 import { CdkScrollable, CdkScrollableModule, ExtendedScrollToOptions } from '@angular/cdk/scrolling';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
@@ -23,6 +24,7 @@ import {
     Provider,
     Renderer2,
     SecurityContext,
+    signal,
     TemplateRef,
     ViewChild,
     ViewEncapsulation
@@ -110,15 +112,19 @@ export class KbqCodeBlock implements AfterViewInit {
     /**
      * Reference to the scrollable code content.
      *
-     * @deprecated Use `scrollTo` method instead.
+     * @deprecated Use `scrollTo` method instead, will be removed from public API (mark as private) in the next major release.
      *
      * @docs-private
      */
     @ViewChild(CdkScrollable) readonly scrollableCodeContent: CdkScrollable;
 
-    /** @docs-private */
     @ViewChild(KbqCodeBlockHighlight) private readonly highlight!: KbqCodeBlockHighlight;
 
+    @ViewChild('codeBlockPre') private readonly preElementRef!: ElementRef<HTMLElement>;
+
+    /** @docs-private */
+    protected readonly contentExceedsMaxHeight = signal(false);
+
     /** @docs-private */
     @ContentChild(KbqCodeBlockTabLinkContent, { read: TemplateRef })
     protected readonly tabLinkTemplate: TemplateRef<KbqTabLinkTemplateContext>;
@@ -298,6 +304,7 @@ export class KbqCodeBlock implements AfterViewInit {
     private readonly clipboard = inject(Clipboard);
     private readonly domSanitizer = inject(DomSanitizer);
     private readonly document = inject<Document>(DOCUMENT);
+    private readonly sharedResizeObserver = inject(SharedResizeObserver);
     /**
      * @docs-private
      */
@@ -311,6 +318,7 @@ export class KbqCodeBlock implements AfterViewInit {
     ngAfterViewInit(): void {
         this.handleScroll();
         this.trackHoverState();
+        this.setupContentOverflowDetection();
 
         // Setup initial actionbar display state
         this.setupActionbarDisplay();
@@ -413,6 +421,30 @@ export class KbqCodeBlock implements AfterViewInit {
             });
     }
 
+    private setupContentOverflowDetection(): void {
+        if (!this.maxHeight) return;
+
+        const checkOverflow = () => {
+            this.contentExceedsMaxHeight.set(this.preElementRef.nativeElement.offsetHeight > this.maxHeight);
+        };
+
+        checkOverflow();
+
+        if (this.highlight?.pending()) {
+            toObservable(this.highlight.pending, { injector: this.injector })
+                .pipe(
+                    filter((pending) => !pending),
+                    take(1)
+                )
+                .subscribe(checkOverflow);
+        }
+
+        this.sharedResizeObserver
+            .observe(this.preElementRef.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(checkOverflow);
+    }
+
     /**
      * Handles the scroll event on the scrollable code content element and updates the header shadow accordingly.
      */
diff --git a/packages/components/code-block/e2e.ts b/packages/components/code-block/e2e.ts
@@ -49,14 +49,23 @@ import { KbqCodeBlock, KbqCodeBlockFile } from '@koobiq/components/code-block';
 
         <!-- maxHeight -->
         <div>
-            <kbq-code-block maxHeight="200" [files]="[cssFile, htmlFile, typescriptFile]" />
+            <kbq-code-block
+                maxHeight="200"
+                data-testid="e2eCodeBlockMaxHeight"
+                [files]="[cssFile, htmlFile, typescriptFile]"
+            />
         </div>
 
         <!-- maxHeight filled -->
         <div>
             <kbq-code-block maxHeight="200" filled [files]="[cssFile, htmlFile]" />
         </div>
 
+        <!-- maxHeight single-line -->
+        <div>
+            <kbq-code-block maxHeight="200" data-testid="e2eCodeBlockMaxHeightSingleLine" [files]="[singleLineFile]" />
+        </div>
+
         <!-- noBorder hideTabs lineNumbers -->
         <div>
             <kbq-code-block lineNumbers noBorder hideTabs [files]="[typescriptFile]" />
diff --git a/tools/public_api_guard/components/code-block.api.md b/tools/public_api_guard/components/code-block.api.md
@@ -18,6 +18,7 @@ import type { LanguageFn } from 'highlight.js';
 import { Provider } from '@angular/core';
 import { Signal } from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { WritableSignal } from '@angular/core';
 
 // @public
 export const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
@@ -54,6 +55,7 @@ export class KbqCodeBlock implements AfterViewInit {
     // @deprecated (undocumented)
     set codeFiles(files: KbqCodeBlockFile[]);
     protected readonly componentColor: typeof KbqComponentColors;
+    protected readonly contentExceedsMaxHeight: WritableSignal<boolean>;
     protected copyCode(): void;
     protected downloadCode(): void;
     protected readonly fallbackFileName: string;
