Fix combobox list z-index

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.0.1`.
+**Bug fixes**
+
+- Fixed z-index issue of `EuiComboBoxOptionsList` especiall inside modals ([#1192](https://github.com/elastic/eui/pull/1192))
 
 ## [`4.0.1`](https://github.com/elastic/eui/tree/v4.0.1)
 

src/components/combo_box/_combo_box.scss

@@ -1,7 +1,6 @@
 .euiComboBox {
   @include euiFormControlSize(auto, $includeAlternates: true);
   position: relative;
-  z-index: $euiZComboBox + 1; // Ensures the dropdown's shadow is hidden behind the input on top
 
   /**
    * 1. Allow pills to truncate their text with an ellipsis.

src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss

@@ -18,10 +18,11 @@
 
   &.euiComboBoxOptionsList--bottom { /* 4 */
     @include euiBottomShadowMedium;
-    z-index: $euiZComboBox + 2;  // Ensures the dropdown's is above the combo box's shadow
   }
   &.euiComboBoxOptionsList--top { /* 4 */
-    @include euiBottomShadowFlat;
+    box-shadow:
+      0 -2px 4px -1px rgba($euiShadowColor, .2),
+      0 0px 2px 0 rgba($euiShadowColor, .2);
   }
 }
 

src/global_styling/variables/_z_index.scss

@@ -1,7 +1,7 @@
 // Z-Index
 
 /*
-Remember that z-index is relative to parent and based on the stacking context. 
+Remember that z-index is relative to parent and based on the stacking context.
 z-indexs only compete against other z-indexs when they exist as children of
 that shared parent.
 
@@ -28,8 +28,8 @@ $euiZLevel9:          9000;
 $euiZContent:         $euiZLevel0;
 $euiZHeader:          $euiZLevel1;
 $euiZContentMenu:     $euiZLevel2;
-$euiZComboBox:        $euiZContentMenu - 1;
 $euiZNavigation:      $euiZLevel4;
 $euiZMask:            $euiZLevel6;
 $euiZModal:           $euiZLevel8;
+$euiZComboBox:        $euiZModal + 1;
 $euiZToastList:       $euiZLevel9;