From 5dbce9368202deb025043d51cab114405fd00664 Mon Sep 17 00:00:00 2001
From: Dan Dong <danieldong51@gmail.com>
Date: Fri, 26 Jul 2024 16:34:51 -0700
Subject: [PATCH] Changed positioning attributes to ToolTip Anchor

Signed-off-by: Dan Dong <danieldong51@gmail.com>
---
 .../components/legend/__snapshots__/legend.test.tsx.snap | 4 ++--
 .../public/vislib/components/legend/_legend.scss         | 9 ++++++---
 .../public/vislib/components/legend/legend.tsx           | 7 ++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
index 883ad3e83855..bff4c2c6df6f 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><span class=\\"euiToolTipAnchor\\"><button type=\\"button\\" class=\\"visLegend__toggle osd-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button></span></div>"`;
+exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><span class=\\"euiToolTipAnchor visLegend__toggleTooltipAnchor\\"><button type=\\"button\\" class=\\"visLegend__toggle osd-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button></span></div>"`;
 
-exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><span class=\\"euiToolTipAnchor\\"><button type=\\"button\\" class=\\"visLegend__toggle osd-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button></span><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;
+exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><span class=\\"euiToolTipAnchor visLegend__toggleTooltipAnchor\\"><button type=\\"button\\" class=\\"visLegend__toggle osd-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button></span><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
index c114c07f17b9..a91226cf7725 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
@@ -8,9 +8,6 @@ $visLegendLineHeight: $euiSize;
 
 .visLegend__toggle {
   border-radius: $euiBorderRadius;
-  position: absolute;
-  bottom: 0;
-  left: 0;
   display: flex;
   padding: $euiSizeXS;
   background-color: $euiColorEmptyShade;
@@ -24,6 +21,12 @@ $visLegendLineHeight: $euiSize;
   }
 }
 
+.visLegend__toggleTooltipAnchor {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
 .visLegend__toggle--isOpen {
   background-color: transparentize($euiColorDarkestShade, 0.9);
   opacity: 1;
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
index 2ebb6f85dbb5..2dee1407fc61 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
@@ -265,7 +265,12 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
 
     return (
       <div className="visLegend">
-        <EuiToolTip content={label} delay="long" position="bottom">
+        <EuiToolTip
+          anchorClassName="visLegend__toggleTooltipAnchor"
+          content={label}
+          delay="long"
+          position="bottom"
+        >
           <button
             type="button"
             onClick={this.toggleLegend}