Merge pull request #1980 from dxc-technology/Mil4n0r/tooltip-button

Added custom tooltip to `Button`

Author: GomezIvann

packages/lib/src/button/Button.test.tsx

@@ -21,7 +21,6 @@ describe("Button component tests", () => {
 
     const button = getByRole("button");
     expect(button.getAttribute("aria-label")).toBe("Go home");
-    expect(button.getAttribute("title")).toBe("Go home");
     expect(button.getAttribute("tabindex")).toBe("1");
   });
 });

packages/lib/src/button/Button.tsx

@@ -4,6 +4,7 @@ import { getMargin } from "../common/utils";
 import useTheme from "../useTheme";
 import ButtonPropsType from "./types";
 import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
 
 const DxcButton = ({
   label = "",
@@ -22,25 +23,26 @@ const DxcButton = ({
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <Button
-        aria-label={title}
-        disabled={disabled}
-        onClick={() => {
-          onClick();
-        }}
-        tabIndex={disabled ? -1 : tabIndex}
-        title={title}
-        type={type}
-        $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
-        hasLabel={label ? true : false}
-        hasIcon={icon ? true : false}
-        iconPosition={iconPosition}
-        size={size}
-        margin={margin}
-      >
-        {label && <LabelContainer>{label}</LabelContainer>}
-        {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>}
-      </Button>
+      <DxcTooltip label={title}>
+        <Button
+          aria-label={title}
+          disabled={disabled}
+          onClick={() => {
+            onClick();
+          }}
+          tabIndex={disabled ? -1 : tabIndex}
+          type={type}
+          $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
+          hasLabel={label ? true : false}
+          hasIcon={icon ? true : false}
+          iconPosition={iconPosition}
+          size={size}
+          margin={margin}
+        >
+          {label && <LabelContainer>{label}</LabelContainer>}
+          {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>}
+        </Button>
+      </DxcTooltip>
     </ThemeProvider>
   );
 };