Added display prop to EuiPopover (elastic#2112)

* Added `display` option to EuiPopover * Updated color picker * Updated super date picker * Updated super select
nreese · Jul 15, 2019 · 7d7fcb7 · 7d7fcb7
1 parent 947c7a1
commit 7d7fcb7
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,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**
 

diff --git a/src-docs/src/views/popover/popover_block.js b/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>
+    );
+  }
+}
diff --git a/src-docs/src/views/popover/popover_example.js b/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 />,
+    },
   ],
 };
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
@@ -334,6 +334,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                         </EuiButtonEmpty>
                       }
                       closePopover={[Function]}
+                      display="inlineBlock"
                       hasArrow={true}
                       id="customizablePagination"
                       isOpen={false}

diff --git a/src/components/color_picker/__snapshots__/color_picker.test.js.snap b/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"

diff --git a/src/components/color_picker/_color_picker.scss b/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;

diff --git a/src/components/color_picker/color_picker.js b/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">

diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/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

diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/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}>

diff --git a/...er/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/...er/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}