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 /> }
+};