fix(masthead): cope with missing MediaQueryList.addEventListener

Found that Safari 13 does not have `.addEventListener()` method in `MediaQueryList` class, causing JavaScript error in that browser. This change fixes the issue, by using the right method in `<footer-nav-group>`, and by moving from `MediaQueryList` to a CSS-based approach in other components. Fixes carbon-design-system#3934.
asudoh · Sep 14, 2020 · 75b1bc7 · 75b1bc7
1 parent 2e2a3fa
commit 75b1bc7
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 140 deletions.
diff --git a/packages/web-components/src/components/footer/footer-nav-group.ts b/packages/web-components/src/components/footer/footer-nav-group.ts
@@ -109,10 +109,10 @@ class DDSFooterNavGroup extends StableSelectorMixin(LitElement) {
     const mediaQueryList = this.ownerDocument!.defaultView!.matchMedia(mediaStickExpanded);
     this._shouldStickExpanded = mediaQueryList.matches;
     const { _handleChangeMediaQuery: handleChangeMediaQuery } = this;
-    mediaQueryList.addEventListener('change', handleChangeMediaQuery);
+    mediaQueryList.addListener(handleChangeMediaQuery);
     this._hChangeMediaQuery = {
       release() {
-        mediaQueryList.removeEventListener('change', handleChangeMediaQuery);
+        mediaQueryList.removeListener(handleChangeMediaQuery);
       },
     } as Handle;
   }

diff --git a/packages/web-components/src/components/masthead/masthead-global-bar.ts b/packages/web-components/src/components/masthead/masthead-global-bar.ts
@@ -7,14 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { classMap } from 'lit-html/directives/class-map';
 import { html, internalProperty, property, customElement, LitElement } from 'lit-element';
-import { breakpoints } from '@carbon/layout/es/index.js';
 import HostListener from 'carbon-web-components/es/globals/decorators/host-listener.js';
 import HostListenerMixin from 'carbon-web-components/es/globals/mixins/host-listener.js';
-import on from 'carbon-components/es/globals/js/misc/on';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js';
-import Handle from '../../globals/internal/handle';
 import styles from './masthead.scss';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -26,11 +24,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-masthead-global-bar`)
 class DDSMastheadGlobalBar extends FocusMixin(HostListenerMixin(LitElement)) {
-  /**
-   * Media query listener handler.
-   */
-  private _mqHandler: Handle | null = null;
-
   /**
    * The shadow slot this action bar should be in.
    */
@@ -41,13 +34,7 @@ class DDSMastheadGlobalBar extends FocusMixin(HostListenerMixin(LitElement)) {
    * Search bar opened flag.
    */
   @internalProperty()
-  private _openedSearch = false;
-
-  /**
-   * Medium breakpoint flag.
-   */
-  @internalProperty()
-  private _responsiveMd = false;
+  private _hasSearchActive = false;
 
   /**
    * Handles toggle event from the search component.
@@ -57,41 +44,18 @@ class DDSMastheadGlobalBar extends FocusMixin(HostListenerMixin(LitElement)) {
   @HostListener('parentRoot:eventToggleSearch')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleSearchToggle = (event: Event) => {
-    this._openedSearch = (event as CustomEvent).detail.active;
+    this._hasSearchActive = (event as CustomEvent).detail.active;
   };
 
-  /**
-   * Handles media query event.
-   *
-   * @param event The event.
-   */
-  private _handleMediaQuery(event: Event) {
-    this._responsiveMd = (event as MediaQueryListEvent).matches;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    const _mqMedium = this.ownerDocument?.defaultView?.matchMedia(`(max-width: ${breakpoints.md.width})`);
-    this._responsiveMd = _mqMedium ? _mqMedium.matches : false;
-
-    this._mqHandler = on(_mqMedium, 'change', this._handleMediaQuery.bind(this));
-  }
-
-  disconnectedCallback() {
-    if (this._mqHandler) {
-      this._mqHandler = this._mqHandler.release();
-    }
-
-    super.disconnectedCallback();
-  }
-
   render() {
-    return this._openedSearch && this._responsiveMd
-      ? html``
-      : html`
-          <slot></slot>
-        `;
+    const { _hasSearchActive: hasSearchActive } = this;
+    const classes = classMap({
+      [`${ddsPrefix}-ce--header__global__container`]: true,
+      [`${ddsPrefix}-ce--header__global__container--has-search-active`]: hasSearchActive,
+    });
+    return html`
+      <div class="${classes}"><slot></slot></div>
+    `;
   }
 
   /**

diff --git a/packages/web-components/src/components/masthead/masthead-logo.ts b/packages/web-components/src/components/masthead/masthead-logo.ts
@@ -7,15 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { classMap } from 'lit-html/directives/class-map';
 import { html, internalProperty, property, customElement } from 'lit-element';
-import { breakpoints } from '@carbon/layout/es/index.js';
+import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import HostListener from 'carbon-web-components/es/globals/decorators/host-listener.js';
 import HostListenerMixin from 'carbon-web-components/es/globals/mixins/host-listener.js';
-import on from 'carbon-components/es/globals/js/misc/on';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js';
+import IBM8BarLogoH23 from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h23.svg';
 import DDSIcon from '../icon/icon';
-import Handle from '../../globals/internal/handle';
 import styles from './masthead.scss';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -27,11 +27,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-masthead-logo`)
 class DDSMastheadLogo extends FocusMixin(HostListenerMixin(DDSIcon)) {
-  /**
-   * Media query listener handler.
-   */
-  private _mqHandler: Handle | null = null;
-
   /**
    * Link `href`.
    */
@@ -48,13 +43,7 @@ class DDSMastheadLogo extends FocusMixin(HostListenerMixin(DDSIcon)) {
    * Search bar opened flag.
    */
   @internalProperty()
-  private _openedSearch = false;
-
-  /**
-   * Large breakpoint flag.
-   */
-  @internalProperty()
-  private _responsiveLg = false;
+  private _hasSearchActive = false;
 
   /**
    * Handles toggle event from the search component.
@@ -64,41 +53,21 @@ class DDSMastheadLogo extends FocusMixin(HostListenerMixin(DDSIcon)) {
   @HostListener('parentRoot:eventToggleSerch')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleSearchToggle = (event: Event) => {
-    this._openedSearch = (event as CustomEvent).detail.active;
+    this._hasSearchActive = (event as CustomEvent).detail.active;
   };
 
-  /**
-   * Handles media query event.
-   *
-   * @param event The event.
-   */
-  private _handleMediaQuery(event: Event) {
-    this._responsiveLg = (event as MediaQueryListEvent).matches;
-  }
-
   createRenderRoot() {
     return this.attachShadow({ mode: 'open', delegatesFocus: true });
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    const mqLarge = this.ownerDocument?.defaultView?.matchMedia(`(max-width: ${breakpoints.lg.width})`);
-    this._responsiveLg = mqLarge ? mqLarge.matches : false;
-
-    this._mqHandler = on(mqLarge, 'change', this._handleMediaQuery.bind(this));
-  }
-
-  disconnectedCallback() {
-    if (this._mqHandler) {
-      this._mqHandler = this._mqHandler.release();
-    }
-
-    super.disconnectedCallback();
-  }
-
   render() {
-    return this._openedSearch && this._responsiveLg ? html`` : super.render();
+    const { href, _hasSearchActive: hasSearchActive } = this;
+    const classes = classMap({
+      [`${ddsPrefix}-ce--header__logo--has-search-active`]: hasSearchActive,
+    });
+    return html`
+      <a aria-label="IBM logo" class="${classes}" href="${ifNonNull(href)}">${IBM8BarLogoH23()}</a>
+    `;
   }
 
   /**

diff --git a/packages/web-components/src/components/masthead/masthead-menu-button.ts b/packages/web-components/src/components/masthead/masthead-menu-button.ts
@@ -7,11 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { classMap } from 'lit-html/directives/class-map';
 import { html, internalProperty, property, query, customElement } from 'lit-element';
-import { breakpoints } from '@carbon/layout/es/index.js';
 import HostListener from 'carbon-web-components/es/globals/decorators/host-listener.js';
 import HostListenerMixin from 'carbon-web-components/es/globals/mixins/host-listener.js';
-import on from 'carbon-components/es/globals/js/misc/on';
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import BXHeaderMenuButton from 'carbon-web-components/es/components/ui-shell/header-menu-button.js';
@@ -34,22 +33,11 @@ class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
    */
   private _hFocusWrap: Handle | null = null;
 
-  /**
-   * Media query listener handler.
-   */
-  private _mqHandler: Handle | null = null;
-
   /**
    * Search bar opened flag.
    */
   @internalProperty()
-  private _openedSearch = false;
-
-  /**
-   * Medium breakpoint flag.
-   */
-  @internalProperty()
-  private _responsiveMd = false;
+  private _hasSearchActive = false;
 
   /**
    * Handles toggle event from the search component.
@@ -59,18 +47,9 @@ class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
   @HostListener('parentRoot:eventToggleSearch')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleSearchToggle = (event: Event) => {
-    this._openedSearch = (event as CustomEvent).detail.active;
+    this._hasSearchActive = (event as CustomEvent).detail.active;
   };
 
-  /**
-   * Handles media query event.
-   *
-   * @param event The event.
-   */
-  private _handleMediaQuery(event: Event) {
-    this._responsiveMd = (event as MediaQueryListEvent).matches;
-  }
-
   /**
    * Node to track focus going outside of modal content.
    */
@@ -95,23 +74,6 @@ class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
   @property({ reflect: true })
   slot = 'brand';
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    const mqMedium = this.ownerDocument?.defaultView?.matchMedia(`(max-width: ${breakpoints.md.width})`);
-    this._responsiveMd = mqMedium ? mqMedium.matches : false;
-
-    this._mqHandler = on(mqMedium, 'change', this._handleMediaQuery.bind(this));
-  }
-
-  disconnectedCallback() {
-    if (this._mqHandler) {
-      this._mqHandler = this._mqHandler.release();
-    }
-
-    super.disconnectedCallback();
-  }
-
   focus() {
     const { _buttonNode: buttonNode } = this;
     if (buttonNode) {
@@ -131,13 +93,18 @@ class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
   }
 
   render() {
-    return this._openedSearch && this._responsiveMd
-      ? html``
-      : html`
-          <a id="start-sentinel" class="${prefix}--visually-hidden" href="javascript:void 0" role="navigation"></a>
-          ${super.render()}
-          <a id="end-sentinel" class="${prefix}--visually-hidden" href="javascript:void 0" role="navigation"></a>
-        `;
+    const { _hasSearchActive: hasSearchActive } = this;
+    const classes = classMap({
+      [`${ddsPrefix}-ce--header__menu-trigger__container`]: true,
+      [`${ddsPrefix}-ce--header__menu-trigger__container--has-search-active`]: hasSearchActive,
+    });
+    return html`
+      <div class="${classes}">
+        <a id="start-sentinel" class="${prefix}--visually-hidden" href="javascript:void 0" role="navigation"> </a>
+        ${super.render()}
+        <a id="end-sentinel" class="${prefix}--visually-hidden" href="javascript:void 0" role="navigation"> </a>
+      </div>
+    `;
   }
 
   /**

diff --git a/packages/web-components/src/components/masthead/masthead.scss b/packages/web-components/src/components/masthead/masthead.scss
@@ -21,6 +21,16 @@
   position: relative;
   width: mini-units(6);
   height: mini-units(6);
+
+  .#{$dds-prefix}-ce--header__menu-trigger__container {
+    display: contents;
+  }
+
+  .#{$dds-prefix}-ce--header__menu-trigger__container--has-search-active {
+    @include carbon--breakpoint-down('md') {
+      display: none;
+    }
+  }
 }
 
 :host(#{$dds-prefix}-masthead-logo) {
@@ -35,6 +45,12 @@
       padding: 0 $carbon--spacing-05;
     }
   }
+
+  .#{$dds-prefix}-ce--header__logo--has-search-active {
+    @include carbon--breakpoint-down('lg') {
+      display: none;
+    }
+  }
 }
 
 :host(#{$dds-prefix}-top-nav-name) {
@@ -66,6 +82,16 @@
 
 :host(#{$dds-prefix}-masthead-global-bar) {
   @extend .#{$prefix}--header__global;
+
+  .#{$dds-prefix}-ce--header__global__container {
+    display: contents;
+  }
+
+  .#{$dds-prefix}-ce--header__global__container--has-search-active {
+    @include carbon--breakpoint-down('md') {
+      display: none;
+    }
+  }
 }
 
 :host(#{$dds-prefix}-masthead-profile) {