Added display prop to EuiPopover

src-docs/src/views/popover/popover_block.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+
+import { EuiButton, EuiPopover } from '../../../../src/components';
+
+export default class PopoverContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  onButtonClick = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen,
+    });
+  };
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  setPanelRef = node => (this.panel = node);
+
+  render() {
+    const button = (
+      <EuiButton onClick={this.onButtonClick} fullWidth>
+        This button is expanded
+      </EuiButton>
+    );
+
+    return (
+      <EuiPopover
+        button={button}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover}
+        display="block">
+        <div>This is a popover</div>
+      </EuiPopover>
+    );
+  }
+}

src-docs/src/views/popover/popover_example.js

@@ -47,6 +47,10 @@ import PopoverFixed from './popover_fixed';
 const popoverFixedSource = require('!!raw-loader!./popover_fixed');
 const popoverFixedHtml = renderToHtml(PopoverFixed);
 
+import PopoverBlock from './popover_block';
+const popoverBlockSource = require('!!raw-loader!./popover_block');
+const popoverBlockHtml = renderToHtml(PopoverBlock);
+
 const popOverSnippet = `<EuiPopover
   button={button}
   isOpen={this.state.isPopoverOpen}
@@ -114,6 +118,14 @@ const popoverFixedSnippet = `<EuiPopover
   <!-- Popover on a fixed element -->
 </EuiPopover>`;
 
+const popoverBlockSnippet = `<EuiPopover
+  button={button}
+  isOpen={this.state.isPopoverOpen}
+  closePopover={this.closePopover}
+  display="block">
+  <!-- Popover anchor is display block -->
+</EuiPopover>`;
+
 export const PopoverExample = {
   title: 'Popover',
   sections: [
@@ -349,5 +361,30 @@ export const PopoverExample = {
       snippet: popoverFixedSnippet,
       demo: <PopoverFixed />,
     },
+    {
+      title: 'Popover as display block',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: popoverBlockSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: popoverBlockHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            Popover anchors are forced to be{' '}
+            <EuiCode>display: inline-block</EuiCode> so they do not force block
+            display on inline triggers. If you do need to change this to block
+            display, just add <EuiCode>display=&quot;block&quot;</EuiCode>
+          </p>
+        </div>
+      ),
+      snippet: popoverBlockSnippet,
+      demo: <PopoverBlock />,
+    },
   ],
 };

src/components/basic_table/__snapshots__/in_memory_table.test.js.snap

@@ -334,6 +334,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                         </EuiButtonEmpty>
                       }
                       closePopover={[Function]}
+                      display="inlineBlock"
                       hasArrow={true}
                       id="customizablePagination"
                       isOpen={false}

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap

@@ -26,6 +26,7 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
     </EuiButtonEmpty>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="QuickSelectPopover"
   isOpen={false}
@@ -111,6 +112,7 @@ exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
     </EuiButtonEmpty>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="QuickSelectPopover"
   isOpen={false}

src/components/form/super_select/__snapshots__/super_select.test.js.snap

@@ -469,6 +469,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
     }
     className="euiSuperSelect"
     closePopover={[Function]}
+    display="inlineBlock"
     hasArrow={false}
     isOpen={true}
     ownFocus={false}

src/components/popover/__snapshots__/popover.test.js.snap

@@ -80,6 +80,19 @@ exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiPopover props display block is rendered 1`] = `
+<div
+  class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+  id="2"
+>
+  <div
+    class="euiPopover__anchor"
+  >
+    <button />
+  </div>
+</div>
+`;
+
 exports[`EuiPopover props isOpen defaults to false 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
@@ -335,16 +348,3 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
   </div>
 </div>
 `;
-
-exports[`EuiPopover props withTitle is rendered 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
-  id="2"
->
-  <div
-    class="euiPopover__anchor"
-  >
-    <button />
-  </div>
-</div>
-`;

src/components/popover/_popover.scss

@@ -15,6 +15,14 @@
   display: inline-block;
 }
 
+.euiPopover--displayBlock {
+  display: block;
+
+  .euiPopover__anchor {
+    display: block;
+  }
+}
+
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel.

src/components/popover/popover.js

@@ -72,6 +72,13 @@ const anchorPositionToClassNameMap = {
 
 export const ANCHOR_POSITIONS = Object.keys(anchorPositionToClassNameMap);
 
+const displayToClassNameMap = {
+  inlineBlock: undefined,
+  block: 'euiPopover--displayBlock',
+};
+
+export const DISPLAY = Object.keys(displayToClassNameMap);
+
 const DEFAULT_POPOVER_STYLES = {
   top: 50,
   left: 50,
@@ -413,12 +420,14 @@ export class EuiPopover extends Component {
       zIndex,
       initialFocus,
       attachToAnchor,
+      display,
       ...rest
     } = this.props;
 
     const classes = classNames(
       'euiPopover',
       anchorPositionToClassNameMap[anchorPosition],
+      displayToClassNameMap[display],
       {
         'euiPopover-isOpen': this.state.isOpening,
         'euiPopover--withTitle': withTitle,
@@ -553,6 +562,8 @@ EuiPopover.propTypes = {
   }),
   /** Style and position alteration for arrow-less, left-aligned attachment. Intended for use with inputs as anchors, à la EuiColorPicker */
   attachToAnchor: PropTypes.bool,
+  /** CSS display type for both the popover and anchor */
+  display: PropTypes.oneOf(DISPLAY),
 };
 
 EuiPopover.defaultProps = {
@@ -561,4 +572,5 @@ EuiPopover.defaultProps = {
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
   hasArrow: true,
+  display: 'inlineBlock',
 };

src/components/popover/popover.test.js

@@ -42,12 +42,12 @@ describe('EuiPopover', () => {
   });
 
   describe('props', () => {
-    describe('withTitle', () => {
+    describe('display block', () => {
       test('is rendered', () => {
         const component = render(
           <EuiPopover
             id={getId()}
-            withTitle
+            display="block"
             button={<button />}
             closePopover={() => {}}
           />

src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap

@@ -17,6 +17,7 @@ exports[`FieldValueSelectionFilter active - field is global 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -76,6 +77,7 @@ exports[`FieldValueSelectionFilter active - fields in options 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -135,6 +137,7 @@ exports[`FieldValueSelectionFilter inactive - field is global 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -193,6 +196,7 @@ exports[`FieldValueSelectionFilter inactive - fields in options 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -251,6 +255,7 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -296,6 +301,7 @@ exports[`FieldValueSelectionFilter render - fields in options 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -354,6 +360,7 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -399,6 +406,7 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}
@@ -444,6 +452,7 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = `
     </EuiFilterButton>
   }
   closePopover={[Function]}
+  display="inlineBlock"
   hasArrow={true}
   id="field_value_selection_0"
   isOpen={false}