feat: 🎸 [IconButton] Added optional tooltip

✅ Closes: 167
melfore · Jul 12, 2022 · 14f1a1c · 14f1a1c
1 parent 1db86dd
commit 14f1a1c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
@@ -1,8 +1,8 @@
-import React, { FC, useCallback } from "react";
-import MUIIconButton from "@material-ui/core/IconButton";
+import React, { FC, useCallback, useMemo } from "react";
+import { IconButton as MUIIconButton, Tooltip as MUITooltip } from "@material-ui/core";
 
 import { IIconButton } from "../../types/IconButton";
-import { getComposedDataCy, suppressEvent } from "../../utils";
+import { getComposedDataCy, slugify, suppressEvent } from "../../utils";
 import IconWrapper from "../IconWrapper";
 
 export const DATA_CY_DEFAULT = "icon-button";
@@ -21,6 +21,7 @@ const IconButton: FC<IIconButton> = ({
   rotate = false,
   size = "medium",
   style,
+  tooltip,
 }) => {
   const onClickHandler = useCallback(
     (event: any) => {
@@ -30,10 +31,23 @@ const IconButton: FC<IIconButton> = ({
     [onClick]
   );
 
+  const iconButton = useMemo(
+    () => (
+      <MUIIconButton color="inherit" data-cy={dataCy} disabled={disabled} onClick={onClickHandler} style={style}>
+        <IconWrapper dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.icon)} icon={icon} rotate={rotate} size={size} />
+      </MUIIconButton>
+    ),
+    [dataCy, disabled, icon, onClickHandler, rotate, size, style]
+  );
+
+  if (!tooltip) {
+    return iconButton;
+  }
+
   return (
-    <MUIIconButton color="inherit" data-cy={dataCy} disabled={disabled} onClick={onClickHandler} style={style}>
-      <IconWrapper dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.icon)} icon={icon} rotate={rotate} size={size} />
-    </MUIIconButton>
+    <MUITooltip aria-label={slugify(tooltip)} title={tooltip}>
+      <span>{iconButton}</span>
+    </MUITooltip>
   );
 };
 

diff --git a/src/types/IconButton.ts b/src/types/IconButton.ts
@@ -2,6 +2,11 @@ import { IClickable } from "./Base";
 import { IIcon, IIconUtilizer } from "./Icon";
 import { IDisablableInput } from "./Input";
 
-export interface IBaseIconButton extends IClickable, IIconUtilizer {}
+export interface IBaseIconButton extends IClickable, IIconUtilizer {
+  /**
+   * Text of tooltip
+   */
+  tooltip?: string;
+}
 
 export type IIconButton = IBaseIconButton & IDisablableInput & Pick<IIcon, "rotate" | "size">;