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.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
index 17a6ed8d7c..59278e0fcb 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
+++ b/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();
+
+ // 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 () => {
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..34ab012ebe 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx
+++ b/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 ? (
) => 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..12984330ee 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: 'Continent',
config: {
options: [
{