feat(masthead-v2): add masthead to document flow (#10998)

* feat(masthead-v2): put container in document flow * feat(masthead-v2): format code * feat(masthead-v2): update height on resize * feat(masthead-v2): accurately describe observer * feat(masthead-v2): debounce resize observer callback * feat(masthead-v2): execute callback once after successive resizes --------- Co-authored-by: Andy Blum <[email protected]>
carbon-design-system · Nov 7, 2023 · e1debd8 · e1debd8
1 parent 911f802
commit e1debd8
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss
@@ -180,6 +180,7 @@ $search-transition-timing: 95ms;
   :host(#{$dds-prefix}-masthead-composite),
   :host(#{$dds-prefix}-masthead-container),
   :host(#{$dds-prefix}-cloud-masthead-container) {
+    display: block;
     position: relative;
     z-index: 900;
     padding-top: $carbon--layout-04;

diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts
@@ -14,6 +14,7 @@ import {
   customElement,
   LitElement,
   TemplateResult,
+  query,
 } from 'lit-element';
 import { nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
@@ -1326,6 +1327,48 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
       : unauthenticatedCtaButtons;
   }
 
+  /**
+   * A reference to the dds-masthead element.
+   */
+  @query(`${ddsPrefix}-masthead`)
+  mastheadRef;
+
+  /**
+   * Resize observer to trigger container height recalculations.
+   *
+   * @private
+   */
+  private _heightResizeObserver = new ResizeObserver(
+    this._resizeObserverCallback.bind(this)
+  );
+
+  /**
+   * Prevents resize observer from blocking main thread.
+   */
+  private _resizeObserverThrottle?: NodeJS.Timeout;
+
+  /**
+   * Throttled callback for _heightResizeObserver.
+   */
+  protected _resizeObserverCallback() {
+    clearTimeout(this._resizeObserverThrottle);
+    this._resizeObserverThrottle = setTimeout(
+      this._setContainerHeight.bind(this),
+      100
+    );
+  }
+
+  /**
+   * Sets root element's height equal to the height of the fixed masthead elements.
+   */
+  protected _setContainerHeight() {
+    const { mastheadRef } = this;
+    if (mastheadRef) {
+      this.style.display = 'block';
+      this.style.height = `${mastheadRef.getBoundingClientRect().height}px`;
+    }
+  }
+
   createRenderRoot() {
     // We render child elements of `<dds-masthead-container>` by ourselves
     return this;
@@ -1349,6 +1392,9 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
       this._isMobileVersion = layoutBreakpoint.matches;
       this.requestUpdate();
     });
+
+    // Keep render root's height in sync with dds-masthead.
+    this._heightResizeObserver.observe(this.mastheadRef);
   }
 
   updated(changedProperties) {
@@ -1364,6 +1410,11 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._heightResizeObserver.disconnect();
+  }
+
   render() {
     const {
       _isMobileVersion: isMobileVersion,