[EuiPopover] Add hasDragDrop prop for popovers with draggable conte…

…xts (#6329) * Add `hasDragDrop` prop and styles to EuiPopover - which affords / accounts for styling for popovers that contain drag/droppable contexts * Fix EuiDataGrid popovers with drag & drop * 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 * Changelog
elastic · Oct 28, 2022 · dd580b1 · dd580b1
1 parent 0267215
commit dd580b1
Show file tree

Hide file tree

Showing 15 changed files with 119 additions and 35 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
@@ -37,15 +37,15 @@ 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"
   style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
   tabindex="0"
 >
   <div
-    class="emotion-euiPopoverArrow-bottom"
+    class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
     data-popover-arrow="bottom"
     style="left: 10px; top: 0px;"
   />

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -37,15 +37,15 @@ 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"
   style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
   tabindex="0"
 >
   <div
-    class="emotion-euiPopoverArrow-bottom"
+    class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
     data-popover-arrow="bottom"
     style="left: 10px; top: 0px;"
   />

diff --git 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
@@ -147,7 +147,7 @@ export const useDataGridColumnSelector = (
         closePopover={() => setIsOpen(false)}
         anchorPosition="downLeft"
         panelPaddingSize="s"
-        panelClassName="euiDataGrid__controlPopoverWithDragDrop"
+        hasDragDrop
         button={
           <EuiButtonEmpty
             size="xs"

diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx
@@ -141,7 +141,7 @@ export const useDataGridColumnSorting = (
       closePopover={() => setIsOpen(false)}
       anchorPosition="downLeft"
       panelPaddingSize="s"
-      panelClassName="euiDataGrid__controlPopoverWithDragDrop"
+      hasDragDrop
       button={
         <EuiButtonEmpty
           size="xs"

diff --git 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"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />

diff --git 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"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         >
@@ -177,7 +177,7 @@ exports[`EuiPopover props buffer 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -236,7 +236,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -308,7 +308,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -380,7 +380,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -439,7 +439,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -552,7 +552,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -608,7 +608,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -661,7 +661,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -720,7 +720,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -780,7 +780,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
         tabindex="0"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />
@@ -837,7 +837,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
       >
         <div
-          class="emotion-euiPopoverArrow-bottom"
+          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
           data-popover-arrow="bottom"
           style="left: 10px; top: 0px;"
         />

diff --git 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<Props, State> {
       hasArrow,
       arrowChildren,
       repositionOnScroll,
+      hasDragDrop,
       zIndex,
       attachToAnchor,
       display,
@@ -709,6 +715,7 @@ export class EuiPopover extends Component<Props, State> {
               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_arrow/_popover_arrow.tsx b/src/components/popover/popover_arrow/_popover_arrow.tsx
@@ -29,7 +29,12 @@ export const EuiPopoverArrow: FunctionComponent<EuiPopoverArrowProps> = ({
   const cssStyles = [styles.euiPopoverArrow, styles[position]];
 
   return (
-    <div data-popover-arrow={position} css={cssStyles} {...rest}>
+    <div
+      className="euiPopover__arrow"
+      data-popover-arrow={position}
+      css={cssStyles}
+      {...rest}
+    >
       {children}
     </div>
   );

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
@@ -9,6 +9,13 @@ exports[`EuiPopoverPanel is rendered 1`] = `
 />
 `;
 
+exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = `
+<div
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasDragDrop"
+  data-popover-panel="true"
+/>
+`;
+
 exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
 <div
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-isOpen"

diff --git 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
@@ -91,5 +92,49 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
       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]};
+        // 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/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(<EuiPopoverPanel hasDragDrop />);
+
+      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
@@ -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 (
     <EuiPopoverPanelContext.Provider value={panelContext}>
       <EuiPanel