Fix: Have tethered breadcrumbs drop down be part of the element DOM (#…

…143)
box · Jan 5, 2018 · 602674e · 602674e
1 parent caf8d2c
commit 602674e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/src/components/Breadcrumbs/BreadcrumbDropdown.js b/src/components/Breadcrumbs/BreadcrumbDropdown.js
@@ -19,12 +19,12 @@ type Props = {
     rootElement: HTMLElement
 };
 
-const BreadcrumbDropdown = ({ crumbs, onCrumbClick, className = '' }: Props) => (
-    <DropdownMenu constrainToScrollParent>
+const BreadcrumbDropdown = ({ crumbs, onCrumbClick, className = '', rootElement }: Props) => (
+    <DropdownMenu constrainToScrollParent bodyElement={rootElement}>
         <PlainButton type='button' className={`buik-breadcrumbs-drop-down ${className}`}>
             ···
         </PlainButton>
-        <Menu className='buik-breadcrumbs-drop-down-menu'>
+        <Menu>
             {crumbs.map(({ id, name }: Crumb) => (
                 <MenuItem key={id} onClick={() => onCrumbClick(id)}>
                     {name}

diff --git a/src/components/Breadcrumbs/BreadcrumbDropdown.scss b/src/components/Breadcrumbs/BreadcrumbDropdown.scss
@@ -8,7 +8,3 @@
         letter-spacing: inherit;
     }
 }
-
-.buik-breadcrumbs-drop-down-menu {
-    @include reset;
-}
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
@@ -27,22 +27,28 @@ $lighter-light-blue: rgba($light-blue, .4) !default;
 
 $font: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
+@mixin rendering {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
 @mixin reset {
+    @include rendering;
+
     /* stylelint-disable declaration-no-important */
     box-sizing: border-box !important;
     /* stylelint-enable declaration-no-important */
     font-family: $font;
     font-size: 13px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 
     * {
+        @include rendering;
+
         /* stylelint-disable declaration-no-important */
         box-sizing: border-box !important;
         /* stylelint-enable declaration-no-important */
-        font-family: $font;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+        font-family: inherit;
 
         &::after,
         &::before {

diff --git a/src/components/base.scss b/src/components/base.scss
@@ -11,16 +11,12 @@
     box-sizing: border-box !important;
     /* stylelint-enable declaration-no-important */
     color: $twos;
-    font-family: $font;
-    font-size: 13px;
     height: 100%;
     letter-spacing: .13px;
     margin: 0;
     outline: none;
     overflow: hidden;
     padding: 0;
-    position: relative;
-    text-rendering: optimizeLegibility;
     user-select: none;
     width: 100%;
 
@@ -199,6 +195,10 @@
         }
     }
 
+    .ReactModal__Body--open & {
+        position: relative;
+    }
+
     .btn-plain {
         background: none;
         border: 0 none;