[PR feedback] Prefer not to hook into className for popover panel

elastic · May 9, 2022 · f8e7a5c · f8e7a5c
1 parent 6a7a464
commit f8e7a5c
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 3 deletions.
diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx
@@ -388,9 +388,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
       : (parent?.parentNode as HTMLElement);
     if (!popoverParent) return;
 
-    const hasPopoverParent = popoverParent.classList.contains(
-      'euiPopover__panel'
-    );
+    const hasPopoverParent = !!popoverParent.dataset.popoverPanel;
     if (!hasPopoverParent) return;
 
     this.initialPopoverParent = popoverParent;

diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -117,6 +117,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   aria-modal="true"
                   class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
                   data-autofocus="true"
+                  data-popover-panel="true"
                   role="dialog"
                   style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
                   tabindex="0"
@@ -473,6 +474,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                         aria-live="off"
                         aria-modal="true"
                         className="euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
+                        data-popover-panel={true}
                         hasShadow={false}
                         paddingSize="s"
                         panelRef={[Function]}
@@ -492,6 +494,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                           aria-live="off"
                           aria-modal="true"
                           className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
+                          data-popover-panel={true}
                           role="dialog"
                           style={
                             Object {

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -107,6 +107,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                   aria-modal="true"
                   class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
                   data-autofocus="true"
+                  data-popover-panel="true"
                   role="dialog"
                   style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
                   tabindex="0"
@@ -484,6 +485,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                         aria-live="off"
                         aria-modal="true"
                         className="euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
+                        data-popover-panel={true}
                         hasShadow={false}
                         paddingSize="s"
                         panelRef={[Function]}
@@ -503,6 +505,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                           aria-live="off"
                           aria-modal="true"
                           className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
+                          data-popover-panel={true}
                           role="dialog"
                           style={
                             Object {

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -166,6 +166,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached"
+      data-popover-panel="true"
       role="dialog"
       style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
     >
@@ -441,6 +442,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached"
+      data-popover-panel="true"
       role="dialog"
       style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
     >
@@ -605,6 +607,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached"
+      data-popover-panel="true"
       role="dialog"
       style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
     >
@@ -768,6 +771,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached goes-on-popover-panel"
+      data-popover-panel="true"
       role="dialog"
       style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
     >

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -109,6 +109,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -167,6 +168,7 @@ exports[`EuiPopover props buffer 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -223,6 +225,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -292,6 +295,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -361,6 +365,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -418,6 +423,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 26px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -475,6 +481,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 18px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -530,6 +537,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -584,6 +592,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
       >
@@ -633,6 +642,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -689,6 +699,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
         data-autofocus="true"
+        data-popover-panel="true"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
@@ -745,6 +756,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
         aria-modal="true"
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen testClass1 testClass2"
         data-autofocus="true"
+        data-popover-panel="true"
         data-test-subj="test subject string"
         role="dialog"
         style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -801,6 +801,7 @@ export class EuiPopover extends Component<Props, State> {
           >
             <EuiPanel
               {...(panelProps as EuiPanelProps)}
+              data-popover-panel
               panelRef={this.panelRef}
               className={panelClasses}
               hasShadow={false}

diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+      data-popover-panel="true"
       role="dialog"
       style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 420px; min-width: 240px; z-index: 2000;"
     >
@@ -145,6 +146,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+      data-popover-panel="true"
       role="dialog"
       style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
     >
@@ -247,6 +249,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+      data-popover-panel="true"
       role="dialog"
       style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
     >
@@ -333,6 +336,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+      data-popover-panel="true"
       role="dialog"
       style="top: -22px; left: -16px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
     >
@@ -425,6 +429,7 @@ exports[`EuiTourStep is rendered 1`] = `
       aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+      data-popover-panel="true"
       role="dialog"
       style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
     >