Allowing EuiPopover arrow to be optional

Fixin some popover override css
elastic · Jul 30, 2018 · 1413360 · 1413360
1 parent 146755f
commit 1413360
Show file tree

Hide file tree

Showing 10 changed files with 5,445 additions and 16 deletions.
diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js
@@ -16,23 +16,23 @@ export default class extends Component {
       {
         value: 'warning',
         inputDisplay: (
-          <EuiHealth color="subdued">
+          <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
             Warning
           </EuiHealth>
         ),
       },
       {
         value: 'minor',
         inputDisplay: (
-          <EuiHealth color="warning">
+          <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
             Minor
           </EuiHealth>
         ),
       },
       {
         value: 'critical',
         inputDisplay: (
-          <EuiHealth color="danger">
+          <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
             Critical
           </EuiHealth>
         ),

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -16,6 +16,7 @@ exports[`CollapsedItemActions render 1`] = `
     />
   }
   closePopover={[Function]}
+  hasArrow={true}
   id="id-actions"
   isOpen={false}
   ownFocus={false}

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -268,6 +268,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                         </EuiButtonEmpty>
                       }
                       closePopover={[Function]}
+                      hasArrow={true}
                       id="customizablePagination"
                       isOpen={false}
                       ownFocus={false}

diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
@@ -1,7 +1,6 @@
 /*
  * 1. Make popover the same width as the form control
  * 2. Style popover similar to combobox
- * 3. Specificity to override default popover
  */
 
 .euiSuperSelect.euiPopover { /* 3 */
@@ -13,20 +12,19 @@
   }
 }
 
-.euiSuperSelect__popoverPanel { /* 3 */
-  //width: calc(100% + 2px); /* 1 */
-
-  .euiPopover__panel__arrow {
-    display: none; /* 2 */
-  }
-}
-
-.euiSuperSelect.euiPopover--anchorDownCenter .euiSuperSelect__popoverPanel { /* 3 */
+.euiSuperSelect__popoverPanel[class*="bottom"] {
   border-top-color: transparentize($euiBorderColor, .2);
   border-top-right-radius: 0; /* 2 */
   border-top-left-radius: 0; /* 2 */
 }
 
+.euiSuperSelect__popoverPanel[class*="top"].euiPanel--shadow {
+  border-bottom-color: transparentize($euiBorderColor, .2);
+  border-bottom-right-radius: 0; /* 2 */
+  border-bottom-left-radius: 0; /* 2 */
+  @include euiBottomShadowFlat; /* 2 */
+}
+
 .euiSuperSelect.euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */
   transform: translateX(-50%) translateY(0) translateZ(0); /* 2 */
 }

diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
@@ -53,7 +53,7 @@ export class EuiSuperSelect extends Component {
           this.focusItemAt(indexOfSelected);
 
           this.setState({
-            menuWidth: this.popoverRef.getBoundingClientRect().width,
+            menuWidth: this.popoverRef.getBoundingClientRect().width - 2, // account for border not inner shadow
           });
         });
       } else {
@@ -200,6 +200,7 @@ export class EuiSuperSelect extends Component {
         anchorPosition="downCenter"
         ownFocus={false}
         popoverRef={this.setPopoverRef}
+        hasArrow={false}
       >
         {items}
       </EuiPopover>