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) => {
)}
- {/*
*/}
-
{
data-name="propertyField"
condition={condition}
type={type}
+ description={description}
onChange={onPropertyChangeHandler}
>
{
wrapperClassName={`${blockClass}__close-condition-wrapper`}
/>
- {/*
*/}
{manageActionButtons(conditionIndex, group.conditions) && (
{
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..deda7fb3d0 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);
+ }
+ }, [description, label]);
+
const carbonPrefix = usePrefix();
const Button = () => {
const dataName = rest['data-name'] ?? '';
@@ -81,9 +93,9 @@ export const ConditionBuilderButton = ({
);
};
- return hideLabel || showToolTip ? (
+ return hideLabel || showToolTip || description ? (
) => ReactNode;
@@ -65,6 +66,7 @@ export const ConditionBuilderItem = ({
config,
renderChildren,
onChange,
+ description,
...rest
}: ConditionBuilderItemProps) => {
const popoverRef = useRef(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: [
{