diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx index d2fa06749f8..8691238fb4d 100644 --- 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 { : (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 index beb97537b57..7bee1dad864 100644 --- 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 index 703b12fd7c0..b5cf61f5c8f 100644 --- 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 index f48fb0c5ef3..82484dca42a 100644 --- 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 index 81a1cee5ae4..2561fc0df45 100644 --- 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 index 36a80306406..850e2902c64 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -801,6 +801,7 @@ export class EuiPopover extends Component { > @@ -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;" >