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

carbon-design-system · Jan 16, 2025 · 5735a1b · 5735a1b
1 parent 8d2f63e
commit 5735a1b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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
@@ -125,6 +125,7 @@ export type Property = {
   id: string;
   label: string;
   icon?: CarbonIconType;
+  description?: string;
 } & (
   | PropertyConfig['option']
   | PropertyConfig['text']

diff --git a/...roducts/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx b/...roducts/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/...ucts/src/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.tsx b/...ucts/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/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx b/...bm-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
@@ -492,6 +492,7 @@ export const inputData = {
       label: 'Continent',
       icon: Earth,
       type: 'option',
+      description: 'description for continent',
       config: {
         options: [
           {