feat: add option to pass description to display on hover of properties

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={() => {

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js

@@ -1684,6 +1684,43 @@ describe(componentName, () => {
     expect(screen.getByRole('button', { name: 'excl. if' }));
   });
 
+  it('check description tooltip for property', async () => {
+    const inputConfig_ = JSON.parse(JSON.stringify(inputData));
+    inputConfig_.properties[0].description = 'This is a tooltip';
+    const user = userEvent.setup();
+    render(<ConditionBuilder {...defaultProps} inputConfig={inputConfig_} />);
+
+    // add one condition
+    await act(() => userEvent.click(screen.getByText('Add condition')));
+
+    expect(screen.getByRole('option', { name: 'Continent' }));
+
+    await act(() =>
+      userEvent.click(screen.getByRole('option', { name: 'Continent' }))
+    );
+
+    expect(screen.getByRole('option', { name: 'is' }));
+
+    await act(() =>
+      userEvent.click(screen.getByRole('option', { name: 'is' }))
+    );
+
+    expect(screen.getByRole('option', { name: 'Africa' }));
+
+    await act(() =>
+      userEvent.click(screen.getByRole('option', { name: 'Africa' }))
+    );
+
+    const selectedItem = screen.getByRole('button', { name: 'Africa' });
+
+    expect(selectedItem);
+    //hover on property
+    await act(() =>
+      user.hover(document.querySelector(`.${blockClass}__property-field`))
+    );
+    expect(screen.getByText('This is a tooltip')).toBeInTheDocument();
+  });
+
   // keyboard navigation tests
   //for Non-Hierarchical variant
   it('add and remove conditions using keyboard', async () => {

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({

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']

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx

@@ -30,6 +30,7 @@ interface ConditionBuilderButtonProps {
   isInvalid?: boolean;
   wrapperClassName?: string;
   tabIndex?: number;
+  description?: string;
 }
 
 export const ConditionBuilderButton = ({
@@ -48,8 +49,11 @@ export const ConditionBuilderButton = ({
   isInvalid,
   wrapperClassName,
   tabIndex,
+  description,
   ...rest
 }: ConditionBuilderButtonProps) => {
+  const tooltipText = description || label;
+
   const carbonPrefix = usePrefix();
   const Button = () => {
     const dataName = rest['data-name'] ?? '';
@@ -81,9 +85,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}

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',

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

packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js

@@ -492,6 +492,7 @@ export const inputData = {
       label: 'Continent',
       icon: Earth,
       type: 'option',
+      description: 'Continent',
       config: {
         options: [
           {