feat: tooltipicon component (#990)

This introduces a TooltipIcon component that can be used as a trigger.
It will help with consistent tooltip icon usage.
There are new docs that outline how to use the icons.

Closes D2IQ-97013

packages/tablev2/TooltipHeaderCell.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
 import * as style from "./style";
 import { useId } from "react-id-generator";
-import { greyLightDarken2 } from "../design-tokens/build/js/designTokens";
 import { Flex, FlexItem } from "../styleUtils/layout";
-import { Tooltip } from "../tooltip";
-import { Icon } from "../icon";
+import { Tooltip, TooltipIcon } from "../tooltip";
 import { SystemIcons } from "../icons/dist/system-icons-enum";
 import { textTruncate } from "../shared/styles/styleUtils";
 import { css } from "@emotion/css";
@@ -18,11 +16,16 @@ export interface TooltipHeaderCellProps {
    * Helper content that explains the content in the column.
    */
   tooltipContent?: React.ReactNode;
+  /**
+   * Icon to display for the tooltip.
+   */
+  tooltipIcon?: SystemIcons.CircleInformation | SystemIcons.CircleQuestion;
   children?: React.ReactNode;
 }
 
 export const TooltipHeaderCell = ({
   children,
+  tooltipIcon,
   tooltipContent
 }: TooltipHeaderCellProps) => {
   const [generatedId] = useId(1, "colTooltip");
@@ -34,11 +37,7 @@ export const TooltipHeaderCell = ({
           id={`${generatedId}-tooltip`}
           trigger={
             <div className={iconAlign}>
-              <Icon
-                shape={SystemIcons.CircleInformation}
-                size="xs"
-                color={greyLightDarken2}
-              />
+              <TooltipIcon shape={tooltipIcon} />
             </div>
           }
         >

packages/tablev2/__snapshots__/tablev2.test.tsx.snap

@@ -86,7 +86,7 @@ exports[`Table v2 rendering renders default 1`] = `
                 >
                   <svg
                     aria-label="system-circle-information icon"
-                    class="css-qupcim"
+                    class="css-t1ofe2"
                     data-cy="icon"
                     height="16"
                     preserveAspectRatio="xMinYMin meet"
@@ -1044,7 +1044,7 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
                 >
                   <svg
                     aria-label="system-circle-information icon"
-                    class="css-qupcim"
+                    class="css-t1ofe2"
                     data-cy="icon"
                     height="16"
                     preserveAspectRatio="xMinYMin meet"

packages/tooltip/README.md

@@ -19,3 +19,13 @@ Tooltips provide additional information or clarification about a UI element when
 
 - Use hint text below the field to provide information about what input is expected.
 - Use a Tooltip to provide additional explanation about the field. Usually, Tooltips are triggered in form fields by an icon in the field's label.
+
+### Using Icons with Tooltips
+
+In the UI we use two distinct icons for tooltips: ( i ) and ( ? ). We have defined the context of each icon, describing when to use them to ensure clarity and consistency in their usage:
+
+( i ) Icon:
+The ( i ) icon is utilized to provide users with a definition of a specific term. These icons are often associated with information includes additional details, explanations, or contextual information about a specific element, feature, or term. This aids in enhancing user comprehension by offering explanations directly within the context. This is the default for the `TooltipIcon` component as it is most commonly used.
+
+( ? ) Icon:
+The ( ? ) icon serves the purpose of offering supplementary information that can guide users in making informed decisions. This information goes beyond simple definitions. It can be placed next to a complex feature or help with feature discoverability, offering users the option to learn more about it.

packages/tooltip/components/TooltipIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { SystemIcons } from "../../icons/dist/system-icons-enum";
+import { Icon } from "../../icon";
+import { greyLightDarken1 } from "../../design-tokens/build/js/designTokens";
+import { IconProps } from "../../icon/components/Icon";
+
+interface TooltipIconProps extends Omit<IconProps, "shape"> {
+  /**
+   * Icon to display, choose either (i) or (?).
+   */
+  shape?: SystemIcons.CircleInformation | SystemIcons.CircleQuestion;
+}
+
+const TooltipIcon = ({
+  shape = SystemIcons.CircleInformation,
+  ...iconProps
+}: TooltipIconProps) => {
+  return (
+    <Icon shape={shape} size="xs" color={greyLightDarken1} {...iconProps} />
+  );
+};
+
+export default TooltipIcon;

packages/tooltip/index.ts

@@ -1 +1,2 @@
 export { default as Tooltip } from "./components/Tooltip";
+export { default as TooltipIcon } from "./components/TooltipIcon";

packages/tooltip/stories/Tooltip.stories.tsx

@@ -11,6 +11,7 @@ import {
   directionsValues,
   directionsValuesLabels
 } from "../../storybookHelpers/controlConstants";
+import TooltipIcon from "../components/TooltipIcon";
 
 const tooltipStoryDecorator = storyFn => (
   <div style={{ textAlign: "center" }}>
@@ -29,18 +30,6 @@ export default {
     preferredDirections: {
       options: directionsValues,
       mapping: directionsValuesLabels
-    },
-    className: {
-      control: { disable: true }
-    },
-    trigger: {
-      control: { disable: true }
-    },
-    ariaLabel: {
-      control: { disable: true }
-    },
-    "data-cy": {
-      control: { disable: true }
     }
   }
 } as Meta;
@@ -131,3 +120,8 @@ export const ContentWidth = {
     </Tooltip>
   )
 };
+
+export const WithTooltipIcon = {
+  render: Template,
+  args: { trigger: <TooltipIcon /> }
+};