From 5735a1b47cead8dc1325f7b05e779db4d46d4881 Mon Sep 17 00:00:00 2001
From: Amal K Joy <amal.joy.k@gmail.com>
Date: Thu, 16 Jan 2025 15:06:03 +0530
Subject: [PATCH] feat: add option to pass description to display on hover of
 properties

---
 .../ConditionBlock/ConditionBlock.tsx          |  6 ++----
 .../ConditionBuilder/ConditionBuilder.tsx      |  1 +
 .../ConditionBuilder/ConditionBuilder.types.ts |  1 +
 .../ConditionBuilderButton.tsx                 | 18 +++++++++++++++---
 .../ConditionBuilderProvider.tsx               |  1 +
 .../ConditionBuilderItem.tsx                   |  3 +++
 .../ConditionBuilder/assets/sampleInput.js     |  1 +
 7 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
index 1e603b792b..a0c380d96e 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
@@ -122,7 +122,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
     );
   };
 
-  const { icon, type, config, label }: Property = getCurrentConfig(
+  const { icon, type, config, label, description }: Property = getCurrentConfig(
     property
   ) as Property;
 
@@ -277,8 +277,6 @@ const ConditionBlock = (props: ConditionBlockProps) => {
         </ConditionBuilderItem>
       )}
 
-      {/* <div className={`${blockClass}__block`}> */}
-
       <ConditionBuilderItem
         label={label ?? condition?.property}
         title={propertyText}
@@ -287,6 +285,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
         data-name="propertyField"
         condition={condition}
         type={type}
+        description={description}
         onChange={onPropertyChangeHandler}
       >
         <ItemOption
@@ -347,7 +346,6 @@ const ConditionBlock = (props: ConditionBlockProps) => {
           wrapperClassName={`${blockClass}__close-condition-wrapper`}
         />
       </span>
-      {/* </div> */}
       {manageActionButtons(conditionIndex, group.conditions) && (
         <ConditionBuilderAdd
           onClick={() => {
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx
index 63300d1051..77c8543cd0 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx
@@ -239,6 +239,7 @@ ConditionBuilder.propTypes = {
           'time',
           'custom',
         ]).isRequired,
+        description: PropTypes.string, //will be displayed on hover of property field
         config: PropTypes.shape({
           options: PropTypes.arrayOf(
             PropTypes.shape({
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
index daddf1e47a..493e22ae2f 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
@@ -125,6 +125,7 @@ export type Property = {
   id: string;
   label: string;
   icon?: CarbonIconType;
+  description?: string;
 } & (
   | PropertyConfig['option']
   | PropertyConfig['text']
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx
index ec6dea385b..8ca75a6b3f 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 
 import PropTypes from 'prop-types';
@@ -30,6 +30,7 @@ interface ConditionBuilderButtonProps {
   isInvalid?: boolean;
   wrapperClassName?: string;
   tabIndex?: number;
+  description?: string;
 }
 
 export const ConditionBuilderButton = ({
@@ -48,8 +49,19 @@ export const ConditionBuilderButton = ({
   isInvalid,
   wrapperClassName,
   tabIndex,
+  description,
   ...rest
 }: ConditionBuilderButtonProps) => {
+  const [tooltipText, setTooltipText] = useState(label);
+  useEffect(() => {
+    if (description) {
+      setTooltipText(description as string);
+    } else {
+      setTooltipText(label);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [description]);
+
   const carbonPrefix = usePrefix();
   const Button = () => {
     const dataName = rest['data-name'] ?? '';
@@ -81,9 +93,9 @@ export const ConditionBuilderButton = ({
     );
   };
 
-  return hideLabel || showToolTip ? (
+  return hideLabel || showToolTip || description ? (
     <Tooltip
-      label={label}
+      label={tooltipText}
       align={tooltipAlign}
       className={`${wrapperClassName} ${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`}
       {...wrapperProps}
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx
index ec5eb70aee..03498a9b81 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx
@@ -106,6 +106,7 @@ ConditionBuilderProvider.propTypes = {
         id: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
         icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+        description: PropTypes.string,
         type: PropTypes.oneOf([
           'text',
           'textarea',
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx
index a61bb1d110..1d007f9f9b 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx
@@ -42,6 +42,7 @@ interface ConditionBuilderItemProps extends PropsWithChildren {
   showToolTip?: boolean;
   popOverClassName?: string;
   type?: string;
+  description?: string;
   condition?: Action & Condition;
   config?: PropertyConfig;
   renderChildren?: (ref: RefObject<HTMLDivElement>) => ReactNode;
@@ -65,6 +66,7 @@ export const ConditionBuilderItem = ({
   config,
   renderChildren,
   onChange,
+  description,
   ...rest
 }: ConditionBuilderItemProps) => {
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -236,6 +238,7 @@ export const ConditionBuilderItem = ({
         }
         showToolTip={showToolTip}
         isInvalid={isInvalid}
+        description={description}
         {...rest}
       />
 
diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
index eec003a83b..cf4805d634 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
+++ b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
@@ -492,6 +492,7 @@ export const inputData = {
       label: 'Continent',
       icon: Earth,
       type: 'option',
+      description: 'description for continent',
       config: {
         options: [
           {