diff --git a/CHANGELOG.md b/CHANGELOG.md index ecd11fd0531..d2ebe0f2570 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/src-docs/src/views/popover/popover_block.js b/src-docs/src/views/popover/popover_block.js new file mode 100644 index 00000000000..a6c01dd5faa --- /dev/null +++ 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 = ( + + This button is expanded + + ); + + return ( + +
This is a popover
+ + ); + } +} diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js index 0254271a74a..c088e439711 100644 --- 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 = ` `; +const popoverBlockSnippet = ` + +`; + export const PopoverExample = { title: 'Popover', sections: [ @@ -349,5 +361,30 @@ export const PopoverExample = { snippet: popoverFixedSnippet, demo: , }, + { + title: 'Popover with block level display', + source: [ + { + type: GuideSectionTypes.JS, + code: popoverBlockSource, + }, + { + type: GuideSectionTypes.HTML, + code: popoverBlockHtml, + }, + ], + text: ( +
+

+ Popover anchors default to display: inline-block{' '} + so they do not force block display on inline triggers. If you do + need to change this to block display, just add{' '} + display="block" +

+
+ ), + snippet: popoverBlockSnippet, + demo: , + }, ], }; 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 index bf8c0f12ace..afecec86f3c 100644 --- 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`] = ` } 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 index c2e89422428..9156adca9ac 100644 --- 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`] = `
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 index 88046e593fb..bf7f4815883 100644 --- 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 index 7bd2165d653..af9669db471 100644 --- 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 ( diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap index b2f89eaabb9..0c6bacfc5a7 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap +++ b/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`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="QuickSelectPopover" isOpen={false} @@ -111,6 +112,7 @@ exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="QuickSelectPopover" isOpen={false} diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index a3fa033b8ed..b11fb127f96 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -2,10 +2,10 @@ exports[`EuiSuperSelect is rendered 1`] = `
`; +exports[`EuiPopover props display block is rendered 1`] = ` +
+
+
+
+`; + exports[`EuiPopover props isOpen defaults to false 1`] = `
`; - -exports[`EuiPopover props withTitle is rendered 1`] = ` -
-
-
-
-`; diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 8fd8dc1e30c..48bfc4f36e1 100644 --- a/src/components/popover/_popover.scss +++ b/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. diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 3a9d7b5fcd4..7d677d3e3e9 100644 --- a/src/components/popover/popover.js +++ b/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', }; diff --git a/src/components/popover/popover.test.js b/src/components/popover/popover.test.js index 472ab19c7e2..a3fd945b767 100644 --- a/src/components/popover/popover.test.js +++ b/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( } closePopover={() => {}} /> 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 index 1895d28cf90..8247abbd294 100644 --- 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 active - field is global 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false} @@ -76,6 +77,7 @@ exports[`FieldValueSelectionFilter active - fields in options 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false} @@ -135,6 +137,7 @@ exports[`FieldValueSelectionFilter inactive - field is global 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false} @@ -193,6 +196,7 @@ exports[`FieldValueSelectionFilter inactive - fields in options 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false} @@ -251,6 +255,7 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false} @@ -296,6 +301,7 @@ exports[`FieldValueSelectionFilter render - fields in options 1`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false} @@ -354,6 +360,7 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = ` } 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`] = ` } 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`] = ` } closePopover={[Function]} + display="inlineBlock" hasArrow={true} id="field_value_selection_0" isOpen={false}