fix(modal): support floating menus in modal (carbon-design-system#430)

Fixes carbon-design-system#280.
j1mie · Nov 21, 2017 · e5dca27 · e5dca27
1 parent bbcb5c3
commit e5dca27
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 4 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -47,7 +47,7 @@
         position: absolute;
         top: 1rem;
         right: 1rem;
-        z-index: z('overflowOptions');
+        z-index: z('floating');
         margin: 0;
       }
     }

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -117,7 +117,11 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
    * @private
    */
   _handleFocusin = evt => {
-    if (this.element.classList.contains(this.options.classVisible) && !this.element.contains(evt.target)) {
+    if (
+      this.element.classList.contains(this.options.classVisible) &&
+      !this.element.contains(evt.target) &&
+      this.options.selectorsFloatingMenus.every(selector => !eventMatches(evt, selector))
+    ) {
       this.element.focus();
     }
   };
@@ -148,6 +152,9 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
    * @type {Object}
    * @property {string} selectorInit The CSS class to find modal dialogs.
    * @property {string} attribInitTarget The attribute name in the launcher buttons to find target modal dialogs.
+   * @property {string[]} [selectorsFloatingMenu]
+   *   The CSS selectors of floating menus.
+   *   Used for detecting if focus-wrap behavior should be disabled temporarily.
    * @property {string} [classVisible] The CSS class for the visible state.
    * @property {string} [classNoScroll] The CSS class for hiding scroll bar in body element while modal is shown.
    * @property {string} [eventBeforeShown]
@@ -167,6 +174,7 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
     selectorInit: '[data-modal]',
     selectorModalClose: '[data-modal-close]',
     selectorPrimaryFocus: '[data-modal-primary-focus]',
+    selectorsFloatingMenus: ['.bx--overflow-menu-options', '.bx-tooltip'],
     classVisible: 'is-visible',
     attribInitTarget: 'data-modal-target',
     initEventNames: ['click'],

diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
@@ -42,7 +42,7 @@
     flex-direction: column;
     align-items: flex-start;
     position: absolute;
-    z-index: 1;
+    z-index: z('floating');
     background-color: $inverse-01;
     border: 1px solid $ui-04;
     width: 11.25rem;

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -48,6 +48,7 @@
     background: $ui-01;
     padding: 1.5rem;
     border: 1px solid $ui-04;
+    z-index: z('floating');
 
     p {
       @include font-family;

diff --git a/src/globals/scss/_layout.scss b/src/globals/scss/_layout.scss
@@ -59,7 +59,7 @@ $z-indexes: (
   footer : 5000,
   hidden : - 1,
   overflowHidden: - 1,
-  overflowOptions: 1
+  floating: 10000
 );
 
 //-------------------------------------

diff --git a/tests/spec/modal_spec.js b/tests/spec/modal_spec.js
@@ -28,6 +28,7 @@ describe('Test modal', function() {
         selectorInit: '[data-modal]',
         selectorModalClose: '[data-modal-close]',
         selectorPrimaryFocus: '[data-modal-primary-focus]',
+        selectorsFloatingMenus: ['.bx--overflow-menu-options', '.bx-tooltip'],
         classVisible: 'is-visible',
         attribInitTarget: 'data-modal-target',
         initEventNames: ['click'],