(superset) 01/03: refactor(InfoTooltipWithTrigger): remove fa fa icons and add support for antd5 icons

[enzomartellucci]

This is an automated email from the ASF dual-hosted git repository.

enzomartellucci pushed a commit to branch 
enxdev/refactor/InfoTooltipWithTrigger-component
in repository https://gitbox.apache.org/repos/asf/superset.git

commit a4c7f775609e592b159f62c6650fed0caf6a924e
Author: Enzo Martellucci <enzomartellu...@gmail.com>
AuthorDate: Mon Apr 28 15:15:00 2025 +0200

    refactor(InfoTooltipWithTrigger): remove fa fa icons and add support for 
antd5 icons
---
 .../src/components/ColumnOption.tsx                |  2 +-
 .../src/components/InfoTooltipWithTrigger.tsx      | 51 +++++++++++-----------
 .../src/components/MetricOption.tsx                |  2 +-
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
index a9a3d1bdaf..969a64b0fa 100644
--- 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
+++ 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
@@ -28,7 +28,7 @@ import {
   getColumnTypeTooltipNode,
 } from './labelUtils';
 import { SQLPopover } from './SQLPopover';
-import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
+import { InfoTooltipWithTrigger } from './InfoTooltipWithTrigger';
 
 export type ColumnOptionProps = {
   column: ColumnMeta;
diff --git 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
index 5551e94a80..7ba447b0f1 100644
--- 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++ 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CSSProperties } from 'react';
+import { CSSProperties, KeyboardEvent, ReactNode } from 'react';
 import { kebabCase } from 'lodash';
 import { t } from '@superset-ui/core';
 import { Tooltip, TooltipProps, TooltipPlacement } from './Tooltip';
@@ -24,48 +24,51 @@ import { Tooltip, TooltipProps, TooltipPlacement } from 
'./Tooltip';
 export interface InfoTooltipWithTriggerProps {
   label?: string;
   tooltip?: TooltipProps['title'];
-  icon?: string;
+  icon?: ReactNode;
   onClick?: () => void;
   placement?: TooltipPlacement;
-  bsStyle?: string;
   className?: string;
   iconsStyle?: CSSProperties;
 }
 
-export function InfoTooltipWithTrigger({
+export const InfoTooltipWithTrigger = ({
   label,
   tooltip,
-  bsStyle,
   onClick,
-  icon = 'info-circle',
+  icon,
   className = 'text-muted',
   placement = 'right',
   iconsStyle = {},
-}: InfoTooltipWithTriggerProps) {
-  const iconClass = `fa fa-${icon} ${className} ${
-    bsStyle ? `text-${bsStyle}` : ''
-  }`;
+}: InfoTooltipWithTriggerProps) => {
+  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
+    if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+      onClick();
+    }
+  };
+
   const iconEl = (
-    <i
+    <span
       role="button"
       aria-label={t('Show info tooltip')}
       tabIndex={0}
-      className={iconClass}
-      style={{ cursor: onClick ? 'pointer' : undefined, ...iconsStyle }}
+      className={className}
+      style={{
+        cursor: onClick ? 'pointer' : undefined,
+        display: 'inline-flex',
+        alignItems: 'center',
+        ...iconsStyle,
+      }}
       onClick={onClick}
-      onKeyPress={
-        onClick &&
-        (event => {
-          if (event.key === 'Enter' || event.key === ' ') {
-            onClick();
-          }
-        })
-      }
-    />
+      onKeyDown={handleKeyDown}
+    >
+      {icon}
+    </span>
   );
+
   if (!tooltip) {
     return iconEl;
   }
+
   return (
     <Tooltip
       id={`${kebabCase(label)}-tooltip`}
@@ -75,6 +78,4 @@ export function InfoTooltipWithTrigger({
       {iconEl}
     </Tooltip>
   );
-}
-
-export default InfoTooltipWithTrigger;
+};
diff --git 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
index 81f0f97f48..b337926b67 100644
--- 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
+++ 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
@@ -25,7 +25,7 @@ import {
   SafeMarkdown,
   SupersetTheme,
 } from '@superset-ui/core';
-import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
+import { InfoTooltipWithTrigger } from './InfoTooltipWithTrigger';
 import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
 import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
 import Tooltip from './Tooltip';