Skip to content

Commit

Permalink
[PR feedback] Prefer not to hook into className for popover panel
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen committed May 9, 2022
1 parent 6a7a464 commit f8e7a5c
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 3 deletions.
4 changes: 1 addition & 3 deletions src/components/context_menu/context_menu_panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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]}
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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]}
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down
12 changes: 12 additions & 0 deletions src/components/popover/__snapshots__/popover.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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;"
Expand Down
1 change: 1 addition & 0 deletions src/components/popover/popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions src/components/tour/__snapshots__/tour_step.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down Expand Up @@ -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;"
>
Expand Down

0 comments on commit f8e7a5c

Please sign in to comment.