From a28fd7f6eb7a4f0fd0d409fbb123cfadb3396e0a Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Tue, 7 Jan 2025 16:42:53 +0100 Subject: [PATCH] [EuiPopover] Remove `hasDragDrop` deprecated prop (#8256) --- packages/eui/changelogs/upcoming/8256.md | 3 ++ .../popover/input_popover.stories.tsx | 2 - .../components/popover/popover.stories.tsx | 1 - .../eui/src/components/popover/popover.tsx | 9 ---- .../_popover_panel.test.tsx.snap | 7 --- .../popover_panel/_popover_panel.styles.ts | 47 +------------------ .../popover_panel/_popover_panel.test.tsx | 6 --- .../popover/popover_panel/_popover_panel.tsx | 20 +------- 8 files changed, 6 insertions(+), 89 deletions(-) create mode 100644 packages/eui/changelogs/upcoming/8256.md diff --git a/packages/eui/changelogs/upcoming/8256.md b/packages/eui/changelogs/upcoming/8256.md new file mode 100644 index 00000000000..c78a2268775 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8256.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead diff --git a/packages/eui/src/components/popover/input_popover.stories.tsx b/packages/eui/src/components/popover/input_popover.stories.tsx index 36a04f94558..eb7d4f8ecbf 100644 --- a/packages/eui/src/components/popover/input_popover.stories.tsx +++ b/packages/eui/src/components/popover/input_popover.stories.tsx @@ -37,7 +37,6 @@ const meta: Meta = { panelMinWidth: 0, offset: undefined, buffer: undefined, - hasDragDrop: false, panelClassName: '', popoverScreenReaderText: '', }, @@ -50,7 +49,6 @@ moveStorybookControlsToCategory( 'closePopover', 'disableFocusTrap', 'display', - 'hasDragDrop', 'isOpen', 'offset', 'onPositionChange', diff --git a/packages/eui/src/components/popover/popover.stories.tsx b/packages/eui/src/components/popover/popover.stories.tsx index 45c47dc62c4..0d0820d8adc 100644 --- a/packages/eui/src/components/popover/popover.stories.tsx +++ b/packages/eui/src/components/popover/popover.stories.tsx @@ -41,7 +41,6 @@ const meta: Meta = { // adding defaults for quicker/easier QA arrowChildren: '', attachToAnchor: false, - hasDragDrop: false, panelClassName: '', popoverScreenReaderText: '', }, diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx index ec45cc3b036..fbe74fca30e 100644 --- a/packages/eui/src/components/popover/popover.tsx +++ b/packages/eui/src/components/popover/popover.tsx @@ -174,13 +174,6 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps { * @default true */ repositionToCrossAxis?: boolean; - /** - * Must be set to true if using `EuiDragDropContext` within a popover, - * otherwise your nested drag & drop will have incorrect positioning - * - * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead. - */ - hasDragDrop?: boolean; /** * By default, popover content inherits the z-index of the anchor * component; pass `zIndex` to override @@ -635,7 +628,6 @@ export class EuiPopover extends Component { arrowChildren, repositionOnScroll, repositionToCrossAxis, - hasDragDrop, zIndex, attachToAnchor, display, @@ -730,7 +722,6 @@ 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/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap b/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap index f95ad7de7c2..baf859b0d97 100644 --- a/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap +++ b/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap @@ -9,13 +9,6 @@ exports[`EuiPopoverPanel is rendered 1`] = ` /> `; -exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = ` -
-`; - exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
{ - const { euiTheme, colorMode } = euiThemeContext; + const { euiTheme } = euiThemeContext; const translateDistance = euiTheme.size.s; const animationSpeed = euiTheme.animation[openAnimationTiming]; @@ -119,49 +118,5 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => { return this.bottom; }, }, - - // Has an arrow, but cannot have transform or filter CSS - they create a - // stacking context that messes up the drag/drop fixed positioning - hasDragDrop: { - hasDragDrop: css` - ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })} - - ${euiCanAnimate} { - transition: ${opacityTransition}; /* 2 */ - } - `, - // The offset transforms must be recreated in margins - top: css` - margin-block-start: ${translateDistance}; - /* Existing box-shadow of the popover is sufficient to see the arrow */ - `, - bottom: css` - margin-block-start: -${translateDistance}; - - .euiPopover__arrow { - filter: drop-shadow( - 0 -6px 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} - ); - } - `, - left: css` - margin-inline-start: ${translateDistance}; - - .euiPopover__arrow { - filter: drop-shadow( - 6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} - ); - } - `, - right: css` - margin-inline-start: -${translateDistance}; - - .euiPopover__arrow { - filter: drop-shadow( - -6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} - ); - } - `, - }, }; }; diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx b/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx index 99e88eb3acc..74a3beaa4c4 100644 --- a/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx +++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx @@ -36,12 +36,6 @@ describe('EuiPopoverPanel', () => { expect(container.firstChild).toMatchSnapshot(); }); - test('hasDragDrop is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - describe('position', () => { POSITIONS.forEach((position) => { test(`${position} is rendered`, () => { diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx b/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx index 5bf66472a10..615d9bb6656 100644 --- a/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx +++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx @@ -28,7 +28,6 @@ type EuiPopoverPanelInternalProps = { isOpen?: boolean; isAttached?: boolean; position?: EuiPopoverArrowPositions | null; - hasDragDrop?: boolean; }; /** @@ -37,15 +36,7 @@ type EuiPopoverPanelInternalProps = { */ export const EuiPopoverPanel: FunctionComponent< EuiPopoverPanelProps & EuiPopoverPanelInternalProps -> = ({ - children, - className, - isOpen, - isAttached, - hasDragDrop, - position, - ...rest -}) => { +> = ({ children, className, isOpen, isAttached, position, ...rest }) => { const classes = classNames('euiPopover__panel', className); const euiThemeContext = useEuiTheme(); @@ -61,13 +52,6 @@ export const EuiPopoverPanel: FunctionComponent< isOpen && styles.isOpen, ]; - if (hasDragDrop) { - return [ - ...sharedStyles, - styles.hasDragDrop.hasDragDrop, - position && styles.hasDragDrop[position], - ]; - } if (isAttached) { return [ ...sharedStyles, @@ -80,7 +64,7 @@ export const EuiPopoverPanel: FunctionComponent< styles.hasTransform.hasTransform, isOpen && position && styles.hasTransform[position], ]; - }, [euiThemeContext, isOpen, position, isAttached, hasDragDrop]); + }, [euiThemeContext, isOpen, position, isAttached]); return (