From dd5a9ced8fc6792677a1c4262870562db4c3f355 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 27 Oct 2022 10:06:58 -0700 Subject: [PATCH 1/4] Add `hasDragDrop` prop and styles to EuiPopover - which affords / accounts for styling for popovers that contain drag/droppable contexts --- src/components/popover/popover.tsx | 7 ++++++ .../_popover_panel.test.tsx.snap | 7 ++++++ .../popover_panel/_popover_panel.styles.ts | 25 +++++++++++++++++++ .../popover_panel/_popover_panel.test.tsx | 6 +++++ .../popover/popover_panel/_popover_panel.tsx | 19 +++++++++++++- 5 files changed, 63 insertions(+), 1 deletion(-) diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index df8d99d8a42..8c532a2ec3f 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -167,6 +167,11 @@ export interface EuiPopoverProps extends CommonProps { * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true` */ repositionOnScroll?: boolean; + /** + * Must be set to true if using `EuiDragDropContext` within a popover, + * otherwise your nested drag & drop will have incorrect positioning + */ + hasDragDrop?: boolean; /** * By default, popover content inherits the z-index of the anchor * component; pass `zIndex` to override @@ -613,6 +618,7 @@ export class EuiPopover extends Component { hasArrow, arrowChildren, repositionOnScroll, + hasDragDrop, zIndex, attachToAnchor, display, @@ -708,6 +714,7 @@ export class EuiPopover extends Component { position={this.state.arrowPosition} isAttached={attachToAnchor} className={classNames(panelClassName, panelProps?.className)} + hasDragDrop={hasDragDrop} hasShadow={false} paddingSize={panelPaddingSize} tabIndex={tabIndex} diff --git a/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap b/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap index e95d89846c7..c36915f0282 100644 --- a/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap +++ b/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap @@ -9,6 +9,13 @@ exports[`EuiPopoverPanel is rendered 1`] = ` /> `; +exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = ` +
+`; + exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
{ left: css``, right: css``, }, + + // Overrides for drag & drop contexts within popovers. This is required because + // the fixed positions of drag and drop don't work inside of transformed elements + hasDragDrop: { + hasDragDrop: css` + transform: none; + // Filter also causes a stacking context that interferes with the positioned children, + // so we disable it and recreate the shadow via box-shadow instead + filter: none; + ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })}; + `, + // The offset transforms must be recreated in margins + top: css` + margin-block-start: ${euiTheme.size[translateDistance]}; + `, + bottom: css` + margin-block-start: -${euiTheme.size[translateDistance]}; + `, + left: css` + margin-inline-start: ${euiTheme.size[translateDistance]}; + `, + right: css` + margin-inline-start: -${euiTheme.size[translateDistance]}; + `, + }, }; }; diff --git a/src/components/popover/popover_panel/_popover_panel.test.tsx b/src/components/popover/popover_panel/_popover_panel.test.tsx index 4cb72ba62af..6822097b3e9 100644 --- a/src/components/popover/popover_panel/_popover_panel.test.tsx +++ b/src/components/popover/popover_panel/_popover_panel.test.tsx @@ -36,6 +36,12 @@ describe('EuiPopoverPanel', () => { expect(component).toMatchSnapshot(); }); + test('hasDragDrop is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + describe('position', () => { POSITIONS.forEach((position) => { test(`${position} is rendered`, () => { diff --git a/src/components/popover/popover_panel/_popover_panel.tsx b/src/components/popover/popover_panel/_popover_panel.tsx index b63db6fc91e..7e39c5f2afd 100644 --- a/src/components/popover/popover_panel/_popover_panel.tsx +++ b/src/components/popover/popover_panel/_popover_panel.tsx @@ -28,6 +28,7 @@ type EuiPopoverPanelInternalProps = { isOpen?: boolean; isAttached?: boolean; position?: EuiPopoverArrowPositions | null; + hasDragDrop?: boolean; }; /** @@ -36,7 +37,15 @@ type EuiPopoverPanelInternalProps = { */ export const EuiPopoverPanel: FunctionComponent< EuiPopoverPanelProps & EuiPopoverPanelInternalProps -> = ({ children, className, isOpen, isAttached, position, ...rest }) => { +> = ({ + children, + className, + isOpen, + isAttached, + hasDragDrop, + position, + ...rest +}) => { const panelContext = useContext(EuiPopoverPanelContext); if (rest.paddingSize) panelContext.paddingSize = rest.paddingSize; @@ -59,6 +68,14 @@ export const EuiPopoverPanel: FunctionComponent< ]; } + if (hasDragDrop) { + panelCSS = [ + ...panelCSS, + styles.hasDragDrop.hasDragDrop, + position && styles.hasDragDrop[position], + ]; + } + return ( Date: Thu, 27 Oct 2022 10:10:46 -0700 Subject: [PATCH 2/4] Fix EuiDataGrid popovers with drag & drop --- .../controls/__snapshots__/column_selector.test.tsx.snap | 2 +- .../controls/__snapshots__/column_sorting.test.tsx.snap | 2 +- src/components/datagrid/controls/_data_grid_toolbar.scss | 8 -------- src/components/datagrid/controls/column_selector.tsx | 2 +- src/components/datagrid/controls/column_sorting.tsx | 2 +- 5 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index fde58ab5dc7..cf1e5f5ed56 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -37,7 +37,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel euiDataGrid__controlPopoverWithDragDrop emotion-euiPanel-grow-m-s-plain-euiPopover__panel" + class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom" data-autofocus="true" data-popover-panel="true" role="dialog" diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 7da7cfa4db3..a79fdc8c08b 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -37,7 +37,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel euiDataGrid__controlPopoverWithDragDrop emotion-euiPanel-grow-m-s-plain-euiPopover__panel" + class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom" data-autofocus="true" data-popover-panel="true" role="dialog" diff --git a/src/components/datagrid/controls/_data_grid_toolbar.scss b/src/components/datagrid/controls/_data_grid_toolbar.scss index 35f6951dffc..3d2cd5a7ba9 100644 --- a/src/components/datagrid/controls/_data_grid_toolbar.scss +++ b/src/components/datagrid/controls/_data_grid_toolbar.scss @@ -52,14 +52,6 @@ } } -.euiDataGrid__controlPopoverWithDragDrop { - // Hack because the fixed positions of drag and drop don't work inside of transformed elements - // sass-lint:disable-block no-important - transform: none !important; - transition: none !important; - margin-top: -$euiSizeS; -} - .euiDataGrid__controlScroll { @include euiYScrollWithShadows; max-height: $euiDataGridPopoverMaxHeight; diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx index 52d22129abd..da5405752e9 100644 --- a/src/components/datagrid/controls/column_selector.tsx +++ b/src/components/datagrid/controls/column_selector.tsx @@ -147,7 +147,7 @@ export const useDataGridColumnSelector = ( closePopover={() => setIsOpen(false)} anchorPosition="downLeft" panelPaddingSize="s" - panelClassName="euiDataGrid__controlPopoverWithDragDrop" + hasDragDrop button={ setIsOpen(false)} anchorPosition="downLeft" panelPaddingSize="s" - panelClassName="euiDataGrid__controlPopoverWithDragDrop" + hasDragDrop button={ Date: Thu, 27 Oct 2022 10:14:27 -0700 Subject: [PATCH 3/4] Fix popover arrows no longer being visible - due to using box-shadow instead of filter - we now need to add a custom drop shadow onto the arrows + add a CSS className hook to the arrow div --- .../column_selector.test.tsx.snap | 2 +- .../column_sorting.test.tsx.snap | 2 +- .../__snapshots__/popover.rtl.test.tsx.snap | 2 +- .../__snapshots__/popover.test.tsx.snap | 24 +++++++++---------- .../popover/popover_arrow/_popover_arrow.tsx | 7 +++++- .../popover_panel/_popover_panel.styles.ts | 22 ++++++++++++++++- .../__snapshots__/tour_step.test.tsx.snap | 10 ++++---- 7 files changed, 47 insertions(+), 22 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index cf1e5f5ed56..5d9f02c4364 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -45,7 +45,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov tabindex="0" >
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index a79fdc8c08b..124bb956a6a 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -45,7 +45,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover tabindex="0" >
diff --git a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap index 9a54775ae6e..dfb5cf0e586 100644 --- a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap +++ b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap @@ -61,7 +61,7 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = ` tabindex="0" >
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap index 97427fd5aa1..b0458f3bff7 100644 --- a/src/components/popover/__snapshots__/popover.test.tsx.snap +++ b/src/components/popover/__snapshots__/popover.test.tsx.snap @@ -116,7 +116,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = ` tabindex="0" >
@@ -177,7 +177,7 @@ exports[`EuiPopover props buffer 1`] = ` tabindex="0" >
@@ -236,7 +236,7 @@ exports[`EuiPopover props buffer for all sides 1`] = ` tabindex="0" >
@@ -308,7 +308,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = ` tabindex="0" >
@@ -380,7 +380,7 @@ exports[`EuiPopover props isOpen renders true 1`] = ` tabindex="0" >
@@ -439,7 +439,7 @@ exports[`EuiPopover props offset with arrow 1`] = ` tabindex="0" >
@@ -552,7 +552,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = ` tabindex="0" >
@@ -608,7 +608,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = ` style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" >
@@ -661,7 +661,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = ` tabindex="0" >
@@ -720,7 +720,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = ` tabindex="0" >
@@ -780,7 +780,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = ` tabindex="0" >
@@ -837,7 +837,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = ` style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" >
diff --git a/src/components/popover/popover_arrow/_popover_arrow.tsx b/src/components/popover/popover_arrow/_popover_arrow.tsx index 8d788d6637f..6bcdffa01bd 100644 --- a/src/components/popover/popover_arrow/_popover_arrow.tsx +++ b/src/components/popover/popover_arrow/_popover_arrow.tsx @@ -29,7 +29,12 @@ export const EuiPopoverArrow: FunctionComponent = ({ const cssStyles = [styles.euiPopoverArrow, styles[position]]; return ( -
+
{children}
); diff --git a/src/components/popover/popover_panel/_popover_panel.styles.ts b/src/components/popover/popover_panel/_popover_panel.styles.ts index 762daa14c66..bfbb617e725 100644 --- a/src/components/popover/popover_panel/_popover_panel.styles.ts +++ b/src/components/popover/popover_panel/_popover_panel.styles.ts @@ -12,6 +12,7 @@ import { euiShadowFlat, euiShadowMedium, } from '../../../themes/amsterdam/global_styling/mixins'; +import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions'; import { UseEuiTheme } from '../../../services'; import { euiCanAnimate, logicalCSS } from '../../../global_styling'; @@ -25,7 +26,7 @@ const translateDistance = 's'; */ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => { - const { euiTheme } = euiThemeContext; + const { euiTheme, colorMode } = euiThemeContext; return { // Base @@ -105,15 +106,34 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => { // The offset transforms must be recreated in margins top: css` margin-block-start: ${euiTheme.size[translateDistance]}; + // Existing box-shadow of the popover is sufficient to see the arrow `, bottom: css` margin-block-start: -${euiTheme.size[translateDistance]}; + + .euiPopover__arrow { + filter: drop-shadow( + 0 -6px 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} + ); + } `, left: css` margin-inline-start: ${euiTheme.size[translateDistance]}; + + .euiPopover__arrow { + filter: drop-shadow( + 6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} + ); + } `, right: css` margin-inline-start: -${euiTheme.size[translateDistance]}; + + .euiPopover__arrow { + filter: drop-shadow( + -6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} + ); + } `, }, }; diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index 7bd94fd85b8..d79bb7c0111 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -52,7 +52,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = ` style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
@@ -155,7 +155,7 @@ exports[`EuiTourStep can have subtitle 1`] = ` style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
@@ -263,7 +263,7 @@ exports[`EuiTourStep can override the footer action 1`] = ` style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
@@ -355,7 +355,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = ` style="top: -22px; left: -16px; will-change: transform, opacity; z-index: 2000;" >
@@ -453,7 +453,7 @@ exports[`EuiTourStep is rendered 1`] = ` style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
From ce94df31dad7a598bf7c666ac8ee14b8bede4591 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 27 Oct 2022 10:23:17 -0700 Subject: [PATCH 4/4] Changelog --- upcoming_changelogs/6329.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 upcoming_changelogs/6329.md diff --git a/upcoming_changelogs/6329.md b/upcoming_changelogs/6329.md new file mode 100644 index 00000000000..6ce91b5d41f --- /dev/null +++ b/upcoming_changelogs/6329.md @@ -0,0 +1,5 @@ +- Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`. + +**Bug fixes** + +- Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers