[Look&Feel] Discover and Query Management fix (opensearch-project#7530)

* Removed downArrow icon and tooltip Signed-off-by: Dan Dong <danieldong51@gmail.com> * Changed icons from smallIcons to xs Signed-off-by: Dan Dong <danieldong51@gmail.com> * Added browser tooltip back Signed-off-by: Dan Dong <danieldong51@gmail.com> * Changed remove field icon size to xs Signed-off-by: Dan Dong <danieldong51@gmail.com> * Changeset file for PR opensearch-project#7530 created/updated * Changed positioning attributes to ToolTip Anchor Signed-off-by: Dan Dong <danieldong51@gmail.com> (cherry picked from commit 5dbce93) * Updated snapshot testing Signed-off-by: Dan Dong <danieldong51@gmail.com> --------- Signed-off-by: Dan Dong <danieldong51@gmail.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Qxisylolo · Aug 1, 2024 · 02c8adf · 02c8adf
1 parent fa1bfb6
commit 02c8adf
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 36 deletions.
diff --git a/changelogs/fragments/7530.yml b/changelogs/fragments/7530.yml
@@ -0,0 +1,2 @@
+refactor:
+- [Look&Feel] Discover and Query Management fix ([#7530](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7530))
diff --git a/...ic/ui/saved_query_management/__snapshots__/saved_query_management_component.test.tsx.snap b/...ic/ui/saved_query_management/__snapshots__/saved_query_management_component.test.tsx.snap
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -42,7 +42,6 @@ import {
   EuiText,
   EuiSpacer,
   EuiIcon,
-  EuiToolTip,
 } from '@elastic/eui';
 
 import { i18n } from '@osd/i18n';
@@ -176,16 +175,15 @@ export function SavedQueryManagementComponent({
   });
 
   const savedQueryPopoverButton = (
-    <EuiToolTip content={label} delay="long" position="bottom">
-      <EuiSmallButtonEmpty
-        onClick={handleTogglePopover}
-        aria-label={label}
-        data-test-subj="saved-query-management-popover-button"
-        className="osdSavedQueryManagement__popoverButton"
-      >
-        <EuiIcon type="save" className="euiQuickSelectPopover__buttonText" />
-      </EuiSmallButtonEmpty>
-    </EuiToolTip>
+    <EuiSmallButtonEmpty
+      onClick={handleTogglePopover}
+      aria-label={label}
+      data-test-subj="saved-query-management-popover-button"
+      className="osdSavedQueryManagement__popoverButton"
+      title={label}
+    >
+      <EuiIcon type="save" className="euiQuickSelectPopover__buttonText" />
+    </EuiSmallButtonEmpty>
   );
 
   const savedQueryRows = () => {

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -32,7 +32,6 @@ import React, { useState } from 'react';
 import {
   EuiPopover,
   EuiPopoverTitle,
-  EuiSmallButtonIcon,
   EuiButtonIcon,
   EuiToolTip,
   EuiFlexGroup,
@@ -153,7 +152,7 @@ export const DiscoverField = ({
           defaultMessage: 'Add field as column',
         })}
       >
-        <EuiSmallButtonIcon
+        <EuiButtonIcon
           iconType="plusInCircleFilled"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
             if (ev.type === 'click') {
@@ -163,6 +162,7 @@ export const DiscoverField = ({
             ev.stopPropagation();
             toggleDisplay(field);
           }}
+          size="xs"
           data-test-subj={`fieldToggle-${field.name}`}
           aria-label={addLabelAria}
           className="dscSidebarField__actionButton"
@@ -177,7 +177,7 @@ export const DiscoverField = ({
           defaultMessage: 'Remove field from table',
         })}
       >
-        <EuiSmallButtonIcon
+        <EuiButtonIcon
           color="danger"
           iconType="cross"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
@@ -188,6 +188,7 @@ export const DiscoverField = ({
             ev.stopPropagation();
             toggleDisplay(field);
           }}
+          size="xs"
           data-test-subj={`fieldToggle-${field.name}`}
           aria-label={removeLabelAria}
           className="dscSidebarField__actionButton"

diff --git a/...lugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/...lugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
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
@@ -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
@@ -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}