Added display prop to EuiPopover

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added TypeScript definition for `EuiFormControlLayout` ([#2086](https://github.com/elastic/eui/pull/2086))
 - Changed SASS mixin `euiOverflowShadow()` to use `mask-image` instead of `box-shadow` ([#2088](https://github.com/elastic/eui/pull/2088))
 - Added SASS mixin and CSS utility `euiYScrollWithShadows` ([#2088](https://github.com/elastic/eui/pull/2088))
+- Added `display` prop to `EuiPopover` ([#2112](https://github.com/elastic/eui/pull/2112))
 
 **Bug fixes**
 

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 with block level display',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: popoverBlockSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: popoverBlockHtml,
+ },
+ ],
+ text: (
+ <div>
+ <p>
+ Popover anchors default to <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/color_picker/__snapshots__/color_picker.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`renders EuiColorPicker 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout"
@@ -76,10 +76,10 @@ exports[`renders EuiColorPicker 1`] = `
 
 exports[`renders EuiColorPicker with a color swatch when color is defined 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout"
@@ -150,10 +150,10 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
 
 exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout"
@@ -223,10 +223,10 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
 
 exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout"
@@ -296,10 +296,10 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
 
 exports[`renders compressed EuiColorPicker 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout euiFormControlLayout--compressed"
@@ -370,10 +370,10 @@ exports[`renders compressed EuiColorPicker 1`] = `
 
 exports[`renders disabled EuiColorPicker 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout"
@@ -445,10 +445,10 @@ exports[`renders disabled EuiColorPicker 1`] = `
 
 exports[`renders fullWidth EuiColorPicker 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout euiFormControlLayout--fullWidth"
@@ -519,10 +519,10 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
 
 exports[`renders readOnly EuiColorPicker 1`] = `
 <div
- class="euiPopover euiPopover--anchorDownLeft euiColorPicker__popoverContainer"
+ class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
 >
  <div
- class="euiPopover__anchor euiColorPicker__popoverAnchor"
+ class="euiPopover__anchor"
  >
  <div
  class="euiFormControlLayout euiFormControlLayout--readOnly"

src/components/color_picker/_color_picker.scss

@@ -17,18 +17,6 @@
  padding-bottom: 0 !important;
 }
 
-.euiColorPicker__popoverContainer:not(.euiColorPicker__popoverContainer--customButton) {
- // Override of EuiPopover display
- // sass-lint:disable no-important
- display: block !important;
-}
-
-.euiColorPicker__popoverAnchor:not(.euiColorPicker__popoverAnchor--customButton) {
- // Override of EuiPopover display
- // sass-lint:disable no-important
- display: block !important;
-}
-
 .euiColorPicker__popoverPanel[class*='bottom']:not(.euiColorPicker__popoverPanel--customButton) {
  border-top-color: transparentize($euiBorderColor, .2);
  border-top-right-radius: 0;

src/components/color_picker/color_picker.js

@@ -62,12 +62,6 @@ export const EuiColorPicker = ({
  'euiColorPicker__popoverPanel--pickerOnly': mode === 'picker',
  'euiColorPicker__popoverPanel--customButton': button,
  });
- const popoverClasses = classNames('euiColorPicker__popoverContainer', {
- 'euiColorPicker__popoverContainer--customButton': button,
- });
- const anchorClasses = classNames('euiColorPicker__popoverAnchor', {
- 'euiColorPicker__popoverAnchor--customButton': button,
- });
  const swatchClass = 'euiColorPicker__swatchSelect';
  const testSubjAnchor = 'colorPickerAnchor';
  const testSubjPopover = 'colorPickerPopover';
@@ -246,9 +240,8 @@ export const EuiColorPicker = ({
  isOpen={isColorSelectorShown}
  closePopover={handleFinalSelection}
  zIndex={popoverZIndex}
- className={popoverClasses}
- anchorClassName={anchorClasses}
  panelClassName={panelClasses}
+ display={button ? 'inlineBlock' : 'block'}
  attachToAnchor={button ? false : true}
  anchorPosition="downLeft"
  panelPaddingSize="s">

src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss

@@ -1,7 +1,3 @@
-.euiDatePopoverButton__popover .euiDatePopoverButton__popoverAnchor {
- display: block;
-}
-
 .euiDatePopoverButton {
  @include euiSuperDatePickerText;
  background-size: 100%; // For the bottom "border" via background-image

src/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -53,12 +53,11 @@ export function EuiDatePopoverButton(props) {
 
  return (
  <EuiPopover
- className="euiDatePopoverButton__popover"
  button={button}
  isOpen={isOpen}
  closePopover={onPopoverClose}
  anchorPosition={position === 'start' ? 'downLeft' : 'downRight'}
- anchorClassName="euiDatePopoverButton__popoverAnchor"
+ display="block"
  panelPaddingSize="none"
  ownFocus
  {...rest}>

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}