Skip to content

Commit f8e7a5c

Browse files
cee-chencee-chen
committed
[PR feedback] Prefer not to hook into className for popover panel
1 parent 6a7a464 commit f8e7a5c

7 files changed

Lines changed: 29 additions & 3 deletions

File tree

‎src/components/context_menu/context_menu_panel.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -388,9 +388,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
388388
: (parent?.parentNode as HTMLElement);
389389
if (!popoverParent) return;
390390

391-
const hasPopoverParent = popoverParent.classList.contains(
392-
'euiPopover__panel'
393-
);
391+
const hasPopoverParent = !!popoverParent.dataset.popoverPanel;
394392
if (!hasPopoverParent) return;
395393

396394
this.initialPopoverParent = popoverParent;

‎src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
117117
aria-modal="true"
118118
class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
119119
data-autofocus="true"
120+
data-popover-panel="true"
120121
role="dialog"
121122
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
122123
tabindex="0"
@@ -473,6 +474,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
473474
aria-live="off"
474475
aria-modal="true"
475476
className="euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
477+
data-popover-panel={true}
476478
hasShadow={false}
477479
paddingSize="s"
478480
panelRef={[Function]}
@@ -492,6 +494,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
492494
aria-live="off"
493495
aria-modal="true"
494496
className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
497+
data-popover-panel={true}
495498
role="dialog"
496499
style={
497500
Object {

‎src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
107107
aria-modal="true"
108108
class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
109109
data-autofocus="true"
110+
data-popover-panel="true"
110111
role="dialog"
111112
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
112113
tabindex="0"
@@ -484,6 +485,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
484485
aria-live="off"
485486
aria-modal="true"
486487
className="euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
488+
data-popover-panel={true}
487489
hasShadow={false}
488490
paddingSize="s"
489491
panelRef={[Function]}
@@ -503,6 +505,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
503505
aria-live="off"
504506
aria-modal="true"
505507
className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiDataGrid__controlPopoverWithDragDrop"
508+
data-popover-panel={true}
506509
role="dialog"
507510
style={
508511
Object {

‎src/components/form/super_select/__snapshots__/super_select.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
166166
aria-live="assertive"
167167
aria-modal="true"
168168
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached"
169+
data-popover-panel="true"
169170
role="dialog"
170171
style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
171172
>
@@ -441,6 +442,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
441442
aria-live="assertive"
442443
aria-modal="true"
443444
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached"
445+
data-popover-panel="true"
444446
role="dialog"
445447
style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
446448
>
@@ -605,6 +607,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
605607
aria-live="assertive"
606608
aria-modal="true"
607609
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached"
610+
data-popover-panel="true"
608611
role="dialog"
609612
style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
610613
>
@@ -768,6 +771,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
768771
aria-live="assertive"
769772
aria-modal="true"
770773
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiPopover__panel-isAttached goes-on-popover-panel"
774+
data-popover-panel="true"
771775
role="dialog"
772776
style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
773777
>

‎src/components/popover/__snapshots__/popover.test.tsx.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
109109
aria-modal="true"
110110
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
111111
data-autofocus="true"
112+
data-popover-panel="true"
112113
role="dialog"
113114
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
114115
tabindex="0"
@@ -167,6 +168,7 @@ exports[`EuiPopover props buffer 1`] = `
167168
aria-modal="true"
168169
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
169170
data-autofocus="true"
171+
data-popover-panel="true"
170172
role="dialog"
171173
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
172174
tabindex="0"
@@ -223,6 +225,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
223225
aria-modal="true"
224226
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
225227
data-autofocus="true"
228+
data-popover-panel="true"
226229
role="dialog"
227230
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
228231
tabindex="0"
@@ -292,6 +295,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
292295
aria-modal="true"
293296
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
294297
data-autofocus="true"
298+
data-popover-panel="true"
295299
role="dialog"
296300
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
297301
tabindex="0"
@@ -361,6 +365,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
361365
aria-modal="true"
362366
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
363367
data-autofocus="true"
368+
data-popover-panel="true"
364369
role="dialog"
365370
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
366371
tabindex="0"
@@ -418,6 +423,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
418423
aria-modal="true"
419424
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
420425
data-autofocus="true"
426+
data-popover-panel="true"
421427
role="dialog"
422428
style="top: 26px; left: -22px; will-change: transform, opacity; z-index: 2000;"
423429
tabindex="0"
@@ -475,6 +481,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
475481
aria-modal="true"
476482
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
477483
data-autofocus="true"
484+
data-popover-panel="true"
478485
role="dialog"
479486
style="top: 18px; left: -22px; will-change: transform, opacity; z-index: 2000;"
480487
tabindex="0"
@@ -530,6 +537,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
530537
aria-modal="true"
531538
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
532539
data-autofocus="true"
540+
data-popover-panel="true"
533541
role="dialog"
534542
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
535543
tabindex="0"
@@ -584,6 +592,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
584592
aria-live="assertive"
585593
aria-modal="true"
586594
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
595+
data-popover-panel="true"
587596
role="dialog"
588597
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
589598
>
@@ -633,6 +642,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
633642
aria-modal="true"
634643
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
635644
data-autofocus="true"
645+
data-popover-panel="true"
636646
role="dialog"
637647
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
638648
tabindex="0"
@@ -689,6 +699,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
689699
aria-modal="true"
690700
class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
691701
data-autofocus="true"
702+
data-popover-panel="true"
692703
role="dialog"
693704
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
694705
tabindex="0"
@@ -745,6 +756,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
745756
aria-modal="true"
746757
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen testClass1 testClass2"
747758
data-autofocus="true"
759+
data-popover-panel="true"
748760
data-test-subj="test subject string"
749761
role="dialog"
750762
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"

‎src/components/popover/popover.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,7 @@ export class EuiPopover extends Component<Props, State> {
801801
>
802802
<EuiPanel
803803
{...(panelProps as EuiPanelProps)}
804+
data-popover-panel
804805
panelRef={this.panelRef}
805806
className={panelClasses}
806807
hasShadow={false}

‎src/components/tour/__snapshots__/tour_step.test.tsx.snap‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
4848
aria-live="assertive"
4949
aria-modal="true"
5050
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
51+
data-popover-panel="true"
5152
role="dialog"
5253
style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 420px; min-width: 240px; z-index: 2000;"
5354
>
@@ -145,6 +146,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
145146
aria-live="assertive"
146147
aria-modal="true"
147148
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
149+
data-popover-panel="true"
148150
role="dialog"
149151
style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
150152
>
@@ -247,6 +249,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
247249
aria-live="assertive"
248250
aria-modal="true"
249251
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
252+
data-popover-panel="true"
250253
role="dialog"
251254
style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
252255
>
@@ -333,6 +336,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
333336
aria-live="assertive"
334337
aria-modal="true"
335338
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
339+
data-popover-panel="true"
336340
role="dialog"
337341
style="top: -22px; left: -16px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
338342
>
@@ -425,6 +429,7 @@ exports[`EuiTourStep is rendered 1`] = `
425429
aria-live="assertive"
426430
aria-modal="true"
427431
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
432+
data-popover-panel="true"
428433
role="dialog"
429434
style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;"
430435
>

0 commit comments

Comments
 (0)