feat: add tooltip to input icons

nulogy · Jan 23, 2025 · d04c3ad · d04c3ad
1 parent 99c0b89
commit d04c3ad
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 12 deletions.
diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
-import { position, PositionProps, space, SpaceProps } from "styled-system";
+import { height, position, PositionProps, space, SpaceProps, width } from "styled-system";
 import icons from "@nulogy/icons";
 import { IconName } from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";
@@ -107,7 +107,6 @@ export const InputIcon = styled(Icon)<PositionProps>(
     color: theme.colors.midGrey,
     bottom: "50%",
     transform: "translateY(50%)",
-    pointerEvents: "none",
   }),
   position
 );

diff --git a/src/Input/Input.story.tsx b/src/Input/Input.story.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { action } from "@storybook/addon-actions";
-import { Input, Form, FormSection, PrimaryButton, Button, Flex } from "../index";
+import { Input, Form, FormSection, PrimaryButton, Button, Flex, Heading1, Heading4 } from "../index";
 
 const errorList = ["Error message 1", "Error message 2"];
 
@@ -137,6 +137,57 @@ export const WithAnIcon = () => (
   </Flex>
 );
 
+export const WithIconTooltips = () => (
+  <Flex flexDirection="column" gap="x2">
+    <Heading4>
+      You can use tooltips to provide additional information about the icon. Tooltips can be customized with the same
+      props as the Tooltip component.
+    </Heading4>
+    <Input
+      maxWidth="320px"
+      inputWidth="320px"
+      iconLeft="search"
+      iconLeftTooltip="Search products"
+      iconLeftTooltipProps={{
+        placement: "right",
+        showDelay: "500",
+      }}
+      placeholder="Search by SKU"
+      labelText="Hover over the search icon (right placement, 500ms delay)"
+    />
+    <Input
+      maxWidth="320px"
+      inputWidth="320px"
+      iconRight="barcode"
+      iconRightTooltip="Scan barcode"
+      iconRightTooltipProps={{
+        placement: "left",
+        hideDelay: "1000",
+      }}
+      placeholder="Scan product"
+      labelText="Hover over the barcode icon (left placement, 1s hide delay)"
+    />
+    <Input
+      maxWidth="320px"
+      inputWidth="320px"
+      iconLeft="search"
+      iconRight="close"
+      iconLeftTooltip="Search products"
+      iconRightTooltip="Clear search"
+      iconLeftTooltipProps={{
+        placement: "top",
+        maxWidth: "150px",
+      }}
+      iconRightTooltipProps={{
+        placement: "bottom",
+        maxWidth: "150px",
+      }}
+      placeholder="Search with both tooltips"
+      labelText="Different placements (top and bottom)"
+    />
+  </Flex>
+);
+
 export const UsingRefToControlFocus = () => {
   const ref = useRef(null);
   const handleClick = () => {

diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
@@ -1,17 +1,18 @@
+import { IconName } from "@nulogy/icons";
 import React, { forwardRef } from "react";
 import styled, { CSSObject, useTheme } from "styled-components";
-import { position, PositionProps, space, SpaceProps, variant } from "styled-system";
-import { IconName } from "@nulogy/icons";
-import { Icon } from "../Icon";
+import { space, SpaceProps, variant } from "styled-system";
 import { Box, BoxProps } from "../Box";
-import { Flex } from "../Flex";
-import { subPx } from "../utils";
 import { MaybeFieldLabel } from "../FieldLabel";
-import type { DefaultNDSThemeType } from "../theme";
+import { Flex } from "../Flex";
+import { InputIcon } from "../Icon/Icon";
 import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import type { DefaultNDSThemeType } from "../theme";
+import { Tooltip } from "../Tooltip";
+import { TooltipProps } from "../Tooltip/Tooltip";
+import { subPx } from "../utils";
 import Prefix from "./Prefix";
 import Suffix from "./Suffix";
-import { InputIcon } from "../Icon/Icon";
 
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "height" | "width">;
 
@@ -22,6 +23,10 @@ export interface InputFieldProps extends NativeInputProps {
   iconLeft?: IconName | "loading";
   iconRightSize?: string;
   iconLeftSize?: string;
+  iconLeftTooltip?: React.ReactNode;
+  iconRightTooltip?: React.ReactNode;
+  iconLeftTooltipProps?: Omit<TooltipProps, "tooltip">;
+  iconRightTooltipProps?: Omit<TooltipProps, "tooltip">;
   error?: boolean;
   labelText?: string;
   requirementText?: string;
@@ -42,6 +47,10 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
       iconLeft,
       iconRightSize = "x3",
       iconLeftSize = "x3",
+      iconLeftTooltip,
+      iconRightTooltip,
+      iconLeftTooltipProps,
+      iconRightTooltipProps,
       error,
       required,
       labelText,
@@ -68,7 +77,14 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
         <Flex alignItems="flex-start">
           <Prefix prefix={prefix} prefixWidth={prefixWidth} textAlign={prefixAlignment} />
           <InputWrapper maxWidth={inputWidth}>
-            {iconLeft && <InputIcon left="x1" icon={iconLeft} size={iconLeftSize} />}
+            {iconLeft &&
+              (iconLeftTooltip ? (
+                <Tooltip tooltip={iconLeftTooltip} {...iconLeftTooltipProps}>
+                  <InputIcon left="x1" icon={iconLeft} size={iconLeftSize} />
+                </Tooltip>
+              ) : (
+                <InputIcon left="x1" icon={iconLeft} size={iconLeftSize} />
+              ))}
             <StyledInput
               paddingLeft={iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1}
               paddingRight={iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1}
@@ -82,7 +98,14 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
               inputWidth={inputWidth}
               {...props}
             />
-            {iconRight && <InputIcon right="x1" icon={iconRight} size={iconRightSize} />}
+            {iconRight &&
+              (iconRightTooltip ? (
+                <Tooltip tooltip={iconRightTooltip} {...iconRightTooltipProps}>
+                  <InputIcon right="x1" icon={iconRight} size={iconRightSize} />
+                </Tooltip>
+              ) : (
+                <InputIcon right="x1" icon={iconRight} size={iconRightSize} />
+              ))}
           </InputWrapper>
           <Suffix suffix={suffix} suffixWidth={suffixWidth} textAlign={suffixAlignment} />
         </Flex>