Merge pull request #2420 from Teradata/fix/alert-height

fix(components): adjusting the height layout of alert on resize
Teradata · Feb 19, 2025 · 463b294 · 463b294
2 parents f29c9b9 + 6f94c42
commit 463b294
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/libs/components/src/alert/alert-base.ts b/libs/components/src/alert/alert-base.ts
@@ -6,14 +6,18 @@ import { Action, CloseReason, events } from '@material/banner/constants';
 
 import { html, LitElement, TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 export class AlertBase extends LitElement {
   protected mdcFoundation!: MDCBannerFoundation;
   protected readonly mdcFoundationClass = MDCBannerFoundation;
+  private _resizeObserver!: ResizeObserver;
 
   @query('.mdc-banner') protected mdcRoot!: HTMLElement;
   @query('.mdc-banner__content') protected mdcContent!: HTMLElement;
+  @query('.mdc-banner__graphic-text-wrapper')
+  protected mdcGraphicTextWrapper!: HTMLElement;
+  @state() protected currentWidth = 0;
 
   @property({ type: Boolean, reflect: true })
   @observer(function (this: AlertBase, value: boolean) {
@@ -41,6 +45,26 @@ export class AlertBase extends LitElement {
   @property()
   state = '';
 
+  constructor() {
+    super();
+    // Create ResizeObserver with callback
+    this._resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (newWidth !== this.currentWidth) {
+          this.currentWidth = newWidth;
+          this.mdcFoundation.layout();
+        }
+      }
+    });
+  }
+
+  // Cleanup when element is removed
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver.disconnect();
+  }
+
   protected reason: CloseReason = CloseReason.UNSPECIFIED;
 
   protected override render() {
@@ -53,7 +77,12 @@ export class AlertBase extends LitElement {
       active: this.state === 'active',
     };
     return html` <div class="${classMap(classes)}" role="banner">
-      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive" aria-label="${this.titleText}">
+      <div
+        class="mdc-banner__content"
+        role="alertdialog"
+        aria-live="assertive"
+        aria-label="${this.titleText}"
+      >
         <div class="mdc-banner__graphic-text-wrapper">
           ${this.icon ? this.renderIcon() : ''}
           <div class="mdc-banner__text">
@@ -70,7 +99,11 @@ export class AlertBase extends LitElement {
 
   /** @soyTemplate */
   protected renderIcon(): TemplateResult {
-    return html` <div class="mdc-banner__graphic" role="img" aria-label="${this.iconAriaLabel}">
+    return html` <div
+      class="mdc-banner__graphic"
+      role="img"
+      aria-label="${this.iconAriaLabel}"
+    >
       <slot name="icon">
         <cv-icon class="mdc-banner__icon"> ${this.icon} </cv-icon>
       </slot>
@@ -98,7 +131,7 @@ export class AlertBase extends LitElement {
             bubbles: true,
             cancelable: true,
             detail: { reason: action },
-          })
+          }),
         ),
       notifyClosed: () => {
         /* */
@@ -134,5 +167,7 @@ export class AlertBase extends LitElement {
     if (this.open) {
       this.mdcFoundation.open();
     }
+    // Observe when element is resized
+    this._resizeObserver.observe(this.mdcGraphicTextWrapper);
   }
 }
diff --git a/libs/components/src/alert/alert.spec.ts b/libs/components/src/alert/alert.spec.ts
@@ -4,6 +4,21 @@
 import { it, describe, expect } from 'vitest';
 import { CovalentAlert } from './alert';
 
+global.ResizeObserver = class MockResizeObserver {
+  constructor() {
+    /**/
+  }
+  observe() {
+    /**/
+  }
+  unobserve() {
+    /**/
+  }
+  disconnect() {
+    /**/
+  }
+};
+
 describe('Alert', () => {
   it('should work', () => {
     expect(new CovalentAlert()).toBeDefined();