Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Nov 7, 2023
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
435f2cf
feat(masthead-v2): put container in document flow
jkaeser Oct 3, 2023
07f40e0
feat(masthead-v2): format code
jkaeser Oct 3, 2023
b4d5088
feat(masthead-v2): update height on resize
jkaeser Oct 3, 2023
9f5f71f
feat(masthead-v2): accurately describe observer
jkaeser Oct 4, 2023
ec719e5
feat(masthead-v2): debounce resize observer callback
jkaeser Oct 10, 2023
a831f97
feat(masthead-v2): execute callback once after successive resizes
jkaeser Oct 11, 2023
76b6abd
Merge branch 'feat/masthead-v2-dev' into feat/set-masthead-height
andy-blum Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/styles/scss/components/masthead/_masthead.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
35 changes: 35 additions & 0 deletions packages/web-components/src/components/masthead/masthead-composite.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -1326,6 +1327,28 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
: unauthenticatedCtaButtons;
}

/**
* A reference to the dds-masthead element.
*/
@query(`${ddsPrefix}-masthead`)
mastheadRef;

/**
* Mutation observer
jkaeser marked this conversation as resolved.
Show resolved Hide resolved
*/
private _heightMutationObserver = new MutationObserver(
this._setContainerHeight.bind(this)
);
andy-blum marked this conversation as resolved.
Show resolved Hide resolved

/**
* Sets root element's height equal to the height of the fixed masthead elements.
*/
protected _setContainerHeight() {
const { mastheadRef } = this;
this.style.display = 'block';
jkaeser marked this conversation as resolved.
Show resolved Hide resolved
this.style.height = `${mastheadRef.getBoundingClientRect().height}px`;
jkaeser marked this conversation as resolved.
Show resolved Hide resolved
}

createRenderRoot() {
// We render child elements of `<dds-masthead-container>` by ourselves
return this;
Expand All @@ -1349,6 +1372,13 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
this._isMobileVersion = layoutBreakpoint.matches;
this.requestUpdate();
});

// Watch for changes to dds-masthead's immediate children.
this._heightMutationObserver.observe(this.mastheadRef, {
childList: true,
subtree: false,
attributes: false,
});
jkaeser marked this conversation as resolved.
Show resolved Hide resolved
}

updated(changedProperties) {
Expand All @@ -1364,6 +1394,11 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
}
}

disconnectedCallback() {
super.disconnectedCallback();
this._heightMutationObserver.disconnect();
}

render() {
const {
_isMobileVersion: isMobileVersion,
Expand Down