Allowing EuiPopover arrow to be optional

Fixin some popover override css
elastic · Aug 3, 2018 · bb6e7c5 · bb6e7c5
1 parent c1ed18a
commit bb6e7c5
Show file tree

Hide file tree

Showing 9 changed files with 31 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
@@ -270,6 +270,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>

diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
@@ -131,6 +131,11 @@
       }
     }
   }
+
+
+  &.euiPopover__panel-noArrow .euiPopover__panel__arrow {
+    display: none;
+  }
 }
 
 .euiPopover__panel.euiPopover__panel-withTitle {

diff --git a/src/components/popover/index.d.ts b/src/components/popover/index.d.ts
@@ -31,6 +31,7 @@ declare module '@elastic/eui' {
     withTitle?: boolean;
     isOpen?: boolean;
     ownFocus?: boolean;
+    hasArrow?: boolean;
     anchorPosition?: PopoverAnchorPosition;
     panelClassName?: string;
     panelPaddingSize?: PanelPaddingSize;

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
@@ -236,7 +236,7 @@ export class EuiPopover extends Component {
       align: getPopoverAlignFromAnchorPosition(this.props.anchorPosition),
       anchor: this.button,
       popover: this.panel,
-      offset: 16,
+      offset: this.props.hasArrow ? 16 : 8,
       arrowConfig: {
         arrowWidth: 24,
         arrowBuffer: 10,
@@ -254,7 +254,7 @@ export class EuiPopover extends Component {
       zIndex,
     };
 
-    const arrowStyles = arrow;
+    const arrowStyles = this.props.hasArrow ? arrow : null;
     const arrowPosition = position;
 
     this.setState({ popoverStyles, arrowStyles, arrowPosition });
@@ -293,6 +293,7 @@ export class EuiPopover extends Component {
       panelClassName,
       panelPaddingSize,
       popoverRef,
+      hasArrow,
       ...rest
     } = this.props;
 
@@ -311,6 +312,7 @@ export class EuiPopover extends Component {
       `euiPopover__panel-${this.state.arrowPosition}`,
       { 'euiPopover__panel-isOpen': this.state.isOpening },
       { 'euiPopover__panel-withTitle': withTitle },
+      { 'euiPopover__panel-noArrow': !hasArrow },
       panelClassName
     );
 
@@ -416,6 +418,7 @@ EuiPopover.propTypes = {
   panelClassName: PropTypes.string,
   panelPaddingSize: PropTypes.oneOf(SIZES),
   popoverRef: PropTypes.func,
+  hasArrow: PropTypes.bool,
   container: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.instanceOf(HTMLElement)
@@ -427,4 +430,5 @@ EuiPopover.defaultProps = {
   ownFocus: false,
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
+  hasArrow: true,
 };
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
@@ -17,6 +17,7 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
@@ -62,6 +63,7 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
@@ -107,6 +109,7 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
@@ -152,6 +155,7 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,6 +131,11 @@ @@
           }
         }
       }
+      &.euiPopover__panel-noArrow .euiPopover__panel__arrow {
+        display: none;
+      }
     }
     .euiPopover__panel.euiPopover__panel-withTitle {
@@ Expand Down @@