Merge pull request #388 from layer5io/376-tooltipicon

feat(components): create TooltipIcon

packages/components/src/custom/TooltipIcon.tsx

@@ -0,0 +1,36 @@
+import { SxProps } from '@mui/material/styles';
+import React from 'react';
+import { IconButton } from '../base/IconButton';
+import Tooltip from '../patches/Tooltip';
+
+interface TooltipIconProps {
+  title: string;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  icon: React.ReactNode;
+  arrow?: boolean;
+  style?: React.CSSProperties;
+}
+
+export function TooltipIcon({ title, onClick, icon, style, arrow = false }: TooltipIconProps) {
+  return (
+    <Tooltip title={title} arrow={arrow}>
+      <IconButton
+        onClick={onClick}
+        sx={{
+          '&:hover': {
+            '& svg': {
+              fill: '#00d3a9'
+            },
+            borderRadius: '4px'
+          },
+          ...(style as SxProps)
+        }}
+        disableRipple
+      >
+        {icon}
+      </IconButton>
+    </Tooltip>
+  );
+}
+
+export default TooltipIcon;

packages/components/src/index.tsx

@@ -69,6 +69,7 @@ export {
   type ResponsiveDataTableProps
 } from './custom/ResponsiveDataTable';
 export { default as SearchBar, type SearchBarProps } from './custom/SearchBar';
+export { default as TooltipIcon } from './custom/TooltipIcon';
 export {
   default as UniversalFilter,
   type FilterColumn,

packages/components/src/patches/Tooltip.tsx

@@ -0,0 +1,20 @@
+import MuiTooltip, { TooltipProps } from '@mui/material/Tooltip';
+import React from 'react';
+
+export interface ChildrenPropType<T> {
+  children?: T;
+}
+
+/**
+ * Create a custom Tooltip component to resolve the React.forwardRef warning
+ */
+export const Tooltip = React.forwardRef<
+  HTMLDivElement,
+  TooltipProps & ChildrenPropType<React.ReactNode>
+>((props, ref) => (
+  <MuiTooltip {...props} ref={ref}>
+    <span>{props.children}</span>
+  </MuiTooltip>
+));
+
+export default Tooltip;